Initial Updates for INSR-7740
Also includes INSR-7741 footer menu Known issues: OneTrust not set up on click. Header updates need to be done on each page. Committing welcome-page.vue only for those.
This commit is contained in:
Bill Richardson
parent
3ab8ddf9c9
commit
a0a6a8ab0d
10 changed files with 274 additions and 113 deletions
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -67,7 +67,7 @@
|
|||
"typescript-eslint": "^8.11.0",
|
||||
"vite": "^6.4.1",
|
||||
"vitest": "^3.2.4",
|
||||
"volar-service-vetur": "*",
|
||||
"volar-service-vetur": "latest",
|
||||
"wait-on": "^8.0.2"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
13
src/App.vue
13
src/App.vue
|
|
@ -7,6 +7,7 @@
|
|||
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
<footerMenu />
|
||||
</router-view>
|
||||
<loadingModal
|
||||
:showLoader="shouldShowLoader"
|
||||
|
|
@ -17,10 +18,12 @@
|
|||
<script>
|
||||
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
|
||||
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
|
||||
import footerMenu from '@/iss-components/footer-menu/footer-menu.vue';
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
footerMenu,
|
||||
loadingModal
|
||||
},
|
||||
setup() {
|
||||
|
|
@ -45,15 +48,15 @@ window.onerror = (msg, url, line, col, error) => {
|
|||
// Note that col & error are new to the HTML 5 spec and may not be
|
||||
// supported in every browser. It worked for me in Chrome.
|
||||
global.$logger.logError(msg, {
|
||||
url: url,
|
||||
line: line,
|
||||
column: col ?? "",
|
||||
error: error ?? "",
|
||||
url,
|
||||
line,
|
||||
column: col ?? '',
|
||||
error: error ?? ''
|
||||
});
|
||||
|
||||
// If you return true, then error alerts (like in older versions of
|
||||
// Internet Explorer) will be suppressed.
|
||||
var suppressErrorAlert = true;
|
||||
const suppressErrorAlert = true;
|
||||
return suppressErrorAlert;
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
26
src/assets/img/powered-by-safelite-solutions.svg
Normal file
26
src/assets/img/powered-by-safelite-solutions.svg
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<svg width="165" height="15" viewBox="0 0 165 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4668_1909)">
|
||||
<path d="M9.45033 4.77209C9.29949 4.77209 9.17707 4.64967 9.17707 4.49883V4.20808C9.17707 3.42765 8.68083 2.77839 7.62933 2.77839C6.46196 2.77839 5.93512 3.60473 5.93512 4.19934C5.93512 6.81826 14.815 5.53722 14.815 10.3837C14.815 13.206 12.2135 14.4695 7.42383 14.4695C2.92489 14.4695 0.413086 13.4858 0.413086 10.7379V10.5477C0.413086 10.3969 0.535507 10.2744 0.686346 10.2744H5.39515C5.54599 10.2744 5.66841 10.3969 5.66841 10.5477V10.8406C5.66841 11.973 6.39856 12.3818 7.45007 12.3818C8.56059 12.3818 9.2033 11.5752 9.2033 10.8494C9.2033 8.23046 0.67323 9.53118 0.675416 4.8333C0.675416 2.15973 2.92489 0.692871 7.51128 0.692871C12.0758 0.692871 14.1132 1.85149 14.251 4.48353C14.2597 4.64311 14.1351 4.77646 13.9777 4.77646L9.45033 4.77209Z" fill="#DB0020"/>
|
||||
<path d="M29.8398 3.41653C29.8398 1.54088 30.9875 0.845703 34.4044 0.845703C35.0383 0.845703 35.8013 0.874122 36.503 0.928774C36.6451 0.939705 36.7544 1.05994 36.7544 1.20203V2.35628C36.7544 2.51805 36.6167 2.64266 36.4549 2.62954C36.3063 2.61643 36.1445 2.61205 35.9324 2.61205C35.3313 2.61205 34.7585 2.80224 34.7585 3.27225V4.60138C34.7585 4.75222 34.8809 4.87464 35.0318 4.87464H36.479C36.6298 4.87464 36.7522 4.99706 36.7522 5.1479V6.7022C36.7522 6.85304 36.6298 6.97546 36.479 6.97546H35.0318C34.8809 6.97546 34.7585 7.09788 34.7585 7.24872V13.9971C34.7585 14.148 34.6361 14.2704 34.4853 14.2704H30.1153C29.9644 14.2704 29.842 14.148 29.842 13.9971L29.8398 3.41653Z" fill="#DB0020"/>
|
||||
<path d="M42.1607 10.1038C42.0098 10.1038 41.8874 10.2262 41.8874 10.3771V11.586C41.8874 12.5938 42.5432 12.8539 43.2275 12.8539C44.0407 12.8539 44.5479 12.3358 44.6135 11.2275C44.6222 11.0832 44.7424 10.9717 44.8867 10.9717H48.7561C48.92 10.9717 49.0446 11.1138 49.0293 11.2756C48.8348 13.3589 47.1406 14.5153 43.2537 14.5153C38.499 14.5153 36.9688 13.16 36.9688 9.58135C36.9688 5.98525 38.8269 4.62988 43.2537 4.62988C47.1887 4.62988 49.1824 5.74041 49.1824 9.14632V9.82837C49.1824 9.97921 49.0599 10.1016 48.9091 10.1016L42.1607 10.1038ZM44.5916 7.73193C44.5916 6.74163 44.2637 6.2913 43.2253 6.2913C42.2131 6.2913 41.8852 6.74163 41.8852 7.73193V8.12542C41.8852 8.27626 42.0077 8.39868 42.1585 8.39868H44.3162C44.467 8.39868 44.5894 8.27626 44.5894 8.12542L44.5916 7.73193Z" fill="#DB0020"/>
|
||||
<path d="M51.2066 0.413086H55.5766C55.7274 0.413086 55.8498 0.535507 55.8498 0.686346L55.8476 13.9974C55.8476 14.1482 55.7252 14.2706 55.5744 14.2706H51.2044C51.0536 14.2706 50.9312 14.1482 50.9312 13.9974L50.9333 0.686346C50.9312 0.535507 51.0558 0.413086 51.2066 0.413086Z" fill="#DB0020"/>
|
||||
<path d="M58.2503 4.85082H62.6203C62.7711 4.85082 62.8935 4.97324 62.8935 5.12408V13.9952C62.8935 14.146 62.7711 14.2684 62.6203 14.2684H58.2503C58.0995 14.2684 57.9771 14.146 57.9771 13.9952V5.12408C57.9771 4.97324 58.0995 4.85082 58.2503 4.85082ZM58.2503 0.413086H62.6203C62.7711 0.413086 62.8935 0.535507 62.8935 0.686346V3.0014C62.8935 3.15224 62.7711 3.27466 62.6203 3.27466H58.2503C58.0995 3.27466 57.9771 3.15224 57.9771 3.0014V0.686346C57.9771 0.535507 58.0995 0.413086 58.2503 0.413086Z" fill="#DB0020"/>
|
||||
<path d="M77.6363 10.1038C77.4854 10.1038 77.363 10.2262 77.363 10.3771V11.586C77.363 12.5938 78.0188 12.8539 78.7031 12.8539C79.5163 12.8539 80.0235 12.3358 80.089 11.2275C80.0978 11.0832 80.218 10.9717 80.3623 10.9717H84.2317C84.3934 10.9717 84.5202 11.1138 84.5049 11.2756C84.3104 13.3589 82.6162 14.5153 78.7293 14.5153C73.9746 14.5153 72.4443 13.16 72.4443 9.58135C72.4443 5.98525 74.3025 4.62988 78.7293 4.62988C82.6642 4.62988 84.6579 5.74041 84.6579 9.14632V9.82837C84.6579 9.97921 84.5355 10.1016 84.3847 10.1016L77.6363 10.1038ZM80.0672 7.73193C80.0672 6.74163 79.7393 6.2913 78.7009 6.2913C77.6909 6.2913 77.363 6.74163 77.363 7.73193V8.12542C77.363 8.27626 77.4854 8.39868 77.6363 8.39868H79.7939C79.9448 8.39868 80.0672 8.27626 80.0672 8.12542V7.73193Z" fill="#DB0020"/>
|
||||
<path d="M28.0737 7.63574C28.0627 5.20045 25.6624 4.62988 22.2259 4.62988C20.0726 4.62988 16.8329 5.06273 16.5837 7.48927C16.5662 7.65104 16.6951 7.79095 16.8569 7.79095H20.5754C20.7153 7.79095 20.8312 7.68383 20.8465 7.54392C20.9361 6.7154 21.3755 6.28912 22.2237 6.28912C23.0697 6.28912 23.4698 6.58424 23.4698 7.15699V7.99863C23.4698 8.13635 23.3692 8.25221 23.2337 8.2697C23.0107 8.30031 22.6784 8.33966 22.0335 8.43366L20.0945 8.72878C16.9509 9.19878 15.9956 10.0142 15.9956 11.7499C15.9956 13.3654 17.1433 14.5131 20.0945 14.5131C21.5001 14.5131 22.7571 14.0869 23.3452 13.3261C23.3802 13.2802 23.4523 13.2911 23.4676 13.3458C23.5245 13.5403 23.6316 13.8945 23.7037 14.089C23.7452 14.1962 23.848 14.2683 23.9617 14.2683H27.7982C27.9491 14.2683 28.0715 14.1459 28.0715 13.995L28.0737 7.63574ZM21.9527 12.6637C21.216 12.6637 20.7503 12.0145 20.7503 11.3892C20.7503 10.764 21.0433 10.3661 21.7625 10.1738C22.2303 10.0492 22.8184 9.95517 23.1725 9.90707C23.3365 9.88303 23.4851 10.012 23.4851 10.1781V11.1203C23.4829 12.1434 23.0435 12.6637 21.9527 12.6637Z" fill="#DB0020"/>
|
||||
<path d="M70.1795 6.97546H71.572C71.7229 6.97546 71.8453 6.85304 71.8453 6.7022V5.1479C71.8453 4.99706 71.7229 4.87464 71.572 4.87464H70.1773C70.0265 4.87464 69.904 4.75222 69.904 4.60138L69.8844 0.694857V0.620531C69.8844 0.506855 69.7926 0.415039 69.6789 0.415039C69.6483 0.415039 69.622 0.421597 69.5958 0.432528C69.5914 0.434714 69.5849 0.4369 69.5849 0.4369L65.2608 3.00335C65.0662 3.10829 64.9875 3.13233 64.9875 3.27661V11.9772C64.9875 14.0605 66.1615 14.3753 69.1673 14.3753C69.9106 14.3753 70.7654 14.3469 71.5917 14.2901C71.736 14.2791 71.8453 14.1589 71.8453 14.0168V12.7117C71.8453 12.5609 71.7229 12.4385 71.572 12.4385H71.0802C70.2888 12.4385 69.9062 12.2483 69.9062 11.7083V7.24872C69.904 7.09788 70.0265 6.97546 70.1795 6.97546Z" fill="#DB0020"/>
|
||||
<path d="M90.1211 12.8885L91.4218 11.3101C92.1388 12.0927 93.0002 12.425 93.6494 12.425C94.3927 12.425 94.7097 12.0534 94.7097 11.6293C94.7097 11.1112 94.3774 10.886 93.3171 10.5275C91.8853 10.0356 90.4512 9.36014 90.4512 7.50198C90.4512 5.93675 91.7913 4.75627 93.5423 4.73003C94.7753 4.7038 95.9033 5.18037 96.8061 5.94986L95.5601 7.56756C94.7512 6.93141 94.1675 6.67783 93.6363 6.67783C93.092 6.67783 92.7597 6.95546 92.7597 7.40798C92.7466 7.85831 93.092 8.09878 94.1129 8.49664C95.7721 9.13279 97.0444 9.55689 97.0444 11.3757C97.0444 13.5902 95.1469 14.3859 93.5817 14.3859C92.3749 14.3881 91.1289 13.9225 90.1211 12.8885Z" fill="black"/>
|
||||
<path d="M97.9341 9.55945C97.9341 6.71973 99.9234 4.71729 102.789 4.71729C105.601 4.71729 107.632 6.66727 107.632 9.55945C107.632 12.4385 105.603 14.3885 102.789 14.3885C99.9234 14.3885 97.9341 12.3992 97.9341 9.55945ZM105.31 9.55945C105.31 7.99421 104.25 6.7875 102.789 6.7875C101.303 6.7875 100.256 8.02045 100.256 9.55945C100.256 11.0984 101.303 12.3314 102.789 12.3314C104.247 12.3314 105.31 11.1247 105.31 9.55945Z" fill="black"/>
|
||||
<path d="M108.996 4.8501H111.265V12.2915H115.178V14.2677H108.996V4.8501Z" fill="black"/>
|
||||
<path d="M115.788 10.3415V4.8501H118.015V10.2104C118.015 11.3646 118.573 12.3199 119.674 12.3199C120.656 12.3199 121.373 11.5504 121.373 10.2104V4.8501H123.588V10.3415C123.588 12.7965 122.182 14.388 119.674 14.388C117.353 14.388 115.788 12.9539 115.788 10.3415Z" fill="black"/>
|
||||
<path d="M127.354 6.82631H124.899V4.8501H132.076V6.82631H129.608V14.2677H127.352V6.82631H127.354Z" fill="black"/>
|
||||
<path d="M133.537 4.8501H135.806V14.2677H133.537V4.8501Z" fill="black"/>
|
||||
<path d="M137.225 9.55945C137.225 6.71973 139.214 4.71729 142.08 4.71729C144.891 4.71729 146.922 6.66727 146.922 9.55945C146.922 12.4385 144.893 14.3885 142.08 14.3885C139.214 14.3885 137.225 12.3992 137.225 9.55945ZM144.6 9.55945C144.6 7.99421 143.54 6.7875 142.08 6.7875C140.593 6.7875 139.546 8.02045 139.546 9.55945C139.546 11.0984 140.593 12.3314 142.08 12.3314C143.538 12.3314 144.6 11.1247 144.6 9.55945Z" fill="black"/>
|
||||
<path d="M148.288 4.8501H150.424L154.178 10.6607L154.204 10.6476V4.8501H156.392V14.2677H154.191L150.503 8.61671H150.477V14.2677H148.288V4.8501Z" fill="black"/>
|
||||
<path d="M157.494 12.8885L158.795 11.3101C159.512 12.0927 160.373 12.425 161.022 12.425C161.765 12.425 162.082 12.0534 162.082 11.6293C162.082 11.1112 161.75 10.886 160.69 10.5275C159.258 10.0356 157.824 9.36014 157.824 7.50198C157.824 5.93675 159.164 4.75627 160.915 4.73003C162.148 4.7038 163.276 5.18037 164.179 5.94986L162.933 7.56756C162.124 6.93141 161.54 6.67783 161.009 6.67783C160.465 6.67783 160.135 6.95546 160.135 7.40798C160.122 7.85831 160.467 8.09878 161.488 8.49664C163.147 9.13279 164.419 9.55689 164.419 11.3757C164.419 13.5902 162.522 14.3859 160.957 14.3859C159.748 14.3881 158.502 13.9225 157.494 12.8885Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4668_1909">
|
||||
<rect width="165" height="14.9096" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
143
src/iss-components/footer-menu/footer-menu.vue
Normal file
143
src/iss-components/footer-menu/footer-menu.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div class="footer-menu-container">
|
||||
<div class="footer-menu-wrapper">
|
||||
<div class="footer-menu-image-container">
|
||||
<div class="footer-menu-image">
|
||||
<img
|
||||
:src="require('@/assets/img/powered-by-safelite-solutions.svg')"
|
||||
alt="Powered by Safelite Solutions" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-menu-items-container">
|
||||
<!-- Footer menu items go here -->
|
||||
<div class="footer-menu-item">
|
||||
© {{ new Date().getFullYear() }} Safelite Group
|
||||
</div>
|
||||
<div class="footer-menu-item">
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Terms of service"
|
||||
href="//www.safelite.com/terms-of-use"
|
||||
target="_blank" />
|
||||
</div>
|
||||
<div class="footer-menu-item">
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Your privacy choices"
|
||||
href="//www.safelite.com/privacy-center"
|
||||
target="_blank">
|
||||
<template #after-text>
|
||||
<img
|
||||
class="ccpa-icon"
|
||||
src="~@/assets/img/icons/ccpa-icon.svg"
|
||||
alt="Your privacy choices" />
|
||||
</template>
|
||||
</textLink>
|
||||
</div>
|
||||
<div class="footer-menu-item">
|
||||
Cookie Preferences
|
||||
</div>
|
||||
<div class="footer-menu-item">
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Notice at collection"
|
||||
href="https://www.safelite.com/ccpa-privacy-policy"
|
||||
target="_blank" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
|
||||
export default {
|
||||
name: 'footer-menu',
|
||||
components: {
|
||||
textLink
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.footer-menu-container {
|
||||
display: flex;
|
||||
border-top: solid 0.125rem #d3d3d3;
|
||||
|
||||
@include media-breakpoint-up(xs) {
|
||||
padding: 1rem 0 1.25rem 0; // Heritage 1.250rem 0
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: 3rem 0;
|
||||
.footer-menu-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-menu-items-container {
|
||||
@include media-breakpoint-up(xs) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1.25rem;
|
||||
|
||||
.footer-menu-item:not(:first-child) {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
|
||||
.footer-menu-item {
|
||||
margin-top: 0;
|
||||
margin-right: 1.75rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-menu-item {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.ccpa-icon {
|
||||
width: 2.0625rem;
|
||||
height: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #525656;
|
||||
text-decoration: none;
|
||||
line-height: 1.56;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<div class="footerImage">
|
||||
<img
|
||||
:src="footerImageURL"
|
||||
alt="" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
|
||||
export default {
|
||||
name: 'footer-image',
|
||||
data() {
|
||||
return {
|
||||
widget: {
|
||||
footer: 'SiteFooterWidget'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
footerImageURL() {
|
||||
return this.getCmsContent(
|
||||
this.widget.footer,
|
||||
widgetFields.FOOTER_WIDGET.FOOTER_IMAGE_URL
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footerImage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: auto;
|
||||
img {
|
||||
max-width: 23.4375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -49,7 +49,6 @@
|
|||
<script>
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
import buttonMain from '@/ux-components/button-main/button-main.vue';
|
||||
import issPageValues from '@/router/router-constants/issPage-values';
|
||||
|
||||
export default {
|
||||
name: 'site-footer',
|
||||
|
|
@ -80,29 +79,10 @@ export default {
|
|||
return this.customButtontext
|
||||
? this.customButtontext
|
||||
: this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
|
||||
},
|
||||
footerImageURL() {
|
||||
const output = this.getCmsContent(
|
||||
this.cmsWidgetName,
|
||||
'FooterImageURL'
|
||||
);
|
||||
return output;
|
||||
},
|
||||
includeFooterImage() {
|
||||
const currentPageName = this.getPageNameByQueryString();
|
||||
return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.paddingHeight = this.includeFooterImage
|
||||
? this.getFooterInfoBoxHeight() + 16
|
||||
: this.getFooterInfoBoxHeight() + 24;
|
||||
this.$nextTick(() => {
|
||||
window.addEventListener('resize', this.onResize);
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.onResize);
|
||||
this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
|
||||
},
|
||||
unmounted() {
|
||||
document.onkeydown = null;
|
||||
|
|
@ -180,18 +160,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.footerImage {
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 340px) {
|
||||
.footerImage {
|
||||
bottom: 78px;
|
||||
}
|
||||
}
|
||||
|
||||
#siteFooterImage {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="site-header d-flex justify-content-center align-items-center flex-column py-2"
|
||||
:style="logoBackgroundStyle">
|
||||
<div
|
||||
class="site-header-container"
|
||||
:style="logoBackgroundStyle">
|
||||
<div class="site-header iss-heritage-container-width">
|
||||
<img
|
||||
id="siteHeaderImage"
|
||||
class="img-fluid"
|
||||
:src="imageSrc"
|
||||
:alt="altText" />
|
||||
<menuModal />
|
||||
</div>
|
||||
<alert
|
||||
v-if="displayGlobalAlert"
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import menuModal from '@/iss-components/site-header/menu-modal/menu-modal.vue';
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import { useMainStore } from '@/store';
|
||||
import eventBus from '@/helpers/event-bus/event-bus';
|
||||
|
|
@ -31,7 +29,6 @@ import { globalEvents } from '@/constants/events';
|
|||
export default {
|
||||
name: 'site-header',
|
||||
components: {
|
||||
menuModal,
|
||||
alert
|
||||
},
|
||||
props: {
|
||||
|
|
@ -130,15 +127,32 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.site-header {
|
||||
height: 56px;
|
||||
position: relative;
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0 -.75rem;
|
||||
.site-header-container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
@include media-breakpoint-up(xs) {
|
||||
padding: 0.750rem 0.9375rem 1rem 0.9375rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 1rem 0 1.25rem 0;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0 -.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#siteHeaderImage {
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
@include media-breakpoint-up(xs) {
|
||||
height: 2.625rem; // 42px no padding in image
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
height: 4rem; // 64px no padding in image
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="subheader-primary d-flex align-items-center justify-content-center overflow-hidden">
|
||||
class="subheader-primary d-flex overflow-hidden">
|
||||
<h5
|
||||
class="text-center fw-normal mb-0 subheader-primary"
|
||||
:class="headerColor">
|
||||
:class="[justifySubheaderSubText, headerColor]"
|
||||
class="fw-normal mb-0 subheader-primary">
|
||||
<span>
|
||||
{{ content }}
|
||||
</span>
|
||||
|
|
@ -49,6 +49,7 @@ export default {
|
|||
hasBackButton: Boolean,
|
||||
issContainingPage: String,
|
||||
justification: String,
|
||||
justificationSubText: String,
|
||||
stripRteStyle: Boolean,
|
||||
subContentProperty: String,
|
||||
subHeaderClasses: String,
|
||||
|
|
@ -108,6 +109,11 @@ export default {
|
|||
? 'justify-content-left'
|
||||
: 'justify-content-center';
|
||||
},
|
||||
justifySubheaderSubText() {
|
||||
return this.justificationSubText?.toLowerCase() === 'center'
|
||||
? 'justify-content-center'
|
||||
: 'justify-content-left';
|
||||
},
|
||||
alternateFormatting() {
|
||||
// override for service-packages unique style
|
||||
if (this.issContainingPage?.toLowerCase() === 'service-packages') {
|
||||
|
|
@ -147,6 +153,12 @@ h5 {
|
|||
span {
|
||||
color: $black;
|
||||
}
|
||||
&.justify-content-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.justify-content-left {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -167,7 +179,10 @@ p {
|
|||
|
||||
.subheader-secondary {
|
||||
p {
|
||||
font-size: .875rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: #525656;
|
||||
font-size: 1rem;
|
||||
line-height: 1.56;
|
||||
&.justify-content-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,12 @@
|
|||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="container-fluid fade-on-route-transition">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 px-0 px-md-2">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
</div>
|
||||
<div class="fade-on-route-transition">
|
||||
<div class="justify-content-center">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="iss-heritage-container-width">
|
||||
<div class="welcome-page-container iss-heritage-content-container-width">
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
class="mt-4" />
|
||||
|
|
@ -23,8 +21,7 @@
|
|||
isRequired
|
||||
disableAutoFill
|
||||
:isDisabled="isPolicyHolderDisabled"
|
||||
:validationRules="rules.policyNumber"
|
||||
class="mt-5" />
|
||||
:validationRules="rules.policyNumber" />
|
||||
<textboxQuestion
|
||||
ref="policyZip"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
|
|
@ -144,9 +141,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer image component must have parent (usually container-fluid)
|
||||
set to display: flex and height 100dvh or height 100% -->
|
||||
<footerImage />
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
@ -163,7 +157,6 @@ import textboxQuestion from '@/digital-components/textbox-question/textbox-quest
|
|||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
import footerImage from '@/iss-components/site-footer/footer-image/footer-image.vue';
|
||||
|
||||
// Supporting files
|
||||
import {
|
||||
|
|
@ -196,7 +189,6 @@ export default {
|
|||
components: {
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
footerImage,
|
||||
alert,
|
||||
buttonQuestion,
|
||||
continueModal,
|
||||
|
|
@ -482,13 +474,22 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
height: 100dvh;
|
||||
.container-fluid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.iss-heritage-container-width {
|
||||
.welcome-page-container {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
// Temporary solution that prevents the Continue button from being hidden in Firefox
|
||||
#welcomeFooter {
|
||||
|
|
|
|||
|
|
@ -127,6 +127,39 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
@include media-breakpoint-up(xs) {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.iss-heritage-container-width {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@include media-breakpoint-up(xs) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 46.25rem; // 740px
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: 63.75rem; // 1020px
|
||||
}
|
||||
}
|
||||
|
||||
.iss-heritage-content-container-width {
|
||||
@include media-breakpoint-up(xs) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--iss-loader-color: white;
|
||||
}
|
||||
Loading…
Reference in a new issue