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

WIP footer menu modal.

Browse source
This commit is contained in:
bmauger 2022-05-26 17:03:52 -04:00
parent 573f1e94ca
commit f1b600b446
8 changed files with 120 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common-components/footer-menu-modal/footer-menu-modal.spec.js Normal file
View file

@ -0,0 +1 @@
test.todo("some test to be written in the future");

52
src/common-components/footer-menu-modal/footer-menu-modal.vue Normal file
View file

@ -0,0 +1,52 @@
<template>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-body d-flex flex-column">
<textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
<textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
<textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{new Date().getFullYear()}} Safelite Group
</div>
</div>
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
export default {
name: 'footerMenuModal',
components: {
textLink,
},
}
</script>
<style lang="scss">
.modal {
max-width: 576px;
left: auto;
height: calc(100% - 72px);
top: 72px;
border-top: 1px solid $gray-300;
.modal-body {
padding: 2rem;
}
.modal-fullscreen {
width: 100vw;
max-width: 576px;
}
.navigation-link {
margin-bottom: 1.5rem;
}
.modal-footer {
border-top: none;
padding: 2rem;
}
//.modal-backdrop styles are in common-styles.scss
}
</style>

6
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="footer pt-4">
<footer class="footer pt-4">
<div class="container-fluid g-2">
<div class="row">
<div class="col-12 d-flex justify-content-center pb-2 fs-7">
@ -26,6 +26,7 @@
:aria-disabled="isForwardActionDisabled"
:isDisabled="isForwardActionDisabled"
@click-event="buttonClick"
data-bs-dismiss="modal"
/>
</div>
<div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
@ -34,11 +35,12 @@
:text="backLink"
@click-event="linkClick"
href="javascript:void(0)"
data-bs-dismiss="modal"
/>
</div>
</div>
</div>
</div>
</footer>
</template>
<script>

6
src/common-components/funnel-header/funnel-header.vue
View file

@ -4,6 +4,8 @@
v-if="imageSrc"
>
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
<menuButton/>
<footerMenuModal/>
</div>
<alert
class="position-absolute rounded-0 w-100 border-0 shadow-sm"
@ -19,6 +21,8 @@
import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
import menuButton from "@/common-components/menu-button/menu-button";
import footerMenuModal from "@/common-components/footer-menu-modal/footer-menu-modal";
export default {
name: "funnel-header",
@ -43,6 +47,8 @@ export default {
},
components: {
alert,
menuButton,
footerMenuModal,
},
mounted() {
// Check if alert event is on the bus

70
src/common-components/menu-button/menu-button.vue
View file

@ -1,8 +1,10 @@
<template>
<div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="menu-button-container">
<button class="menu-button" type="button" :class="[isActive ? 'active' : '']" @click="toggleClass()" data-bs-toggle="modal" data-bs-target="#exampleModal">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
</template>
@ -23,31 +25,41 @@ export default {
</script>
<style lang="scss">
.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue-400;
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-button-container {
position: absolute;
top: 1.47rem;
right: 1.47rem;
button {
border: none;
&.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
background-color: $white;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1056;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue-400;
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);
}
}
}
}
</style>

2
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -5,7 +5,7 @@
ref="theForm"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles">
<div class="page-container-grouped-styles has-footer">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

12
src/styles/common-styles.scss
View file

@ -47,4 +47,14 @@ body {
.page-container-grouped-styles {
@extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
}
}
//Footer modal backdrop adjustments for positioning
.modal-backdrop {
left: 50%;
transform: translateX(-50%);
max-width: 576px;
height: calc(100% - 152px);
top: 72px;
}
}

4
src/styles/ux-variables.scss
View file

@ -180,3 +180,7 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, .075);
$alert-bg-scale: -90%;
$alert-border-scale: -100%;
$alert-color-scale: 40%;
//Modal animation
$modal-fade-transform: translate(0, 0);
$modal-backdrop-opacity: 0;