From 37ca94df42c2d2fed83270abed0d780d1c2f9d31 Mon Sep 17 00:00:00 2001 From: richard-dds Date: Thu, 30 May 2019 16:47:42 -0400 Subject: [PATCH 1/9] Create reusable StickyCTA component --- js/index.js | 3 ++ package.json | 1 + styles/atat.scss | 1 + styles/components/_global_layout.scss | 1 - styles/components/_sticky_cta.scss | 40 ++++++++++++++++++++ styles/core/_grid.scss | 1 - templates/components/sticky_cta.html | 12 ++++++ templates/portfolios/add_funding_cta.html | 6 +++ templates/portfolios/applications/index.html | 2 + templates/task_orders/_new.html | 2 + yarn.lock | 5 +++ 11 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 styles/components/_sticky_cta.scss create mode 100644 templates/components/sticky_cta.html create mode 100644 templates/portfolios/add_funding_cta.html diff --git a/js/index.js b/js/index.js index 520dea03..0539e266 100644 --- a/js/index.js +++ b/js/index.js @@ -5,6 +5,7 @@ import ally from 'ally.js' import classes from '../styles/atat.scss' import Vue from 'vue/dist/vue' import VTooltip from 'v-tooltip' +import VueSticky from 'vue-sticky' import dodlogin from './components/dodlogin' import levelofwarrant from './components/levelofwarrant' @@ -113,4 +114,6 @@ const app = new Vue({ }) }, delimiters: ['!{', '}'], + + directives: {'sticky': VueSticky} }) diff --git a/package.json b/package.json index 9da64e8a..3d69dbed 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "uswds": "^1.6.9", "v-tooltip": "^2.0.0-rc.33", "vue": "2.5.15", + "vue-sticky": "^3.3.4", "vue-text-mask": "^6.1.2" }, "devDependencies": { diff --git a/styles/atat.scss b/styles/atat.scss index 22757667..3f745e78 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -43,6 +43,7 @@ @import "components/usa_banner"; @import "components/checklist"; @import "components/dod_login_notice.scss"; +@import "components/sticky_cta.scss"; @import "sections/login"; @import "sections/home"; diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 4e5023f6..27d1c4eb 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -24,7 +24,6 @@ body { .global-panel-container { margin: $gap; max-width: $site-max-width; - overflow-x: auto; flex-grow: 1; -ms-flex-negative: 1; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss new file mode 100644 index 00000000..773f2955 --- /dev/null +++ b/styles/components/_sticky_cta.scss @@ -0,0 +1,40 @@ +.sticky-cta { + @include media($small-screen) { + margin-left: -$gap * 4; + } + + @include media($medium-screen) { + margin-left: -$gap * 5; + } + + background-color: $color-gray-lightest; + + border-top: 1px solid $color-gray-lighter; + border-bottom: 1px solid $color-gray-lighter; + + padding: 0 40px 0 40px; + box-shadow: $box-shadow; + + margin-bottom: 20px; +} + +.sticky-cta-container { + display: flex; + justify-content: center; +} + +.sticky-cta-text { + flex-grow: 1; +} + +.sticky-cta-buttons { + display: flex; + justify-content: center; + + button { + margin-top: auto; + margin-bottom: auto; + width: 144px; + margin-left: 33px; + } +} diff --git a/styles/core/_grid.scss b/styles/core/_grid.scss index f926b0d8..17aa81a6 100644 --- a/styles/core/_grid.scss +++ b/styles/core/_grid.scss @@ -42,6 +42,5 @@ &.col--grow { flex: 1; flex-grow: 1; - overflow: auto; } } diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html new file mode 100644 index 00000000..6d47a32a --- /dev/null +++ b/templates/components/sticky_cta.html @@ -0,0 +1,12 @@ +{% macro StickyCTA(text) -%} +
+
+
+

{{ text }}

+
+
+ {{ caller() }} +
+
+
+{%- endmacro %} diff --git a/templates/portfolios/add_funding_cta.html b/templates/portfolios/add_funding_cta.html new file mode 100644 index 00000000..b757f40b --- /dev/null +++ b/templates/portfolios/add_funding_cta.html @@ -0,0 +1,6 @@ +{% from "components/sticky_cta.html" import StickyCTA %} +{% from 'components/save_button.html' import SaveButton %} + +{% call StickyCTA(text="Funding") %} + MEOW +{% endcall %} diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 923de347..a6dc7715 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -7,6 +7,8 @@ {% block portfolio_content %} +{% include "portfolios/add_funding_cta.html" %} +
{% include "fragments/flash.html" %}
diff --git a/templates/task_orders/_new.html b/templates/task_orders/_new.html index d4b7c48a..f545deba 100644 --- a/templates/task_orders/_new.html +++ b/templates/task_orders/_new.html @@ -1,3 +1,5 @@ +{% from "components/sticky_cta.html" import StickyCTA %} +{% from "components/save_button.html" import SaveButton %} {% extends "base.html" %} {% block content %} diff --git a/yarn.lock b/yarn.lock index 048323d0..72ac1e80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9295,6 +9295,11 @@ vue-resize@^0.4.3: version "0.4.4" resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.4.tgz#dee9b8dd1b189e7e3f6ec47f86c60694a241bb17" +vue-sticky@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/vue-sticky/-/vue-sticky-3.3.4.tgz#d06288c4d28cfefdc7037e90b2ce51e5b51585c9" + integrity sha512-7Hcvw7MjzyQo3/rb2R2LvuxiIymJv49Gg6pXslFDjTr7UZoFxFvp8QYG1WFfKuk8V8eZHRKi1QD5dxRMQkm2OQ== + vue-template-compiler@2.5.15: version "2.5.15" resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.15.tgz#cc004097e37167be8b85ea22ab2840d8e8cca1c0" From 830249019472856b852e35378f102c0f3676c966 Mon Sep 17 00:00:00 2001 From: richard-dds Date: Fri, 31 May 2019 15:21:49 -0400 Subject: [PATCH 2/9] Add StickyCTA impl to portfolio funding page --- styles/components/_sticky_cta.scss | 2 +- templates/portfolios/applications/index.html | 2 -- templates/portfolios/task_orders/index.html | 9 ++++++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 773f2955..8809b9ef 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -4,7 +4,7 @@ } @include media($medium-screen) { - margin-left: -$gap * 5; + margin-left: -$gap * 7; } background-color: $color-gray-lightest; diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index a6dc7715..923de347 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -7,8 +7,6 @@ {% block portfolio_content %} -{% include "portfolios/add_funding_cta.html" %} -
{% include "fragments/flash.html" %}
diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html index 4fa70009..cf0cd9ea 100644 --- a/templates/portfolios/task_orders/index.html +++ b/templates/portfolios/task_orders/index.html @@ -1,5 +1,6 @@ {% from "components/empty_state.html" import EmptyState %} {% from "components/icon.html" import Icon %} +{% from "components/sticky_cta.html" import StickyCTA %} {% extends "portfolios/base.html" %} @@ -92,9 +93,11 @@
-
- Start a new task order -
+ {% call StickyCTA(text="Funding") %} +
+ Start a new task order +
+ {% endcall %} {% for task_order in pending_task_orders %}
From 27041f77fba56bbf781be44f01a50ded9a96594e Mon Sep 17 00:00:00 2001 From: richard-dds Date: Fri, 31 May 2019 16:28:34 -0400 Subject: [PATCH 3/9] Formatting --- js/index.js | 2 +- styles/components/_sticky_cta.scss | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/js/index.js b/js/index.js index 0539e266..3793573c 100644 --- a/js/index.js +++ b/js/index.js @@ -115,5 +115,5 @@ const app = new Vue({ }, delimiters: ['!{', '}'], - directives: {'sticky': VueSticky} + directives: { sticky: VueSticky }, }) diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 8809b9ef..f824d76e 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -8,13 +8,10 @@ } background-color: $color-gray-lightest; - border-top: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-lighter; - padding: 0 40px 0 40px; box-shadow: $box-shadow; - margin-bottom: 20px; } From 130fe08224c42cb64272ad93abbfa67efdfe158e Mon Sep 17 00:00:00 2001 From: richard-dds Date: Mon, 3 Jun 2019 14:30:14 -0400 Subject: [PATCH 4/9] Reduce top padding --- templates/components/sticky_cta.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html index 6d47a32a..b4c37d5a 100644 --- a/templates/components/sticky_cta.html +++ b/templates/components/sticky_cta.html @@ -1,5 +1,5 @@ {% macro StickyCTA(text) -%} -
+

{{ text }}

From 79a118a95ca4a453b0ce38e82b43761ced8c7e9f Mon Sep 17 00:00:00 2001 From: richard-dds Date: Mon, 3 Jun 2019 14:36:31 -0400 Subject: [PATCH 5/9] Remove unused template --- templates/portfolios/add_funding_cta.html | 6 ------ templates/task_orders/_new.html | 2 -- 2 files changed, 8 deletions(-) delete mode 100644 templates/portfolios/add_funding_cta.html diff --git a/templates/portfolios/add_funding_cta.html b/templates/portfolios/add_funding_cta.html deleted file mode 100644 index b757f40b..00000000 --- a/templates/portfolios/add_funding_cta.html +++ /dev/null @@ -1,6 +0,0 @@ -{% from "components/sticky_cta.html" import StickyCTA %} -{% from 'components/save_button.html' import SaveButton %} - -{% call StickyCTA(text="Funding") %} - MEOW -{% endcall %} diff --git a/templates/task_orders/_new.html b/templates/task_orders/_new.html index f545deba..d4b7c48a 100644 --- a/templates/task_orders/_new.html +++ b/templates/task_orders/_new.html @@ -1,5 +1,3 @@ -{% from "components/sticky_cta.html" import StickyCTA %} -{% from "components/save_button.html" import SaveButton %} {% extends "base.html" %} {% block content %} From 84146608c7ff11f0f7729a5ca52644d4ea5a3481 Mon Sep 17 00:00:00 2001 From: richard-dds Date: Tue, 4 Jun 2019 11:22:35 -0400 Subject: [PATCH 6/9] Replace vue-sticky with stickybits for IE compat --- js/index.js | 9 ++++++++- package.json | 2 +- styles/components/_sticky_cta.scss | 10 +++++----- yarn.lock | 10 +++++----- 4 files changed, 19 insertions(+), 12 deletions(-) diff --git a/js/index.js b/js/index.js index 3793573c..1ef12bf9 100644 --- a/js/index.js +++ b/js/index.js @@ -6,6 +6,7 @@ import classes from '../styles/atat.scss' import Vue from 'vue/dist/vue' import VTooltip from 'v-tooltip' import VueSticky from 'vue-sticky' +import stickybits from 'stickybits' import dodlogin from './components/dodlogin' import levelofwarrant from './components/levelofwarrant' @@ -115,5 +116,11 @@ const app = new Vue({ }, delimiters: ['!{', '}'], - directives: { sticky: VueSticky }, + directives: { + sticky: { + inserted: el => { + stickybits(el) + }, + }, + }, }) diff --git a/package.json b/package.json index 3d69dbed..8fb0ae7b 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,12 @@ "date-fns": "^1.29.0", "npm": "^6.0.1", "ramda": "^0.25.0", + "stickybits": "^3.6.6", "svg-innerhtml": "^1.1.0", "text-mask-addons": "^3.8.0", "uswds": "^1.6.9", "v-tooltip": "^2.0.0-rc.33", "vue": "2.5.15", - "vue-sticky": "^3.3.4", "vue-text-mask": "^6.1.2" }, "devDependencies": { diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index f824d76e..2a265ebe 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -6,6 +6,11 @@ @include media($medium-screen) { margin-left: -$gap * 7; } +} + +.sticky-cta-container { + display: flex; + justify-content: center; background-color: $color-gray-lightest; border-top: 1px solid $color-gray-lighter; @@ -15,11 +20,6 @@ margin-bottom: 20px; } -.sticky-cta-container { - display: flex; - justify-content: center; -} - .sticky-cta-text { flex-grow: 1; } diff --git a/yarn.lock b/yarn.lock index 72ac1e80..d1562d22 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8555,6 +8555,11 @@ stealthy-require@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b" +stickybits@^3.6.6: + version "3.6.6" + resolved "https://registry.yarnpkg.com/stickybits/-/stickybits-3.6.6.tgz#ce042cbeaecfcc84cda602be6f5bc99b63e2964c" + integrity sha512-+++I84+V+IqRXCDIgSn7tGHXF1BtsPn/Nb3Ve3ZEH2NnTauorHyUFbKTW+nycobxtsGQMnl5V0WdHxGTDdmp+A== + stream-browserify@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db" @@ -9295,11 +9300,6 @@ vue-resize@^0.4.3: version "0.4.4" resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.4.tgz#dee9b8dd1b189e7e3f6ec47f86c60694a241bb17" -vue-sticky@^3.3.4: - version "3.3.4" - resolved "https://registry.yarnpkg.com/vue-sticky/-/vue-sticky-3.3.4.tgz#d06288c4d28cfefdc7037e90b2ce51e5b51585c9" - integrity sha512-7Hcvw7MjzyQo3/rb2R2LvuxiIymJv49Gg6pXslFDjTr7UZoFxFvp8QYG1WFfKuk8V8eZHRKi1QD5dxRMQkm2OQ== - vue-template-compiler@2.5.15: version "2.5.15" resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.15.tgz#cc004097e37167be8b85ea22ab2840d8e8cca1c0" From 1096a69062223d4c1a27b86949ae97adb17d75f8 Mon Sep 17 00:00:00 2001 From: richard-dds Date: Tue, 4 Jun 2019 11:55:34 -0400 Subject: [PATCH 7/9] Work in IE11 please --- styles/components/_sticky_cta.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 2a265ebe..316fb46c 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -6,6 +6,11 @@ @include media($medium-screen) { margin-left: -$gap * 7; } + +} + +.sticky-cta.js-is-sticky { + width: 78.5%; } .sticky-cta-container { From 597fe0b1d72c6a2f3204eca8b8bb16adc5a37349 Mon Sep 17 00:00:00 2001 From: richard-dds Date: Tue, 4 Jun 2019 13:46:21 -0400 Subject: [PATCH 8/9] Formatting --- styles/components/_sticky_cta.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 316fb46c..d4619c76 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -6,7 +6,6 @@ @include media($medium-screen) { margin-left: -$gap * 7; } - } .sticky-cta.js-is-sticky { From a233bf0e0e3e08277fab079fde378dd02828dcc7 Mon Sep 17 00:00:00 2001 From: richard-dds Date: Tue, 4 Jun 2019 14:21:23 -0400 Subject: [PATCH 9/9] Remove reference to vue-sticky --- js/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/index.js b/js/index.js index 1ef12bf9..daae146e 100644 --- a/js/index.js +++ b/js/index.js @@ -5,7 +5,6 @@ import ally from 'ally.js' import classes from '../styles/atat.scss' import Vue from 'vue/dist/vue' import VTooltip from 'v-tooltip' -import VueSticky from 'vue-sticky' import stickybits from 'stickybits' import dodlogin from './components/dodlogin'