WIP update modal positioning and text-link styles.
This commit is contained in:
Bryan Mauger
parent
9a710ab2c4
commit
3276c013da
2 changed files with 102 additions and 100 deletions
|
|
@ -5,7 +5,21 @@
|
||||||
type="button"
|
type="button"
|
||||||
:class="[isActive ? 'active' : '']"
|
:class="[isActive ? 'active' : '']"
|
||||||
aria-label="Hamburger Menu (modal window)"
|
aria-label="Hamburger Menu (modal window)"
|
||||||
@click="toggle()">
|
@click="toggleModal">
|
||||||
|
<div class="bar1"></div>
|
||||||
|
<div class="bar2"></div>
|
||||||
|
<div class="bar3"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="menu-modal-container">
|
||||||
|
<button
|
||||||
|
aria-hidden="true"
|
||||||
|
tabindex="-1"
|
||||||
|
class="menu-button"
|
||||||
|
type="button"
|
||||||
|
:class="[isActive ? 'active' : '']"
|
||||||
|
aria-label="Hamburger Menu (modal window)"
|
||||||
|
@click="toggleModal">
|
||||||
<div class="bar1"></div>
|
<div class="bar1"></div>
|
||||||
<div class="bar2"></div>
|
<div class="bar2"></div>
|
||||||
<div class="bar3"></div>
|
<div class="bar3"></div>
|
||||||
|
|
@ -18,19 +32,8 @@
|
||||||
data-bs-backdrop="false"
|
data-bs-backdrop="false"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
aria-labelledby="footerModalLabel"
|
aria-labelledby="footerModalLabel"
|
||||||
aria-hidden="true">
|
aria-hidden="true"
|
||||||
<div class="menu-modal-container">
|
v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
|
||||||
<button
|
|
||||||
class="menu-button"
|
|
||||||
type="button"
|
|
||||||
:class="[isActive ? 'active' : '']"
|
|
||||||
aria-label="Hamburger Menu (modal window)"
|
|
||||||
@click="toggle()">
|
|
||||||
<div class="bar1"></div>
|
|
||||||
<div class="bar2"></div>
|
|
||||||
<div class="bar3"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-dialog modal-fullscreen">
|
<div class="modal-dialog modal-fullscreen">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header visually-hidden">
|
<div class="modal-header visually-hidden">
|
||||||
|
|
@ -40,30 +43,29 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body d-flex flex-column">
|
<div class="modal-body d-flex flex-column">
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Terms of service"
|
text="Terms of use"
|
||||||
href="//www.safelite.com/terms-of-use"
|
href="//www.safelite.com/terms-of-use"
|
||||||
target="_blank" />
|
target="_blank" />
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Your privacy choices"
|
text="Your privacy choices"
|
||||||
href="//www.safelite.com/privacy-center"
|
href="//www.safelite.com/privacy-center"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<template #after-text>
|
<template #after-text>
|
||||||
<img
|
<img
|
||||||
class="ccpa-icon"
|
class="ccpa-icon"
|
||||||
data-id="ccpa-icon"
|
|
||||||
src="~@/assets/img/icons/ccpa-icon.svg"
|
src="~@/assets/img/icons/ccpa-icon.svg"
|
||||||
alt="Your privacy choices" />
|
alt="Your privacy choices" />
|
||||||
</template>
|
</template>
|
||||||
</textLink>
|
</textLink>
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Warranty"
|
text="Warranty"
|
||||||
href="//www.safelite.com/national-lifetime-warranty"
|
href="//www.safelite.com/national-lifetime-warranty"
|
||||||
target="_blank" />
|
target="_blank" />
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Notice at collection"
|
text="Notice at collection"
|
||||||
href="https://www.safelite.com/ccpa-privacy-policy"
|
href="https://www.safelite.com/ccpa-privacy-policy"
|
||||||
target="_blank" />
|
target="_blank" />
|
||||||
|
|
@ -77,8 +79,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
import textLink from '@/ux-components/text-link/text-link';
|
||||||
import { Modal } from 'bootstrap';
|
import { Modal } from 'bootstrap';
|
||||||
|
import baseMixin from '@/mixins/base-mixin.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'menu-modal',
|
name: 'menu-modal',
|
||||||
|
|
@ -88,33 +91,32 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isActive: false,
|
isActive: false,
|
||||||
currentFooterAndHeaderHeight: 0,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggle() {
|
toggleModal() {
|
||||||
if (this.isActive) {
|
if (this.isActive) {
|
||||||
// hide modal
|
this.closeModal();
|
||||||
this.isActive = false;
|
|
||||||
const modal = Modal.getInstance(
|
|
||||||
document.getElementById('footerModal')
|
|
||||||
);
|
|
||||||
modal?.hide();
|
|
||||||
} else {
|
} else {
|
||||||
// show modal
|
this.openModal();
|
||||||
this.currentFooterAndHeaderHeight =
|
|
||||||
this.getFooterInfoBoxHeight() + 56;
|
|
||||||
this.isActive = true;
|
|
||||||
const modal = Modal.getOrCreateInstance(
|
|
||||||
document.getElementById('footerModal')
|
|
||||||
);
|
|
||||||
modal?.show();
|
|
||||||
document.querySelector('.fade-on-route-transition').scrollTo({
|
|
||||||
top: 0,
|
|
||||||
behavior: 'instant',
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
openModal() {
|
||||||
|
Modal.getOrCreateInstance(
|
||||||
|
document.getElementById('footerModal')
|
||||||
|
).show();
|
||||||
|
},
|
||||||
|
closeModal() {
|
||||||
|
Modal.getInstance(document.getElementById('footerModal')).hide();
|
||||||
|
},
|
||||||
|
show() {
|
||||||
|
this.isActive = true;
|
||||||
|
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
const self = this;
|
||||||
|
self.isActive = false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -122,7 +124,7 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<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 0.5rem 1.47rem 1.47rem;
|
||||||
right: 0;
|
right: 0;
|
||||||
button {
|
button {
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -138,6 +140,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: 1050;
|
||||||
.bar1,
|
.bar1,
|
||||||
.bar2,
|
.bar2,
|
||||||
.bar3 {
|
.bar3 {
|
||||||
|
|
@ -161,14 +164,12 @@ export default {
|
||||||
}
|
}
|
||||||
.modal {
|
.modal {
|
||||||
&.menu-modal {
|
&.menu-modal {
|
||||||
max-width: 100%;
|
|
||||||
left: auto;
|
left: auto;
|
||||||
height: calc(100% - 56px);
|
height: calc(100% - 56px);
|
||||||
top: 56px;
|
top: 56px;
|
||||||
border-top: 1px solid $gray-300;
|
border-top: 1px solid $gray-300;
|
||||||
overflow-x: visible;
|
overflow-x: visible;
|
||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
z-index: 3;
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
.ccpa-icon {
|
.ccpa-icon {
|
||||||
|
|
@ -180,18 +181,15 @@ export default {
|
||||||
.modal-fullscreen {
|
.modal-fullscreen {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
.navigation-link {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
.menu-modal-container {
|
.menu-modal-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
padding: 1.47rem 0 1.47rem 1.47rem;
|
||||||
right: 0.5rem;
|
right: 0;
|
||||||
top: -4.5rem;
|
top: -5rem;
|
||||||
button {
|
button {
|
||||||
border: none;
|
border: none;
|
||||||
&.menu-button {
|
&.menu-button {
|
||||||
|
|
@ -201,8 +199,6 @@ export default {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
position: relative;
|
position: relative;
|
||||||
right: -0.5rem;
|
|
||||||
top: 0.5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,38 @@
|
||||||
<template>
|
<template>
|
||||||
<a
|
<a
|
||||||
v-if="linkType === 'navigation'"
|
v-if="linkType === 'navigation'"
|
||||||
class="navigation-link"
|
class="navigation-link"
|
||||||
:href="href"
|
:href="href"
|
||||||
@click="handleClick">
|
@click="handleClick">
|
||||||
{{ text }}<slot name="after-text"></slot>
|
{{ text }}<slot name="after-text"></slot>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
v-else-if="linkType === 'footer'"
|
v-else-if="linkType === 'footer'"
|
||||||
class="footer-link"
|
class="footer-link"
|
||||||
:href="href"
|
:href="href"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@click="handleClick">
|
@click="handleClick">
|
||||||
{{ text }}<slot name="after-text"></slot>
|
{{ text }}<slot name="after-text"></slot>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
v-else-if="linkType === 'textSmall'"
|
v-else-if="linkType === 'textSmall'"
|
||||||
class="small"
|
class="small"
|
||||||
:href="href"
|
:href="href"
|
||||||
@click="handleClick">
|
@click="handleClick">
|
||||||
{{ text }}<slot name="after-text"></slot>
|
{{ text }}<slot name="after-text"></slot>
|
||||||
|
</a>
|
||||||
|
<a v-else-if="linkType === 'text'" :href="href" @click="handleClick">
|
||||||
|
{{ text }}<slot name="after-text"></slot>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
v-else-if="linkType === 'text'"
|
v-else-if="linkType === 'newWindowLink'"
|
||||||
:href="href"
|
class="new-window-link"
|
||||||
@click="handleClick">
|
:href="href"
|
||||||
{{ text }}<slot name="after-text"></slot>
|
target="_blank"
|
||||||
</a>
|
@click="handleClick"
|
||||||
</template>
|
>{{ text }}<slot name="after-text"></slot
|
||||||
|
></a>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -36,8 +41,8 @@ export default {
|
||||||
linkType: String,
|
linkType: String,
|
||||||
text: String,
|
text: String,
|
||||||
href: {
|
href: {
|
||||||
type: String
|
type: String,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
emits: ['click-event'],
|
emits: ['click-event'],
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -49,13 +54,13 @@ export default {
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
this.$emit('click-event');
|
this.$emit('click-event');
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
a {
|
a {
|
||||||
color: $blue;
|
color: $blue;
|
||||||
text-underline-offset: 5px;
|
text-underline-offset: 5px;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
|
|
@ -63,31 +68,32 @@ export default {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
max-width: fit-content;
|
max-width: fit-content;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $blue-700;
|
color: $blue-700;
|
||||||
}
|
}
|
||||||
&.small {
|
&.small {
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $blue-700;
|
color: $blue-700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.navigation-link {
|
&.navigation-link,
|
||||||
color: $black;
|
&.new-window-link {
|
||||||
line-height: 26px;
|
color: $black;
|
||||||
white-space: nowrap;
|
line-height: 26px;
|
||||||
align-items: center;
|
white-space: nowrap;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
&.footer-link {
|
&.footer-link {
|
||||||
color: $gray-600;
|
color: $gray-600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
padding: 0 0 2px 0;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
&:hover {
|
|
||||||
padding: 0 0 2px 0;
|
padding: 0 0 2px 0;
|
||||||
text-decoration: underline;
|
font-weight: 400;
|
||||||
}
|
font-size: 0.75rem;
|
||||||
|
&:hover {
|
||||||
|
padding: 0 0 2px 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue