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

CSS changes for welcome & vehicle parts page

Browse source 
SSR-241
This commit is contained in:
Jethe 2023-03-30 12:22:50 +05:30
parent b1bc933665
commit f46ef4837e
4 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/digital-components/button-question/button-question.vue
View file

@ -4,7 +4,8 @@
:class=" :class="
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question' isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
"> ">
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5"> <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5"
:class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
<span class="fw-bold w-100">{{ questionText }}</span> <span class="fw-bold w-100">{{ questionText }}</span>
</div> </div>
@ -121,6 +122,8 @@ export default {
useTextForValue: Boolean, useTextForValue: Boolean,
valueToLogType: String, valueToLogType: String,
additionalButtonStyling: String, additionalButtonStyling: String,
isSmallQuestionText: Boolean,
isSmallQuestionLabelText: Boolean,
}, },
beforeMount() { beforeMount() {
if (this.buttonTypeObject) { if (this.buttonTypeObject) {
@ -134,13 +137,20 @@ export default {
}, },
computed: { computed: {
getFieldSetClasses() { getFieldSetClasses() {
if (this.isOverflowScrollable) { const baseClasses = this.isOverflowScrollable
return "container-fluid overflow-scroll position-absolute pt-1 py-0"; ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
} else if (this.buttonTypeString == "listCard") { : this.buttonTypeString == "listCard"
return "w-100"; ? "w-100"
} else { : "";
return "";
} const SmallQuestionTextClass = this.isSmallQuestionText
? baseClasses + "small-question-text"
: baseClasses;
const SmallQuestionLabelText = this.isSmallQuestionLabelText
? SmallQuestionTextClass + "small-question-label-text"
: SmallQuestionTextClass;
return SmallQuestionLabelText;
}, },
getComponentLoopWrapperClasses() { getComponentLoopWrapperClasses() {
let classes; let classes;
@ -254,35 +264,35 @@ export default {
} }
} }
.vehicle-parts { .small-question-text {
.question-text { &.question-text {
span { span {
font-size: 0.875rem; font-size: 0.875rem;
text-align: left; text-align: left;
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
} }
} }
.question-text { &.question-text {
margin: 0; margin: 0;
} }
fieldset { &fieldset {
.ui-radio { .ui-radio {
margin: 0; margin: 0;
} }
} }
} }
.welcome { .small-question-label-text {
.question-text { &.question-text {
span { span {
text-align: left; text-align: left;
margin: 0 0 0.25rem 0; margin: 0 0 0.25rem 0;
} }
} }
.question-text { &.question-text {
margin: 0; margin: 0;
} }
fieldset { &fieldset {
.ui-radio { .ui-radio {
margin: 0; margin: 0;
} }

1
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -25,6 +25,7 @@
textPosition="text-start" textPosition="text-start"
:loaderEnabled="false" :loaderEnabled="false"
isRequired isRequired
isSmallQuestionText
:groupName="`${glassLocation}-${glassName}-${selectedTint}`" :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="partValidationRules" /> :validationRules="partValidationRules" />
</div> </div>

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

@ -1,6 +1,6 @@
<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"> <div class="page-container-grouped-styles vehicle-parts small-question-text">
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" /> <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <div class="fade-on-route-transition sub-container overflow-scroll px-5">
<vehicleBanner <vehicleBanner

2
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles welcome"> <div class="page-container-grouped-styles welcome small-question-label-text">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition overflow-scroll container"> <div class="fade-on-route-transition overflow-scroll container">