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"