Create reusable StickyCTA component
This commit is contained in:
parent
4e0cc26b5f
commit
37ca94df42
@ -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}
|
||||
})
|
||||
|
@ -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": {
|
||||
|
@ -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";
|
||||
|
@ -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;
|
||||
|
||||
|
40
styles/components/_sticky_cta.scss
Normal file
40
styles/components/_sticky_cta.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
@ -42,6 +42,5 @@
|
||||
&.col--grow {
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
12
templates/components/sticky_cta.html
Normal file
12
templates/components/sticky_cta.html
Normal file
@ -0,0 +1,12 @@
|
||||
{% macro StickyCTA(text) -%}
|
||||
<div class="sticky-cta" v-sticky="{ zIndex: 1, stickyTop: 10 }">
|
||||
<div class="sticky-cta-container">
|
||||
<div class="sticky-cta-text">
|
||||
<h3>{{ text }}</h3>
|
||||
</div>
|
||||
<div class="sticky-cta-buttons">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %}
|
6
templates/portfolios/add_funding_cta.html
Normal file
6
templates/portfolios/add_funding_cta.html
Normal file
@ -0,0 +1,6 @@
|
||||
{% from "components/sticky_cta.html" import StickyCTA %}
|
||||
{% from 'components/save_button.html' import SaveButton %}
|
||||
|
||||
{% call StickyCTA(text="Funding") %}
|
||||
MEOW
|
||||
{% endcall %}
|
@ -7,6 +7,8 @@
|
||||
|
||||
{% block portfolio_content %}
|
||||
|
||||
{% include "portfolios/add_funding_cta.html" %}
|
||||
|
||||
<div class='portfolio-applications'>
|
||||
{% include "fragments/flash.html" %}
|
||||
<div class='portfolio-applications__header row'>
|
||||
|
@ -1,3 +1,5 @@
|
||||
{% from "components/sticky_cta.html" import StickyCTA %}
|
||||
{% from "components/save_button.html" import SaveButton %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user