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

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

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

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

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