Update navigation links to open in new window.

This commit is contained in:
Bryan Mauger 2024-03-27 10:16:03 -04:00
parent a878edab19
commit a88e0108c6
2 changed files with 21 additions and 24 deletions

View file

@ -41,12 +41,12 @@
</div>
<div class="modal-body d-flex flex-column">
<textLink
linkType="navigation"
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">
@ -58,12 +58,12 @@
</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" />
@ -177,9 +177,6 @@ export default {
.modal-fullscreen {
width: 100vw;
}
.navigation-link {
margin-bottom: 1.5rem;
}
.modal-footer {
border-top: none;
padding: 2rem;

View file

@ -1,20 +1,28 @@
<template>
<loadingModal v-if="useLoadingModal" notFullScreen ref="loadingModal" />
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href"
<a v-if="linkType === 'navigation'"
@click="handleClick"
class="navigation-link"
:href="href"
>{{ text }}<slot name="after-text"></slot
></a>
<a
v-else-if="linkType === 'footer'"
v-else-if="linkType === 'newWindowLink'"
@click="handleClick"
class="footer-link"
class="new-window-link"
:href="href"
target="_blank"
>{{ text }}<slot name="after-text"></slot
></a>
<a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href"
<a v-else-if="linkType === 'textSmall'"
@click="handleClick"
class="small"
:href="href"
>{{ text }}<slot name="after-text"></slot
></a>
<a v-else-if="linkType === 'text'" @click="handleClick" :href="href"
<a v-else-if="linkType === 'text'"
@click="handleClick"
:href="href"
>{{ text }}<slot name="after-text"></slot
></a>
</template>
@ -74,23 +82,15 @@ a {
color: $blue-700;
}
}
&.navigation-link {
&.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 {
padding: 0 0 2px 0;
text-decoration: underline;
}
&.new-window-link {
margin-bottom: 1.5rem;
}
}
</style>