Merge pull request #858 from dod-ccpo/sticky-to

Sticky CTA Header

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 stickybits from 'stickybits'
 
 import dodlogin from './components/dodlogin'
 import levelofwarrant from './components/levelofwarrant'
@@ -124,4 +125,12 @@ const app = new Vue({
     })
   },
   delimiters: ['!{', '}'],
+
+  directives: {
+    sticky: {
+      inserted: el => {
+        stickybits(el)
+      },
+    },
+  },
 })

package.json

@@ -19,6 +19,7 @@
     "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",

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";

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;
 

styles/components/_sticky_cta.scss

@@ -0,0 +1,41 @@
+.sticky-cta {
+  @include media($small-screen) {
+    margin-left: -$gap * 4;
+  }
+
+  @include media($medium-screen) {
+    margin-left: -$gap * 7;
+  }
+}
+
+.sticky-cta.js-is-sticky {
+  width: 78.5%;
+}
+
+.sticky-cta-container {
+  display: flex;
+  justify-content: center;
+
+  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-text {
+  flex-grow: 1;
+}
+
+.sticky-cta-buttons {
+  display: flex;
+  justify-content: center;
+
+  button {
+    margin-top: auto;
+    margin-bottom: auto;
+    width: 144px;
+    margin-left: 33px;
+  }
+}

styles/core/_grid.scss

@@ -42,6 +42,5 @@
   &.col--grow {
     flex: 1;
     flex-grow: 1;
-    overflow: auto;
   }
 }

templates/components/sticky_cta.html

@@ -0,0 +1,12 @@
+{% macro StickyCTA(text) -%}
+    <div class="sticky-cta" v-sticky="{ stickyTop: 2 }">
+        <div class="sticky-cta-container">
+            <div class="sticky-cta-text">
+                <h3>{{ text }}</h3>
+            </div>
+            <div class="sticky-cta-buttons">
+                {{ caller() }}
+            </div>
+        </div>
+    </div>
+{%- endmacro %}

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 @@
 
 <div class="portfolio-funding">
 
-  <div class='portfolio-funding__header row'>
-    <a href="{{ url_for("task_orders.new", screen=1, portfolio_id=portfolio.id) }}" class="usa-button">Start a new task order</a>
-  </div>
+  {% call StickyCTA(text="Funding") %}
+    <div class='portfolio-funding__header row'>
+      <a href="{{ url_for("task_orders.new", screen=1, portfolio_id=portfolio.id) }}" class="usa-button">Start a new task order</a>
+    </div>
+  {% endcall %}
 
   {% for task_order in pending_task_orders %}
     <div class='subheading'>

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"