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

CSR-343 Edit CSS

Browse source
This commit is contained in:
Katie 2022-06-27 15:45:43 -04:00
parent f208cb031c
commit 8a1fc5bbe5
6 changed files with 52 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/common-components/button-question/button-question.vue
View file

@ -4,44 +4,46 @@
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
<span class="fs-5 fw-bold w-100">{{ questionText }}</span>
</div>
<div class="w-100 justify-content-center">
<div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName">
<legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1">
{{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
</legend>
<div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
<component
:is="buttonType"
@isCheckedChanged="handleCheckedChanged"
:buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
:value="getValues(answer)"
:buttonLabel="answer.Text ? answer.Text : answer"
:buttonLabelSubCopy="answer.SubText"
:textPosition="textPosition"
:isMultiSelect="isMultiSelect"
:groupName="groupName"
:selectingInitiatesLoad="selectingInitiatesLoad"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
:isWide=isWide
:isRequired=isRequired
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="getColLength"
:selectedValues="selectedValues"
data-test="button"
:validationRules="validationRules"
:class="[suppressError ? 'alertError' : '']"
:clearOnUnmount="clearOnUnmount"
/>
<!-- For nested questions -->
<transition name="fade" mode="out-in">
<div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
<slot></slot>
</div>
</transition>
<div :class="getComponentWrapperClasses">
<div :class="isWide ? 'col-12' : 'col'" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
<component
:is="buttonType"
@isCheckedChanged="handleCheckedChanged"
:buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
:value="getValues(answer)"
:buttonLabel="answer.Text ? answer.Text : answer"
:buttonLabelSubCopy="answer.SubText"
:textPosition="textPosition"
:isMultiSelect="isMultiSelect"
:groupName="groupName"
:selectingInitiatesLoad="selectingInitiatesLoad"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
:isWide=isWide
:isRequired=isRequired
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="getColLength"
:selectedValues="selectedValues"
data-test="button"
:validationRules="validationRules"
:class="[suppressError ? 'alertError' : '']"
:clearOnUnmount="clearOnUnmount"
/>
<!-- For nested questions -->
<transition name="fade" mode="out-in">
<div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
<slot></slot>
</div>
</transition>
</div>
</div>
</fieldset>
</div>
@ -96,9 +98,15 @@ export default {
},
computed: {
getFieldSetClasses() {
return this.isOverflowScrollable
? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
: "";
if (this.isOverflowScrollable) {
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
}
else if (this.buttonType == "listCard") {
return "w-100";
}
else {
return "";
}
},
getComponentWrapperClasses() {
let classes;
@ -110,7 +118,7 @@ export default {
classes = "d-flex flex-row p-0";
break;
case 'listCard':
classes = 'row justify-content-center g-2'
classes = "row g-2 justify-content-center";
break;
case 'radio':
classes = 'ui-radio d-flex'
@ -122,7 +130,7 @@ export default {
if(this.isWide) {
return "12"
} else {
return this.answers.length < 3 ? '' : '-4';
return "";
}
},
selectedValues: {

1
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -85,7 +85,6 @@ export default {
};
},
buttonClick() {
console.log("HI")
//prevent keyboard input after button click
document.onkeydown = function (e) {
return false;

1
src/common-components/question-chain/question-chain.vue
View file

@ -36,7 +36,6 @@ export default {
computed: {
questions() {
console.log("answeredQuestions: ", this.answeredQuestions)
const questions = this.questionData.partQuestions.map((q, i) => {
return {
questionText: q.questionText,

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

@ -1,11 +1,8 @@
<template>
<div class="container">
<div class="row">
<p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
</div>
<div class="row">
<p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
</div>
<div class="container nested-radio">
<div class="nested-radio">
<div class="row my-2">
<div class="col">
<buttonQuestion
@ -19,7 +16,6 @@
@isCheckedChanged="ResetTintAndPartSelections()"
validationRules="replace-options-required"
>
<transition name="fade" mode="out-in">
<div class="row my-2" aria-live="polite">
<div class="col">
<buttonQuestion
@ -37,7 +33,6 @@
/>
</div>
</div>
</transition>
</buttonQuestion>
</div>
</div>

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

@ -9,7 +9,7 @@
<vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="container-fluid prevent-squish my-5">
<div class="prevent-squish my-5">
<div class="row">
<div class="col">
<alert
@ -27,7 +27,6 @@
<div class="container-fluid">
<hr v-if="i > 0" />
</div>
{{ glassParts }}
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="glassParts[item.glassLocation + '-' + item.glassName]"

2
src/ux-components/list-card/list-card.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="'col' + colLength">
<div :class="'h-100 l' + colLength">
<div
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
:class="[