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

WIP update modal positioning and text-link styles.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-18 13:17:23 -04:00
parent 9a710ab2c4
commit 3276c013da
2 changed files with 102 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -5,7 +5,21 @@
type="button"
:class="[isActive ? 'active' : '']"
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="bar2"></div>
<div class="bar3"></div>
@ -18,19 +32,8 @@
data-bs-backdrop="false"
tabindex="-1"
aria-labelledby="footerModalLabel"
aria-hidden="true">
<div class="menu-modal-container">
<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>
aria-hidden="true"
v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header visually-hidden">
@ -40,30 +43,29 @@
</div>
<div class="modal-body d-flex flex-column">
<textLink
linkType="navigation"
text="Terms of service"
linkType="newWindowLink"
text="Terms of use"
href="//www.safelite.com/terms-of-use"
target="_blank" />
<textLink
linkType="navigation"
linkType="newWindowLink"
text="Your privacy choices"
href="//www.safelite.com/privacy-center"
target="_blank">
<template #after-text>
<img
class="ccpa-icon"
data-id="ccpa-icon"
src="~@/assets/img/icons/ccpa-icon.svg"
alt="Your privacy choices" />
</template>
</textLink>
<textLink
linkType="navigation"
linkType="newWindowLink"
text="Warranty"
href="//www.safelite.com/national-lifetime-warranty"
target="_blank" />
<textLink
linkType="navigation"
linkType="newWindowLink"
text="Notice at collection"
href="https://www.safelite.com/ccpa-privacy-policy"
target="_blank" />
@ -77,8 +79,9 @@
</template>
<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 baseMixin from '@/mixins/base-mixin.js';
export default {
name: 'menu-modal',
@ -88,33 +91,32 @@ export default {
data() {
return {
isActive: false,
currentFooterAndHeaderHeight: 0,
};
},
methods: {
toggle() {
toggleModal() {
if (this.isActive) {
// hide modal
this.isActive = false;
const modal = Modal.getInstance(
document.getElementById('footerModal')
);
modal?.hide();
this.closeModal();
} else {
// show modal
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',
});
this.openModal();
}
},
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>
@ -122,7 +124,7 @@ export default {
<style lang="scss" scoped>
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
padding: 1.47rem 0.5rem 1.47rem 1.47rem;
right: 0;
button {
border: none;
@ -138,6 +140,7 @@ export default {
justify-content: center;
align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone
z-index: 1050;
.bar1,
.bar2,
.bar3 {
@ -161,14 +164,12 @@ export default {
}
.modal {
&.menu-modal {
max-width: 100%;
left: auto;
height: calc(100% - 56px);
top: 56px;
border-top: 1px solid $gray-300;
overflow-x: visible;
overflow-y: visible;
z-index: 3;
.modal-body {
padding: 2rem;
.ccpa-icon {
@ -180,18 +181,15 @@ export default {
.modal-fullscreen {
width: 100vw;
}
.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.5rem;
top: -4.5rem;
padding: 1.47rem 0 1.47rem 1.47rem;
right: 0;
top: -5rem;
button {
border: none;
&.menu-button {
@ -201,8 +199,6 @@ export default {
box-shadow: none;
background-color: $white;
position: relative;
right: -0.5rem;
top: 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;

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

@ -1,33 +1,38 @@
<template>
<a
v-if="linkType === 'navigation'"
class="navigation-link"
:href="href"
@click="handleClick">
{{ text }}<slot name="after-text"></slot>
v-if="linkType === 'navigation'"
class="navigation-link"
:href="href"
@click="handleClick">
{{ text }}<slot name="after-text"></slot>
</a>
<a
v-else-if="linkType === 'footer'"
class="footer-link"
:href="href"
target="_blank"
@click="handleClick">
{{ text }}<slot name="after-text"></slot>
v-else-if="linkType === 'footer'"
class="footer-link"
:href="href"
target="_blank"
@click="handleClick">
{{ text }}<slot name="after-text"></slot>
</a>
<a
v-else-if="linkType === 'textSmall'"
class="small"
:href="href"
@click="handleClick">
{{ text }}<slot name="after-text"></slot>
v-else-if="linkType === 'textSmall'"
class="small"
:href="href"
@click="handleClick">
{{ 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
v-else-if="linkType === 'text'"
:href="href"
@click="handleClick">
{{ text }}<slot name="after-text"></slot>
</a>
</template>
v-else-if="linkType === 'newWindowLink'"
class="new-window-link"
:href="href"
target="_blank"
@click="handleClick"
>{{ text }}<slot name="after-text"></slot
></a>
</template>
<script>
export default {
@ -36,8 +41,8 @@ export default {
linkType: String,
text: String,
href: {
type: String
}
type: String,
},
},
emits: ['click-event'],
methods: {
@ -49,13 +54,13 @@ export default {
true
);
this.$emit('click-event');
}
}
},
},
};
</script>
<style lang="scss" scoped>
a {
a {
color: $blue;
text-underline-offset: 5px;
line-height: 2;
@ -63,31 +68,32 @@ export default {
font-weight: 500;
max-width: fit-content;
&:hover {
color: $blue-700;
color: $blue-700;
}
&.small {
line-height: 24px;
&:hover {
color: $blue-700;
}
line-height: 24px;
&:hover {
color: $blue-700;
}
}
&.navigation-link {
color: $black;
line-height: 26px;
white-space: nowrap;
align-items: center;
&.navigation-link,
&.new-window-link {
color: $black;
line-height: 26px;
white-space: nowrap;
align-items: center;
}
&.footer-link {
color: $gray-600;
text-decoration: none;
line-height: 20px;
padding: 0 0 2px 0;
font-weight: 400;
font-size: 0.75rem;
&:hover {
color: $gray-600;
text-decoration: none;
line-height: 20px;
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>