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

CSR-1593 set column width to control overly-wide components on larger screens.

Browse source 
Change scroll to auto for modals to avoid ghost scrollbars when not needed.

Center content on all screen sizes.
This commit is contained in:
Bryan Mauger 2023-10-16 08:38:23 -04:00
parent 02ba189da8
commit 3d23bdbabc
16 changed files with 42 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -179,7 +179,7 @@ export default {
} }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
overflow: scroll; overflow: auto;
flex: none; flex: none;
} }
} }

6
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
@ -16,7 +16,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<alert <alert
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
@ -28,7 +28,7 @@
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key"> <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain <questionChain

2
src/layouts/address-lookup/address-lookup.vue
View file

@ -11,7 +11,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

2
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

2
src/layouts/confirmation/confirmation.vue
View file

@ -4,7 +4,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div> <div>
<div class="container-fluid pb-2"> <div class="container-fluid pb-2">
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<div class="header-container"> <div class="header-container">
<img :src="ScheduleConfirmationImage" /> <img :src="ScheduleConfirmationImage" />

2
src/layouts/customer-details/customer-details.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
<textboxQuestion <textboxQuestion

2
src/layouts/estimate/estimate.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />

2
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

2
src/layouts/payment-method/payment-method.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

2
src/layouts/quote/quote.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

2
src/layouts/schedule/schedule.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<template v-if="ChangeShopLink.length"> <template v-if="ChangeShopLink.length">

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

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
@ -59,7 +59,7 @@
alertClass="alert-warning" /> alertClass="alert-warning" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center appointment-type"> <div class="row justify-content-center appointment-type">
<div class="col-md-6"> <div class="col-md-6">
<appointmentTypeQuestion <appointmentTypeQuestion
v-model="selectedAppointmentType" v-model="selectedAppointmentType"
@ -73,7 +73,7 @@
validationRules="option-required" /> validationRules="option-required" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions <mobileLocationModalQuestions
customComponentId="mobileLocationQuestions" customComponentId="mobileLocationQuestions"
@ -538,7 +538,7 @@ export default {
.appointment-type-question { .appointment-type-question {
.button-question { .button-question {
.col { .col {
padding: 0 0.5rem; //padding: 0 0.5rem;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: 0 0.75rem; padding: 0 0.75rem;
} }

8
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -6,7 +6,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
@ -23,7 +23,7 @@
:isDismissible="false" /> :isDismissible="false" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
@ -32,7 +32,7 @@
groupName="DamageLocationQuestion" /> groupName="DamageLocationQuestion" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<windshieldOptions <windshieldOptions
class="windshield-options" class="windshield-options"
@ -66,7 +66,7 @@
validationRules="replace-options-required" /> validationRules="replace-options-required" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"

4
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -8,7 +8,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<vehicleBanner <vehicleBanner
ref="vehicleBanner" ref="vehicleBanner"
@ -30,7 +30,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<div v-for="(item, i) in PartsOrQuestions" :key="i"> <div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->

2
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -7,7 +7,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-md-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"

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

@ -14,6 +14,24 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
// Set max-width on columns to prevent overly-wide
// components on extra wide screens.
.col-md-6 {
max-width: 472px;
@include media-breakpoint-up(xl) {
max-width: 708px;
}
.col {
max-width: 236px;
}
}
.col-xl-4 {
max-width: 472px;
.col {
max-width: 100%;
}
}
//END set max-width on columns
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;