CSR-795 add modal for quote page.
This commit is contained in:
Bryan Mauger
parent
3a819af3af
commit
4156eb281b
6 changed files with 187 additions and 92 deletions
|
|
@ -7,7 +7,7 @@
|
|||
</button>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
|
||||
<div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
|
||||
<div class="menu-modal-container">
|
||||
<button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
|
||||
<div class="bar1"></div>
|
||||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
||||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;//Required to prevent 'squish' on iPhone
|
||||
z-index: 1056;
|
||||
z-index: 1050;
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
|
|
@ -102,66 +102,68 @@ export default {
|
|||
}
|
||||
}
|
||||
.modal {
|
||||
max-width: 576px;
|
||||
left: auto;
|
||||
height: calc(100% - 72px);
|
||||
top: 72px;
|
||||
border-top: 1px solid $gray-300;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
.modal-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
.modal-fullscreen {
|
||||
width: 100vw;
|
||||
max-width: 576px;
|
||||
}
|
||||
.navigation-link {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
padding: 2rem;
|
||||
}
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
||||
right: 0;
|
||||
top: -4.5rem;
|
||||
button {
|
||||
border: none;
|
||||
&.menu-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;//Required to prevent 'squish' on iPhone
|
||||
z-index: 1056;
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: $blue;
|
||||
margin: 1px 0;
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.active .bar1 {
|
||||
transform: rotate(-45deg) translate(-3px, 3px);
|
||||
}
|
||||
&.active .bar2 {opacity: 0;}
|
||||
&.active .bar3 {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
&.menu-modal {
|
||||
max-width: 576px;
|
||||
left: auto;
|
||||
height: calc(100% - 72px);
|
||||
top: 72px;
|
||||
border-top: 1px solid $gray-300;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
.modal-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
.modal-fullscreen {
|
||||
width: 100vw;
|
||||
max-width: 576px;
|
||||
}
|
||||
.navigation-link {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
padding: 2rem;
|
||||
}
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
||||
right: 0;
|
||||
top: -4.5rem;
|
||||
button {
|
||||
border: none;
|
||||
&.menu-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;//Required to prevent 'squish' on iPhone
|
||||
z-index: 1056;
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: $blue;
|
||||
margin: 1px 0;
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.active .bar1 {
|
||||
transform: rotate(-45deg) translate(-3px, 3px);
|
||||
}
|
||||
&.active .bar2 {opacity: 0;}
|
||||
&.active .bar3 {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//.modal-backdrop styles are in common-styles.scss
|
||||
}
|
||||
//.modal-backdrop styles are in common-styles.scss
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
75
src/layouts/quote/quote-modal/quote-modal.vue
Normal file
75
src/layouts/quote/quote-modal/quote-modal.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade quote-modal" id="quoteModal" tabindex="-1" aria-labelledby="quoteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body px-4 py-5">
|
||||
<img :src="this.ModalImage" class="w-100 mb-4" alt="" />
|
||||
<h5 class="mb-4">{{this.ModalHeadline}}</h5>
|
||||
<p class="fw-bold mb-2">{{this.ModalSubheadertext}}</p>
|
||||
<p class="mb-0" v-html="this.ModalBodyText"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary w-100" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
export default {
|
||||
name: 'quoteModal',
|
||||
props: {
|
||||
headlineText: String,
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ModalHeadline(){
|
||||
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
},
|
||||
ModalSubheadertext(){
|
||||
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
||||
},
|
||||
ModalBodyText(){
|
||||
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||
},
|
||||
ModalImage(){
|
||||
return this.getCmsContent(this.cmsWidgetName, "Image");
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.modal {
|
||||
&.quote-modal {
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
max-width: 327px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
|
||||
.modal-body {
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-backdrop {
|
||||
&.show {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,6 +35,9 @@
|
|||
@ForwardClicked="forwardButtonAction"
|
||||
/>
|
||||
</div>
|
||||
<quoteModal
|
||||
cmsWidgetName="EstimateRainDefenseModal"
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
@ -47,6 +50,7 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
|||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
|
||||
import quoteModal from "@/layouts/quote/quote-modal/quote-modal.vue";
|
||||
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -90,7 +94,10 @@ export default {
|
|||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
QuoteRecalImage(){
|
||||
return this.getCmsContent("EstimateRecalModal", "Image");
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
@ -100,7 +107,8 @@ export default {
|
|||
funnelSubHeader,
|
||||
Form,
|
||||
buttonQuestion,
|
||||
radioServicePackage
|
||||
radioServicePackage,
|
||||
quoteModal,
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ export default {
|
|||
color: $blue;
|
||||
font-weight: 500;
|
||||
transition: all 150ms linear;
|
||||
height: 3rem;
|
||||
&:hover {
|
||||
color: $white;
|
||||
@include blue-gradient;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="package-main">
|
||||
<a href="#!" class="justify-content-end w-100" :class="[isActive ? 'active' : '']" @click="toggleClass()">Compare packages</a>
|
||||
<textLink class="justify-content-end w-100" linkType="text" text="Compare packages" href="#!" :class="[isActive ? 'active' : '', hasArrow ? 'arrow' : '']" @click="toggleClass()" />
|
||||
<div class="package-wrapper">
|
||||
<input type="radio" name="test-radio" id="testradio">
|
||||
<label for="testradio">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<p class="sub-label m-0">most popular</p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li>Expert installation</li>
|
||||
<li>Expert installation and <textLink linkType="dashedUnderline" text="recalibration" href="#!" data-bs-toggle="modal" data-bs-target="#quoteModal" aria-label="Modal window" /></li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
<li>New wiper blades</li>
|
||||
</ul>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<li>Expert installation</li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
<li>New wiper blades</li>
|
||||
<li>Rain Defense™ treatment</li>
|
||||
<li>Rain Defense</li>
|
||||
</ul>
|
||||
</div>
|
||||
</label>
|
||||
|
|
@ -48,50 +48,28 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
export default {
|
||||
name: "radioServicePackage",
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
hasArrow: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleClass: function(event){
|
||||
this.isActive = !this.isActive;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
textLink
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.package-main {
|
||||
a {
|
||||
&:after {
|
||||
content: "";
|
||||
transition: all .5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
margin-left: .5rem;
|
||||
width: 16px;
|
||||
height: auto;
|
||||
}
|
||||
&.active {
|
||||
~ .package-wrapper {
|
||||
.package-specs {
|
||||
max-height: 1000px !important;
|
||||
}
|
||||
}
|
||||
&.active:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.active + .vin-info {
|
||||
max-height: 500px;
|
||||
transition: all 250ms ease-in;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.package-wrapper {
|
||||
margin: 0.5rem 0;
|
||||
input[type="radio"] {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
|
||||
<a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
|
||||
<a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
|
||||
<a v-else-if="linkType === 'dashedUnderline'" @click="handleClick" class="dashed-underline" :href="href">{{text}}</a>
|
||||
<a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
|
||||
</template>
|
||||
|
||||
|
|
@ -58,5 +59,35 @@ a {
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.dashed-underline {
|
||||
text-decoration: underline dashed 1px;
|
||||
}
|
||||
&.arrow {
|
||||
&:after {
|
||||
content: "";
|
||||
transition: all .5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
margin-left: .5rem;
|
||||
width: 16px;
|
||||
height: auto;
|
||||
}
|
||||
&.active {
|
||||
~ .package-wrapper {
|
||||
.package-specs {
|
||||
max-height: 1000px !important;
|
||||
}
|
||||
}
|
||||
&.active:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.active + .vin-info {
|
||||
max-height: 500px;
|
||||
transition: all 250ms ease-in;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue