Removed the sticky footer and fixed the space between the button
This commit is contained in:
sheena 2023-04-28 19:20:56 +05:30
parent af384c40df
commit 3b97b21c24
11 changed files with 34 additions and 22 deletions

View file

@ -9,7 +9,7 @@
<span class="fw-bold w-100">{{ questionText }}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<div class="w-100 d-flex justify-content-center mb-2">
<fieldset
class="w-100"
:aria-required="isRequired"

View file

@ -1,8 +1,6 @@
<template>
<div class="footerImage" id="imgCity" v-if="footerImageURL" >
<img id="siteFooterImage" :src="footerImageURL" />
</div>
<footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
<footer class="footer container-fluid g-5 py-4" id="infoBox">
<div class="row d-flex flex-row-reverse align-items-center vw-100 mx-0">
<div class="col button-col d-flex" id="stacked" >
<buttonMain
@ -31,6 +29,9 @@
</div>
</div>
</footer>
<div class="footerImage" id="imgCity" v-if="footerImageURL" >
<img id="siteFooterImage" :src="footerImageURL" />
</div>
</template>
<script>

View file

@ -156,6 +156,7 @@ export default {
<style lang="scss">
ol {
margin-left: -1rem;
margin-bottom:0;
li {
margin-bottom: .5rem;
line-height: 1.5rem;
@ -169,7 +170,10 @@ ol {
color: $black;
}
p strong {
color: $black;
color: $black;
font-weight: 500;
}
p.small{
margin-bottom:0;
}
</style>

View file

@ -51,7 +51,7 @@
:options="stateOptions"
disableAutoFill
validationRules="state-required"
class="mt-4" />
class="mt-4 mb-2"/>
<siteFooter
:isForwardActionDisabled="!meta.valid"
cms-widget-name="SiteFooterWidget"

View file

@ -4,7 +4,7 @@
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="row mt-4 px-3">
<div class="row mt-4 px-3 mb-2">
<div class="col">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>

View file

@ -219,9 +219,7 @@ export default {
</script>
<style lang="scss">
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}

View file

@ -6,7 +6,7 @@
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
justification="left"
issContainingPage="service-packages"/>
<div class="fade-on-route-transition sub-container make-tall">
<div class="fade-on-route-transition ">
<servicePackageQuestion ref="servicePackage"
cmsWidgetName="ServicePackage"
groupName="ServicePackageQuestion"
@ -18,8 +18,8 @@
<textBlock cmsWidgetName="PriceDisclaimerWidget"
justifyText="left"
typeStyle="caption"
style="margin-bottom: 6rem;"
class="mt-2 mx-6" />
class="mt-2 mx-6 mb-2" />
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
@ -188,4 +188,10 @@
contentGroupModal
}
};
</script>
</script>
<style>
.fade-on-route-transition{
overflow-x:hidden;
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<div class="vin-location-information mt-2">
<div class="vin-location-information mt-2 mb-2">
<div
class="vin-toggle"
:class="[isVinLocationDetailVisible ? 'active' : '']"

View file

@ -88,9 +88,10 @@
disableAutoFill />
</div>
</div>
<div class="row mt-4 px-3">
<div class="row px-3" >
<div class="col">
<textboxQuestion
class="mt-4"
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
v-model="welcomePageModel.damageCity"
@ -101,9 +102,10 @@
validationRules="loss-city-required" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="row px-3">
<div class="col">
<dropdownQuestion
class="mt-4"
cmsWidgetName="DamageStateQuestion"
v-model="welcomePageModel.damageState"
ref="state"
@ -118,9 +120,9 @@
/>
</div>
</div>
<div class="row mt-4">
<div class="row mb-2 ">
<buttonQuestion
class="px-0"
class="px-0 mt-4"
cmsWidgetName="GlassOnlyQuestion"
v-model="welcomePageModel.isDamageGlassOnly"
inputId = "isDamageGlassOnly"
@ -134,7 +136,7 @@
v-if="this.displayGlassOnlyQuestion"
disableAutoFill/>
</div>
<div class="row mt-4 position-sticky top-100" id="welcomeFooter">
<div class="row position-sticky top-100" id="welcomeFooter">
<div class="col">
<site-footer
cmsWidgetName="SiteFooterWidget"

View file

@ -54,7 +54,7 @@ body {
}
// Scroll page when modal isn't open
.fade-on-route-transition {
height: calc(100% - 80px);
height: calc(100% - 10px);
overflow: auto;
}
// Prevent scroll when modal is open

View file

@ -4,6 +4,7 @@ body {
font-size: 1rem;
line-height: 1.625;
font-weight: 400;
overflow:hidden;
}
//Headings