SSR-307 add CPPA links and fix header so background color fills available space.
This commit is contained in:
Bryan Mauger
parent
ddf9dbebf3
commit
ac77ef69f2
2 changed files with 212 additions and 198 deletions
|
|
@ -1,155 +1,165 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</button>
|
||||
<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="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<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)">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header visually-hidden">
|
||||
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
|
||||
</div>
|
||||
<div class="modal-body d-flex flex-column">
|
||||
<textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" />
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
text="Your privacy choices"
|
||||
href="//www.safelite.com/privacy-center"
|
||||
target="_blank"
|
||||
>
|
||||
<template v-slot:after-text>
|
||||
<img
|
||||
class="ccpa-icon"
|
||||
src="~@/assets/img/icons/ccpa-icon.svg"
|
||||
alt="Your privacy choices"
|
||||
data-id="ccpa-icon"
|
||||
/>
|
||||
</template>
|
||||
</textLink>
|
||||
<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" target="_blank" />
|
||||
</div>
|
||||
<div class="modal-footer d-flex justify-content-start">
|
||||
© {{new Date().getFullYear()}} Safelite Group
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
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="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header visually-hidden">
|
||||
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
|
||||
</div>
|
||||
<div class="modal-body d-flex flex-column">
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
text="Terms of use"
|
||||
href="//www.safelite.com/terms-of-use"
|
||||
target="_blank" />
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
text="Your privacy choices"
|
||||
href="//www.safelite.com/privacy-center"
|
||||
target="_blank">
|
||||
<template v-slot:after-text>
|
||||
<img
|
||||
class="ccpa-icon"
|
||||
src="~@/assets/img/icons/ccpa-icon.svg"
|
||||
alt="Your privacy choices" />
|
||||
</template>
|
||||
</textLink>
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
text="Warranty"
|
||||
href="//www.safelite.com/national-lifetime-warranty"
|
||||
target="_blank" />
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
text="Notice at collection"
|
||||
href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
|
||||
target="_blank" />
|
||||
</div>
|
||||
<div class="modal-footer d-flex justify-content-start">
|
||||
© {{new Date().getFullYear()}} Safelite Group
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
export default {
|
||||
<script>
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
export default {
|
||||
name: 'menuModal',
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
currentFooterAndHeaderHeight: 0,
|
||||
};
|
||||
return {
|
||||
isActive: false,
|
||||
currentFooterAndHeaderHeight: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
|
||||
this.isActive = true;
|
||||
document.querySelector('.page-container-grouped-styles').scrollTo({
|
||||
top: 0, behavior: 'smooth'
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
var self = this;
|
||||
self.isActive = false;
|
||||
},
|
||||
show() {
|
||||
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
|
||||
this.isActive = true;
|
||||
document.querySelector('.page-container-grouped-styles').scrollTo({
|
||||
top: 0, behavior: 'smooth'
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
var self = this;
|
||||
self.isActive = false;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
textLink,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-modal-container {
|
||||
<style lang="scss" scoped>
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
||||
right: 0;
|
||||
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;
|
||||
padding: 0;//Required to prevent 'squish' on iPhone
|
||||
z-index: 1050;
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: $blue;
|
||||
margin: 1px 0;
|
||||
transition: 0.25s;
|
||||
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;
|
||||
padding: 0;//Required to prevent 'squish' on iPhone
|
||||
z-index: 1050;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
&.active .bar1 {
|
||||
transform: rotate(-45deg) translate(-3px, 3px);
|
||||
}
|
||||
&.active .bar2 {opacity: 0;}
|
||||
&.active .bar3 {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
}
|
||||
.modal {
|
||||
&.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;
|
||||
.ccpa-icon {
|
||||
width: 2.0625rem;
|
||||
height: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
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;
|
||||
.ccpa-icon {
|
||||
width: 2.0625rem;
|
||||
height: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-fullscreen {
|
||||
width: 100vw;
|
||||
max-width: 576px;
|
||||
}
|
||||
.navigation-link {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
padding: 2rem;
|
||||
}
|
||||
.menu-modal-container {
|
||||
.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: .5rem;
|
||||
|
|
@ -164,6 +174,7 @@
|
|||
background-color: $white;
|
||||
position: relative;
|
||||
right: -.5rem;
|
||||
top: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -191,7 +202,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
//.modal-backdrop styles are in common-styles.scss
|
||||
//.modal-backdrop styles are in common-styles.scss
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
<menuModal/>
|
||||
</div>
|
||||
<alert
|
||||
v-if="displayGlobalAlert"
|
||||
class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
|
||||
cmsWidgetName="GlobalAlert"
|
||||
:manualHeadline="globalAlertMessage.messageHeadline"
|
||||
:manualCopy="globalAlertMessage.messageCopy"
|
||||
:alertClass="globalAlertMessage.type"
|
||||
v-bind:isDismissible="globalAlertMessage.isDismissible" />
|
||||
v-if="displayGlobalAlert"
|
||||
class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
|
||||
cmsWidgetName="GlobalAlert"
|
||||
:manualHeadline="globalAlertMessage.messageHeadline"
|
||||
:manualCopy="globalAlertMessage.messageCopy"
|
||||
:alertClass="globalAlertMessage.type"
|
||||
v-bind:isDismissible="globalAlertMessage.isDismissible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,60 +21,60 @@ import alert from "@/ux-components/alert/alert";
|
|||
import eventBus from "@/helpers/event-bus/event-bus";
|
||||
import { globalEvents } from "@/constants/events";
|
||||
|
||||
export default({
|
||||
name: "siteHeader",
|
||||
data() {
|
||||
export default({
|
||||
name: "siteHeader",
|
||||
data() {
|
||||
return {
|
||||
displayGlobalAlert: false,
|
||||
globalAlertMessage: {
|
||||
isDismissible: false,
|
||||
messageCopy: "",
|
||||
messageHeadline: "",
|
||||
type: "",
|
||||
},
|
||||
headerAnswers: null
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
imageSrc()
|
||||
{
|
||||
return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
|
||||
},
|
||||
altText()
|
||||
{
|
||||
return this.headerAnswers ? this.headerAnswers.AltText : "";
|
||||
},
|
||||
logoBackgroundStyle() {
|
||||
return {
|
||||
displayGlobalAlert: false,
|
||||
globalAlertMessage: {
|
||||
isDismissible: false,
|
||||
messageCopy: "",
|
||||
messageHeadline: "",
|
||||
type: "",
|
||||
},
|
||||
headerAnswers: null
|
||||
"background-color": this.headerAnswers ? this.headerAnswers.HexCode : "#FFFFFF"
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
imageSrc()
|
||||
{
|
||||
return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
|
||||
},
|
||||
altText()
|
||||
{
|
||||
return this.headerAnswers ? this.headerAnswers.AltText : "";
|
||||
},
|
||||
logoBackgroundStyle() {
|
||||
return {
|
||||
"background-color": this.headerAnswers ? this.headerAnswers.HexCode : "#FFFFFF"
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
|
||||
this.headerAnswers = Array.isArray(answers)
|
||||
? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
|
||||
: null;
|
||||
|
||||
// Check if alert event is on the bus
|
||||
const alertEvent = eventBus.readAndPopEventFromBus(
|
||||
globalEvents.Categories.GLOBAL_ALERT,
|
||||
globalEvents.SubCategories.PAGE_NOT_FOUND
|
||||
);
|
||||
// If alert event is on the bus, then display the alert
|
||||
if (alertEvent !== undefined) {
|
||||
this.displayGlobalAlert = true;
|
||||
this.globalAlertMessage = alertEvent;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
|
||||
this.headerAnswers = Array.isArray(answers)
|
||||
? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
|
||||
: null;
|
||||
|
||||
//load client customization overrides
|
||||
const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
|
||||
if(clientOverrideClass
|
||||
&& clientOverrideClass != ""
|
||||
&& !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass))
|
||||
// Check if alert event is on the bus
|
||||
const alertEvent = eventBus.readAndPopEventFromBus(
|
||||
globalEvents.Categories.GLOBAL_ALERT,
|
||||
globalEvents.SubCategories.PAGE_NOT_FOUND
|
||||
);
|
||||
// If alert event is on the bus, then display the alert
|
||||
if (alertEvent !== undefined) {
|
||||
this.displayGlobalAlert = true;
|
||||
this.globalAlertMessage = alertEvent;
|
||||
}
|
||||
|
||||
//load client customization overrides
|
||||
const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
|
||||
if(clientOverrideClass
|
||||
&& clientOverrideClass != ""
|
||||
&& !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass))
|
||||
{
|
||||
document.getElementsByTagName("body")[0].className += " " + clientOverrideClass;
|
||||
}
|
||||
|
|
@ -84,15 +84,18 @@ import { globalEvents } from "@/constants/events";
|
|||
alert
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.alert {
|
||||
left: 0;
|
||||
top: 72px;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.site-header {
|
||||
height: 72px;
|
||||
}
|
||||
.alert {
|
||||
left: 0;
|
||||
top: 72px;
|
||||
}
|
||||
|
||||
#siteHeaderImage {
|
||||
height: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
#siteHeaderImage {
|
||||
height: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue