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

Un-sticky site header.

Browse source
This commit is contained in:
Bryan Mauger 2023-04-10 14:08:14 -04:00
parent b96216a8ea
commit e9c65f57c0
3 changed files with 243 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -1,14 +1,18 @@
<template> <template>
<div :class="`page-container-grouped-styles questions-page`"> <div :class="`page-container-grouped-styles questions-page`">
<div class="fade-on-route-transition position-relative">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget" cmsWidgetName="alertWidget"
class="m-5"
alertClass="alert-warning" alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader" :manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy" :manualCopy="alertFewMoreQuestionsCopy"
@ -31,6 +35,11 @@
@ForwardClicked="handleForwardButtonAction" /> @ForwardClicked="handleForwardButtonAction" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -94,10 +103,19 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 180px); margin-bottom: 100px;
overflow-x: hidden !important; }
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
.questions-page { .questions-page {
.question-text { .question-text {

2
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -78,7 +78,7 @@ export default {
show() { show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true; this.isActive = true;
document.querySelector('.fade-on-route-transition').scrollTo({ document.querySelector('.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'instant' top: 0, behavior: 'instant'
}); });
}, },

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

@ -1,8 +1,13 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts small-question-text"> <div class="page-container-grouped-styles">
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<vehicleBanner <vehicleBanner
class="mb-3" class="mb-3"
ref="vehicleBanner" ref="vehicleBanner"
@ -40,6 +45,11 @@
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
@ -222,10 +232,19 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 180px); margin-bottom: 100px;
overflow-x: hidden !important; }
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
#vehicle-parts-alert { #vehicle-parts-alert {