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

Merge pull request #638 from Safelite/SSR-1201-css-updates

Browse source 
SSR-1201 style updates.
This commit is contained in:
bmauger 2024-04-24 10:42:42 -04:00 committed by GitHub
commit ab5fa3b48b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 112 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/digital-components/modal/modal.vue
View file

@ -141,7 +141,7 @@ export default {
color: $black; color: $black;
} }
.modal-header { .modal-header {
padding: 1rem 0 0.5rem 0; padding: 1.5rem 0 0.5rem 0;
border-bottom: none; border-bottom: none;
.btn-close { .btn-close {
position: absolute; position: absolute;
@ -149,7 +149,6 @@ export default {
top: 1rem; top: 1rem;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
opacity: 1; opacity: 1;
margin: 0.3rem -0.5rem -0.5rem auto;
} }
.modal-title { .modal-title {

26
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="subheader-primary d-flex align-items-center justify-content-center container-fluid overflow-hidden"> class="subheader-primary d-flex align-items-center justify-content-center overflow-hidden">
<h5 <h5
class="text-center fw-normal mb-0 subheader-primary" class="text-center fw-normal mb-0 subheader-primary"
:class="headerColor"> :class="headerColor">
@ -15,7 +15,7 @@
</h5> </h5>
</div> </div>
<div <div
class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden" class="subheader-secondary d-flex align-items-center overflow-hidden"
:class="[justifySubheader, subHeaderClasses]"> :class="[justifySubheader, subHeaderClasses]">
<p <p
class="fw-normal mb-0" class="fw-normal mb-0"
@ -33,7 +33,7 @@ import {
splitCopyOnCMSPlaceHolder, splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy, getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy, getRouterLinkDisplayTextFromCopy,
getRouterLinkHtmlStringFromCopy getRouterLinkHtmlStringFromCopy,
} from '@/helpers/cms-content-helper'; } from '@/helpers/cms-content-helper';
import { stripRteStyle } from '@/helpers/text-helper'; import { stripRteStyle } from '@/helpers/text-helper';
@ -51,12 +51,15 @@ export default {
stripRteStyle: Boolean, stripRteStyle: Boolean,
subContentProperty: String, subContentProperty: String,
subHeaderClasses: String, subHeaderClasses: String,
subTextClasses: String subTextClasses: String,
}, },
emits: ['click-event'], emits: ['click-event'],
computed: { computed: {
content() { content() {
return this.getCmsContent(this.cmsWidgetName, this.contentProperty ?? 'SubHeaderText'); return this.getCmsContent(
this.cmsWidgetName,
this.contentProperty ?? 'SubHeaderText'
);
}, },
subText() { subText() {
let subTextFromCms = this.getCmsContent( let subTextFromCms = this.getCmsContent(
@ -84,7 +87,10 @@ export default {
return subText ?? ''; return subText ?? '';
}, },
backButtonAccessibleText() { backButtonAccessibleText() {
return this.getCmsContent(this.cmsWidgetName, 'BackButtonAccessibleText'); return this.getCmsContent(
this.cmsWidgetName,
'BackButtonAccessibleText'
);
}, },
headerColor() { headerColor() {
return this.subText ? 'dark-header' : 'light-header'; return this.subText ? 'dark-header' : 'light-header';
@ -97,10 +103,10 @@ export default {
alternateFormatting() { alternateFormatting() {
// override for service-packages unique style // override for service-packages unique style
if (this.issContainingPage?.toLowerCase() === 'service-packages') { if (this.issContainingPage?.toLowerCase() === 'service-packages') {
return 'service-packages-subtext mt-4 mb-2 px-5'; return 'service-packages-subtext mt-4 mb-4 px-5';
} }
return this.darkGraySubText ? 'dark-gray' : 'light-gray'; return this.darkGraySubText ? 'dark-gray' : 'light-gray';
} },
}, },
methods: { methods: {
doesCopyContainRouterLink, doesCopyContainRouterLink,
@ -110,8 +116,8 @@ export default {
getRouterLinkHtmlStringFromCopy, getRouterLinkHtmlStringFromCopy,
clickEvent() { clickEvent() {
this.$emit('click-event'); this.$emit('click-event');
} },
} },
}; };
</script> </script>

186
src/layouts/service-location/service-location.vue
View file

@ -14,97 +14,101 @@
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mt-5" /> class="mt-5" />
<div class="main-content-container"> <serviceZipModalQuestion
<serviceZipModalQuestion ref="serviceZipCodeQuestion"
ref="serviceZipCodeQuestion" v-model="serviceZipCodeQuestion"
v-model="serviceZipCodeQuestion" modalWidgetName="ServiceZipModalWidget"
modalWidgetName="ServiceZipModalWidget" :onZipUpdateCallback="reloadShopData"
:onZipUpdateCallback="reloadShopData" @updatedServiceability="setServiceabilityDetails"
@updatedServiceability="setServiceabilityDetails" @updatedContainsMilitaryBase="
@updatedContainsMilitaryBase=" setContainsMilitaryBase
setContainsMilitaryBase " />
" /> <alert
<alert v-if="displayMilitaryZipAlert"
v-if="displayMilitaryZipAlert" ref="alertMilitaryBaseZip"
ref="alertMilitaryBaseZip" class="my-5"
class="my-5" cmsWidgetName="AlertMilitaryBaseZipWidget"
cmsWidgetName="AlertMilitaryBaseZipWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> <alert
<alert v-if="displayServiceableMobileOnly"
v-if="displayServiceableMobileOnly" ref="alertMobileOnly"
ref="alertMobileOnly" class="my-5"
class="my-5" cmsWidgetName="AlertMobileOnlyWidget"
cmsWidgetName="AlertMobileOnlyWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> <alert
<alert v-if="displayRecalibrationWarning"
v-if="displayRecalibrationWarning" ref="alertRecalNoMobile"
ref="alertRecalNoMobile" class="my-5"
class="my-5" cmsWidgetName="AlertRecalNoMobileWidget"
cmsWidgetName="AlertRecalNoMobileWidget" alertClass="alert-warning"
alertClass="alert-warning" @text-link-clicked="openModalAction" />
@text-link-clicked="openModalAction" /> <alert
<alert v-if="displayServiceableInshopOnly"
v-if="displayServiceableInshopOnly" ref="alertInshopOnly"
ref="alertInshopOnly" class="my-5"
class="my-5" cmsWidgetName="AlertInshopOnlyWidget"
cmsWidgetName="AlertInshopOnlyWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> <alert
<alert v-if="displayNoShopsAlert"
v-if="displayNoShopsAlert" ref="alertNoShops"
ref="alertNoShops" class="my-5"
class="my-5" cmsWidgetName="AlertNoShopsWidget"
cmsWidgetName="AlertNoShopsWidget" alertClass="alert-warning" />
alertClass="alert-warning" /> </div>
<appointmentTypeQuestion </div>
v-show="isAppointmentTypeDisplayed" <div class="row justify-content-center appointment-type">
ref="appointmentTypeQuestion" <div class="col-md-6">
v-model="selectedAppointmentType" <appointmentTypeQuestion
:isServiceableMobile="isServiceableMobile" v-show="isAppointmentTypeDisplayed"
:isServiceableInshop="isServiceableInshop" ref="appointmentTypeQuestion"
:isDisplayed="isAppointmentTypeDisplayed" v-model="selectedAppointmentType"
groupName="appointmentTypeQuestion" :isServiceableMobile="isServiceableMobile"
cmsWidgetName="AppointmentTypeQuestionWidget" :isServiceableInshop="isServiceableInshop"
validationRules="option-required" /> :isDisplayed="isAppointmentTypeDisplayed"
<mobileLocationModalQuestions groupName="appointmentTypeQuestion"
v-if="isMobileLocationDisplayed" cmsWidgetName="AppointmentTypeQuestionWidget"
ref="mobileLocationQuestions" validationRules="option-required" />
v-model="mobileLocationQuestions" </div>
customComponentId="mobileLocationQuestions" </div>
:mobileFeePart="mobileFeePart" <div class="row justify-content-center">
validationRules="mobile-location-required" <div class="col-md-6 col-xl-4">
linkWidgetName="MobileLocationLinkWidget" <mobileLocationModalQuestions
modalWidgetName="MobileLocationModalWidget" v-if="isMobileLocationDisplayed"
:onZipUpdateCallback="reloadShopData" ref="mobileLocationQuestions"
@updated-mobile-fee-part="setMobileFeePart" v-model="mobileLocationQuestions"
@updated-serviceability="setServiceabilityDetails" customComponentId="mobileLocationQuestions"
@updated-contains-military-base=" :mobileFeePart="mobileFeePart"
setContainsMilitaryBase validationRules="mobile-location-required"
" /> linkWidgetName="MobileLocationLinkWidget"
<shopQuestion modalWidgetName="MobileLocationModalWidget"
v-show="isShopQuestionDisplayed" :onZipUpdateCallback="reloadShopData"
ref="shopQuestion" @updated-mobile-fee-part="setMobileFeePart"
v-model="selectedProvider" @updated-serviceability="setServiceabilityDetails"
:selectedAppointmentType="selectedAppointmentType" @updated-contains-military-base="
:isDisplayed="isShopQuestionDisplayed" setContainsMilitaryBase
cmsWidgetName="ShopQuestionWidget" " />
@updatedMobileProviderNumber=" <shopQuestion
setMobileProviderNumber v-show="isShopQuestionDisplayed"
" /> ref="shopQuestion"
<contentGroupModal v-model="selectedProvider"
ref="RecalModal" :selectedAppointmentType="selectedAppointmentType"
cmsWidgetName="RecalModal" /> :isDisplayed="isShopQuestionDisplayed"
<siteFooter cmsWidgetName="ShopQuestionWidget"
ref="siteFooter" @updatedMobileProviderNumber="
class="mt-5" setMobileProviderNumber
cmsWidgetName="SiteFooterWidget" " />
:isForwardActionDisabled=" <contentGroupModal
!meta.valid || displayNoShopsAlert ref="RecalModal"
" cmsWidgetName="RecalModal" />
@backClicked=" <siteFooter
navigateBack(this, navigateBackScenario) ref="siteFooter"
" class="mt-5"
@forwardClicked="forwardButtonAction" /> cmsWidgetName="SiteFooterWidget"
</div> :isForwardActionDisabled="
!meta.valid || displayNoShopsAlert
"
@backClicked="navigateBack(this, navigateBackScenario)"
@forwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
</div> </div>

1
src/layouts/service-packages/service-packages.vue
View file

@ -14,7 +14,6 @@
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
justification="left"
issContainingPage="service-packages" /> issContainingPage="service-packages" />
<servicePackageQuestion <servicePackageQuestion
ref="servicePackage" ref="servicePackage"

4
src/styles/common-styles.scss
View file

@ -35,10 +35,6 @@ body {
.shop-question { .shop-question {
.col { .col {
max-width: 472px; max-width: 472px;
@include media-breakpoint-up(xl) {
max-width: 66.6666666%;
margin: 0 auto;
}
} }
} }
} }