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

Remedy for horizontal scrolling on select pages.

Browse source
This commit is contained in:
Bryan Mauger 2023-03-06 14:10:41 -05:00
parent ebd2d6dd44
commit 30f6f55f9f
6 changed files with 31 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles overflow-auto vehicle-damage">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner <vehicleBanner
class="mb-3" class="mb-3"

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

@ -3,7 +3,7 @@
@submit="onSubmit" @submit="onSubmit"
@invalid-submit="onInvalidSubmit" @invalid-submit="onInvalidSubmit"
> >
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles overflow-auto vehicle-lookup">
<SiteHeader <SiteHeader
cms-widget-name="SiteHeaderWidget" cms-widget-name="SiteHeaderWidget"
/> />
@ -15,7 +15,7 @@
<SiteSubHeader <SiteSubHeader
cms-widget-name="SiteSubHeaderWidget" cms-widget-name="SiteSubHeaderWidget"
/> />
<div class="fade-on-route-transition sub-container make-tall"> <div class="fade-on-route-transition sub-container make-tall container gx-0">
<VinLookupMethods <VinLookupMethods
v-model="selectedVinLookupMethod" v-model="selectedVinLookupMethod"
cms-widget-name="VINLookupMethod" cms-widget-name="VINLookupMethod"

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

@ -16,8 +16,8 @@
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
/> />
<div class="px-5"> <div class="px-4">
<div class="fade-on-route-transition sub-container make-tall mt-5"> <div class="fade-on-route-transition sub-container make-tall px-2 mt-5">
<vinLookupAlerts <vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType" :activeAlertType="activeVehicleLookupAlertType"
/> />

17
src/layouts/welcome-page/welcome-page.vue
View file

@ -3,10 +3,10 @@
<div class="page-container-grouped-styles welcome"> <div class="page-container-grouped-styles welcome">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition h-100 overflow-auto "> <div class="fade-on-route-transition h-100 overflow-auto container">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-4 px-5"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
inputId="policyNumberField" inputId="policyNumberField"
@ -18,7 +18,7 @@
validationRules="policy-number-required" /> validationRules="policy-number-required" />
</div> </div>
</div> </div>
<div class="row mt-4 px-5"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
type="date" type="date"
@ -39,7 +39,7 @@
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" /> <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" />
</div> </div>
</div> </div>
<div class="row mt-4 px-5"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<dropdownQuestion <dropdownQuestion
cmsWidgetName="DamageCauseQuestion" cmsWidgetName="DamageCauseQuestion"
@ -53,7 +53,7 @@
/> />
</div> </div>
</div> </div>
<div class="row mt-4 px-5"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
inputId="damageCityField" inputId="damageCityField"
@ -65,7 +65,7 @@
validationRules="loss-city-required" /> validationRules="loss-city-required" />
</div> </div>
</div> </div>
<div class="row mt-4 px-5"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<dropdownQuestion <dropdownQuestion
cmsWidgetName="DamageStateQuestion" cmsWidgetName="DamageStateQuestion"
@ -82,6 +82,7 @@
</div> </div>
<div class="row mt-4"> <div class="row mt-4">
<buttonQuestion <buttonQuestion
class="px-0"
cmsWidgetName="GlassOnlyQuestion" cmsWidgetName="GlassOnlyQuestion"
v-model="welcomePageModel.isDamageGlassOnly" v-model="welcomePageModel.isDamageGlassOnly"
inputId = "isDamageGlassOnly" inputId = "isDamageGlassOnly"
@ -93,7 +94,7 @@
ref="glassOnlyDamage" ref="glassOnlyDamage"
disableAutoFill/> disableAutoFill/>
</div> </div>
<div class="row mt-4 px-5"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
inputId="phoneNumberField" inputId="phoneNumberField"
@ -106,7 +107,7 @@
disableAutoFill /> disableAutoFill />
</div> </div>
</div> </div>
<div class="row mt-4 px-5"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
inputId="emailField" inputId="emailField"

8
src/styles/common-error-styles.scss
View file

@ -160,6 +160,14 @@ html {
font-weight: 500; font-weight: 500;
} }
.vehicle-damage,
.vehicle-lookup {
.form-test-error {
margin: 0;
padding: 0 .75rem;
}
}
.form-test-invalid { .form-test-invalid {
&.btn.btn-primary { &.btn.btn-primary {
color: $gray-600; color: $gray-600;

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

@ -32,6 +32,7 @@ body {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
} }
} }
@ -57,4 +58,3 @@ body {
} }
} }