Merge pull request #1349 from Safelite/CSR-1592-desktop-adjustments

CSR-1592 desktop adjustments
This commit is contained in:
bmauger 2023-09-20 13:20:09 -04:00 committed by GitHub
commit fc40f34a31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 31 deletions

View file

@ -158,7 +158,6 @@ export default {
} }
.modal { .modal {
&.menu-modal { &.menu-modal {
max-width: 576px;
left: auto; left: auto;
height: calc(100% - 72px); height: calc(100% - 72px);
top: 72px; top: 72px;
@ -175,7 +174,6 @@ export default {
} }
.modal-fullscreen { .modal-fullscreen {
width: 100vw; width: 100vw;
max-width: 576px;
} }
.navigation-link { .navigation-link {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -188,7 +186,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 {

View file

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

View file

@ -93,6 +93,7 @@ export default {
.nav-bar { .nav-bar {
overflow: visible; overflow: visible;
display: flex; display: flex;
padding: 0;
a { a {
display: flex; display: flex;
justify-content: center; justify-content: center;

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;
} }