jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-795 add modal for quote page.

Browse source
This commit is contained in:
Bryan Mauger 2022-08-24 09:43:34 -04:00
parent 3a819af3af
commit 4156eb281b
6 changed files with 187 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/common-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -7,7 +7,7 @@
</button> </button>
</div> </div>
<!-- Modal --> <!-- 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"> <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)"> <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> <div class="bar1"></div>
@ -62,7 +62,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.menu-modal-container { .menu-modal-container {
position: absolute; position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem; padding: 1.47rem 1rem 1.47rem 1.47rem;
@ -81,7 +81,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0;//Required to prevent 'squish' on iPhone padding: 0;//Required to prevent 'squish' on iPhone
z-index: 1056; z-index: 1050;
.bar1, .bar1,
.bar2, .bar2,
.bar3 { .bar3 {
@ -102,66 +102,68 @@ export default {
} }
} }
.modal { .modal {
max-width: 576px; &.menu-modal {
left: auto; max-width: 576px;
height: calc(100% - 72px); left: auto;
top: 72px; height: calc(100% - 72px);
border-top: 1px solid $gray-300; top: 72px;
overflow-x: visible; border-top: 1px solid $gray-300;
overflow-y: visible; overflow-x: visible;
.modal-body { overflow-y: visible;
padding: 2rem; .modal-body {
} padding: 2rem;
.modal-fullscreen { }
width: 100vw; .modal-fullscreen {
max-width: 576px; width: 100vw;
} max-width: 576px;
.navigation-link { }
margin-bottom: 1.5rem; .navigation-link {
} margin-bottom: 1.5rem;
.modal-footer { }
border-top: none; .modal-footer {
padding: 2rem; border-top: none;
} padding: 2rem;
.menu-modal-container { }
position: absolute; .menu-modal-container {
padding: 1.47rem 1rem 1.47rem 1.47rem; position: absolute;
right: 0; padding: 1.47rem 1rem 1.47rem 1.47rem;
top: -4.5rem; right: 0;
button { top: -4.5rem;
border: none; button {
&.menu-button { border: none;
width: 1.5rem; &.menu-button {
height: 1.5rem; width: 1.5rem;
border-radius: 50%; height: 1.5rem;
box-shadow: none; border-radius: 50%;
background-color: $white; box-shadow: none;
position: relative; background-color: $white;
display: flex; position: relative;
flex-direction: column; display: flex;
justify-content: center; flex-direction: column;
align-items: center; justify-content: center;
padding: 0;//Required to prevent 'squish' on iPhone align-items: center;
z-index: 1056; padding: 0;//Required to prevent 'squish' on iPhone
.bar1, z-index: 1056;
.bar2, .bar1,
.bar3 { .bar2,
width: 14px; .bar3 {
height: 2px; width: 14px;
background-color: $blue; height: 2px;
margin: 1px 0; background-color: $blue;
transition: 0.25s; margin: 1px 0;
} transition: 0.25s;
&.active .bar1 { }
transform: rotate(-45deg) translate(-3px, 3px); &.active .bar1 {
} transform: rotate(-45deg) translate(-3px, 3px);
&.active .bar2 {opacity: 0;} }
&.active .bar3 { &.active .bar2 {opacity: 0;}
transform: rotate(45deg) translate(-3px, -3px); &.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> </style>

75
src/layouts/quote/quote-modal/quote-modal.vue Normal file
View 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>

12
src/layouts/quote/quote.vue
View file

@ -35,6 +35,9 @@
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
/> />
</div> </div>
<quoteModal
cmsWidgetName="EstimateRainDefenseModal"
/>
</div> </div>
</Form> </Form>
</template> </template>
@ -47,6 +50,7 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package"; 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 { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
@ -90,7 +94,10 @@ export default {
}, },
set: function(newValue) { set: function(newValue) {
this.$emit("update:modelValue", newValue); this.$emit("update:modelValue", newValue);
} },
QuoteRecalImage(){
return this.getCmsContent("EstimateRecalModal", "Image");
},
}, },
}, },
components: { components: {
@ -100,7 +107,8 @@ export default {
funnelSubHeader, funnelSubHeader,
Form, Form,
buttonQuestion, buttonQuestion,
radioServicePackage radioServicePackage,
quoteModal,
}, },
}; };

1
src/ux-components/button-main/button-main.vue
View file

@ -110,6 +110,7 @@ export default {
color: $blue; color: $blue;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
height: 3rem;
&:hover { &:hover {
color: $white; color: $white;
@include blue-gradient; @include blue-gradient;

38
src/ux-components/radio-service-package/radio-service-package.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="package-main"> <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"> <div class="package-wrapper">
<input type="radio" name="test-radio" id="testradio"> <input type="radio" name="test-radio" id="testradio">
<label for="testradio"> <label for="testradio">
@ -22,7 +22,7 @@
<p class="sub-label m-0">most popular</p> <p class="sub-label m-0">most popular</p>
<ul> <ul>
<li>New replacement windshield</li> <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>Nationwide lifetime warranty</li>
<li>New wiper blades</li> <li>New wiper blades</li>
</ul> </ul>
@ -39,7 +39,7 @@
<li>Expert installation</li> <li>Expert installation</li>
<li>Nationwide lifetime warranty</li> <li>Nationwide lifetime warranty</li>
<li>New wiper blades</li> <li>New wiper blades</li>
<li>Rain Defense&trade; treatment</li> <li>Rain Defense</li>
</ul> </ul>
</div> </div>
</label> </label>
@ -48,50 +48,28 @@
</template> </template>
<script> <script>
import textLink from "@/ux-components/text-link/text-link";
export default { export default {
name: "radioServicePackage", name: "radioServicePackage",
data() { data() {
return { return {
isActive: false, isActive: false,
hasArrow: true,
}; };
}, },
methods: { methods: {
toggleClass: function(event){ toggleClass: function(event){
this.isActive = !this.isActive; this.isActive = !this.isActive;
} }
},
components: {
textLink
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.package-main { .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 { .package-wrapper {
margin: 0.5rem 0; margin: 0.5rem 0;
input[type="radio"] { input[type="radio"] {

31
src/ux-components/text-link/text-link.vue
View file

@ -2,6 +2,7 @@
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a> <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 === '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 === '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> <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
</template> </template>
@ -58,5 +59,35 @@ a {
text-decoration: underline; 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> </style>