CSR-343 Edit CSS

src/common-components/button-question/button-question.vue

@@ -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">
+        <div :class="getComponentWrapperClasses">
-          <component
+          <div :class="isWide ? 'col-12' : 'col'" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
-            :is="buttonType"
+            <component
-            @isCheckedChanged="handleCheckedChanged"
+              :is="buttonType"
-            :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
+              @isCheckedChanged="handleCheckedChanged"
-            :value="getValues(answer)"
+              :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
-            :buttonLabel="answer.Text ? answer.Text : answer"
+              :value="getValues(answer)"
-            :buttonLabelSubCopy="answer.SubText"
+              :buttonLabel="answer.Text ? answer.Text : answer"
-            :textPosition="textPosition"
+              :buttonLabelSubCopy="answer.SubText"
-            :isMultiSelect="isMultiSelect"
+              :textPosition="textPosition"
-            :groupName="groupName"
+              :isMultiSelect="isMultiSelect"
-            :selectingInitiatesLoad="selectingInitiatesLoad"
+              :groupName="groupName"
-            :loaderColor="loaderColor"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
-            :loaderPosition="loaderPosition"
+              :loaderColor="loaderColor"
-            :isWide=isWide
+              :loaderPosition="loaderPosition"
-            :isRequired=isRequired
+              :isWide=isWide
-            :buttonImage="answer.AnswerImageUrl"
+              :isRequired=isRequired
-            :buttonImageId="answer.ImageId"
+              :buttonImage="answer.AnswerImageUrl"
-            :altText="answer.Name ? answer.Name : answer"
+              :buttonImageId="answer.ImageId"
-            screenReaderOnlyText="(opens new window)"
+              :altText="answer.Name ? answer.Name : answer"
-            :colLength="getColLength"
+              screenReaderOnlyText="(opens new window)"
-            :selectedValues="selectedValues"
+              :colLength="getColLength"
-            data-test="button"
+              :selectedValues="selectedValues"
-            :validationRules="validationRules"
+              data-test="button"
-            :class="[suppressError ? 'alertError' : '']"
+              :validationRules="validationRules"
-            :clearOnUnmount="clearOnUnmount"
+              :class="[suppressError ? 'alertError' : '']"
-          />
+              :clearOnUnmount="clearOnUnmount"
-          <!-- For nested questions --> 
+            />
-          <transition name="fade" mode="out-in">
+            <!-- For nested questions --> 
-            <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
+            <transition name="fade" mode="out-in">
-              <slot></slot>
+              <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
-            </div>
+                <slot></slot>
-          </transition>
+              </div>
+            </transition>
+          </div>
         </div>
       </fieldset>
     </div>
@@ -96,9 +98,15 @@ export default {
   },
   computed: {
     getFieldSetClasses() {
-      return this.isOverflowScrollable
+      if (this.isOverflowScrollable) {
-        ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
+        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: {

src/common-components/funnel-footer/funnel-footer.vue

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

src/common-components/question-chain/question-chain.vue

@@ -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,

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -1,11 +1,8 @@
 <template>
-    <div class="container">
+    <div class="row">
-        <div class="row">
+        <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
-            <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
-        </div>
     </div>
-
+    <div class="nested-radio">
-    <div class="container 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>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -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]"

src/ux-components/list-card/list-card.vue

@@ -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="[