Merge pull request #1349 from Safelite/CSR-1592-desktop-adjustments
CSR-1592 desktop adjustments
This commit is contained in:
commit
fc40f34a31
4 changed files with 43 additions and 31 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue