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

CSR-1592 desktop adjustments

Browse source 
Settings for menu-modal, set l/r padding for container-fluid, wrap questions-page-layout in responsive container.
This commit is contained in:
Bryan Mauger 2023-09-20 10:26:43 -04:00
parent 3b3b9273ce
commit 51f4648112
3 changed files with 42 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -158,7 +158,7 @@ export default {
}
.modal {
&.menu-modal {
max-width: 576px;
//max-width: 576px;
left: auto;
height: calc(100% - 72px);
top: 72px;
@ -175,7 +175,7 @@ export default {
}
.modal-fullscreen {
width: 100vw;
max-width: 576px;
//max-width: 576px;
}
.navigation-link {
margin-bottom: 1.5rem;
@ -188,7 +188,7 @@ export default {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
right: 0;
top: -4.5rem;
top: -5rem;
button {
border: none;
&.menu-button {

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

@ -1,34 +1,44 @@
<template>
<div :class="`page-container-grouped-styles questions-page`">
<div :class="`questions-page`">
<loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
class="my-5"
alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy"
v-bind:isDismissible="false" />
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain
ref="questionChain"
v-model="selectedAnswers[questionsDatum.answerKey]"
:questionData="questionsDatum.questions"
:index="i"
v-if="showThisQuestionChain(questionsDatum, i)"
:answerKey="questionsDatum.answerKey"
:validationRules="validationRules" />
<div class="container-fluid">
<div class="row">
<div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
class="my-5"
alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy"
v-bind:isDismissible="false" />
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain
ref="questionChain"
v-model="selectedAnswers[questionsDatum.answerKey]"
:questionData="questionsDatum.questions"
:index="i"
v-if="showThisQuestionChain(questionsDatum, i)"
:answerKey="questionsDatum.answerKey"
:validationRules="validationRules" />
</div>
<navbar
ref="navbar"
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!isMetaValid"
@back-clicked="handleBackButtonAction"
@ForwardClicked="handleForwardButtonAction" />
</div>
</div>
</div>
<navbar
ref="navbar"
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!isMetaValid"
@back-clicked="handleBackButtonAction"
@ForwardClicked="handleForwardButtonAction" />
</div>
</div>
</template>

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

@ -6,6 +6,7 @@ body {
color: #4d5151;
.container-fluid {
max-width: 1400px;
padding: 0 1.5rem;
.prevent-squish {
overflow-x: unset;
}