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

Merge pull request #1102 from Safelite/feature/humphries/INSR-7775.1

Browse source 
INSR-8542: Fix some validation and responsive defects
This commit is contained in:
AHumphriesSL 2026-02-23 11:34:44 -05:00 committed by GitHub
commit 998c2a403d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@
v-for="(tint, index) in tintSelectionOptions" v-for="(tint, index) in tintSelectionOptions"
:key="index"> :key="index">
<div class="tint-option"> <div class="tint-option">
<span>{{ `${partType} - ${tint}` }}</span> <div class="tint-option-text">{{ `${partType} - ${tint}` }}</div>
<span :class="`tint-image ${convertTintToCSSClass(tint)}`"></span> <span :class="`tint-image ${convertTintToCSSClass(tint)}`"></span>
</div> </div>
<buttonQuestion <buttonQuestion
@ -59,7 +59,7 @@ export default {
partValidationRules() { partValidationRules() {
const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`; const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED)); defineRule(validationRuleName, required(`${this.partType} not selected`));
return validationRuleName; return validationRuleName;
}, },
@ -155,7 +155,7 @@ export default {
return tint.toLowerCase().replaceAll(' ', '-').replaceAll(',', ''); return tint.toLowerCase().replaceAll(' ', '-').replaceAll(',', '');
}, },
toTitleCaseWithExceptions(text) { toTitleCaseWithExceptions(text) {
const exceptions = ['side', 'glass', 'dimming']; const exceptions = ['side', 'glass', 'dimming', 'BPassenger', 'soundproofing'];
let temp = toTitleCase(text); let temp = toTitleCase(text);
exceptions.forEach((exception) => { exceptions.forEach((exception) => {
const regEx = new RegExp(exception, 'ig'); const regEx = new RegExp(exception, 'ig');
@ -176,7 +176,8 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 2rem; position: relative;
min-height: 2rem;
margin-top: .5rem; margin-top: .5rem;
margin-bottom: .25rem; margin-bottom: .25rem;
font-weight: 600; font-weight: 600;
@ -185,19 +186,48 @@ export default {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
justify-content: flex-start; justify-content: flex-start;
} }
.tint-option-text {
padding-right: 2.5rem;
}
} }
.radioQuestion { .radioQuestion {
:deep(.list-button) { :deep(.list-button) {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
&:not(:last-child) {
:deep(.form-test-error) {
display: none;
}
}
&:last-child {
:deep(.form-test-error) {
position: absolute;
margin: -10px 0 10px 10px;
font-weight: 600;
> * {
padding: 0;
}
}
}
} }
.tint-image { .tint-image {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
margin-left: 1rem;
margin-top: -.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url(~@/assets/img/tints/GlassTint.png); background-image: url(~@/assets/img/tints/GlassTint.png);
position: absolute;
top: -.25rem;
right: 1rem;
@include media-breakpoint-up(md) {
position: relative;
top: -.25rem;
right: 1.5rem;
float: left;
}
} }
.blue-tint-green-shade { .blue-tint-green-shade {
background-position: -53px -53px; background-position: -53px -53px;

5
src/styles/common-validation-styles.scss
View file

@ -7,11 +7,6 @@ html {
&.list-button, &.list-button,
&.list-button.list-group, &.list-button.list-group,
&.list-card &.option-label { &.list-card &.option-label {
border: 1px solid $red;
position: relative;
z-index: 4;
border-radius: 60px;
.button-content { .button-content {
border: 1px solid $red; border: 1px solid $red;
} }