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"