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>
<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 use" 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">
@ -58,12 +58,12 @@
</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" />
@ -177,9 +177,6 @@ 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;

View file

@ -1,20 +1,28 @@
<template> <template>
<loadingModal v-if="useLoadingModal" notFullScreen ref="loadingModal" /> <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 >{{ text }}<slot name="after-text"></slot
></a> ></a>
<a <a
v-else-if="linkType === 'footer'" v-else-if="linkType === 'newWindowLink'"
@click="handleClick" @click="handleClick"
class="footer-link" class="new-window-link"
:href="href" :href="href"
target="_blank" target="_blank"
>{{ text }}<slot name="after-text"></slot >{{ text }}<slot name="after-text"></slot
></a> ></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 >{{ text }}<slot name="after-text"></slot
></a> ></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 >{{ text }}<slot name="after-text"></slot
></a> ></a>
</template> </template>
@ -74,23 +82,15 @@ a {
color: $blue-700; color: $blue-700;
} }
} }
&.navigation-link { &.navigation-link,
&.new-window-link {
color: $black; color: $black;
line-height: 26px; line-height: 26px;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
} }
&.footer-link { &.new-window-link {
color: $gray-600; margin-bottom: 1.5rem;
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;
}
} }
} }
</style> </style>