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

Merge pull request #216 from Safelite/feature/Digital/SSR-241

Browse source 
CSS changes for welcome & vehicle parts page
This commit is contained in:
Manjiri Jethe 2023-04-03 11:02:46 +05:30 committed by GitHub
commit 75d0a97965
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 17 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>

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

@ -120,6 +120,7 @@
buttonTypeString="listButtonHorizontal" buttonTypeString="listButtonHorizontal"
validationRules="damage-option-required" validationRules="damage-option-required"
isRequired isRequired
isSmallQuestionLabelText
ref="glassOnlyDamage" ref="glassOnlyDamage"
v-if="this.displayGlassOnlyQuestion" v-if="this.displayGlassOnlyQuestion"
disableAutoFill/> disableAutoFill/>