Merge pull request #278 from Safelite/CSR-269-styling-fixes

CSR-269 style updates.

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -8,6 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ meta }"
+          class="vehicle-damage-form"
         >
           <damageLocationQuestion
             ref="damageLocation"
@@ -15,7 +16,7 @@
             groupName="DamageLocationQuestion"
           />
           <windshieldOptions
-            ref="windshieldOptions" 
+            ref="windshieldOptions"
             v-model="selectedWindshieldOptions"
             :hasRepairReplaceConflict="hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
@@ -28,7 +29,7 @@
             alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
             :isDismissible="false"
           />
-          <sideDoorOptions 
+          <sideDoorOptions
             ref="sideDoorOptions"
             groupName="SideDoorSideQuestion"
             v-model="sideDoorOptionsData"
@@ -171,10 +172,10 @@ export default {
         el && el.focus();
       }
     },
-    
+
     getDamageLocationsFromStore() {
       var glassSelections = [];
-      
+
       if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD }) ||
           store.getters.damage.isRepair) {
           glassSelections.push(damageLocationsSelected.WINDSHIELD);
@@ -193,7 +194,7 @@ export default {
 
     getWindshieldOptionsFromStore() {
       var windShieldOptions = { selectedWindshieldDamageType: [], selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
-      
+
       if (store.getters.damage.isRepair === undefined) return windshieldOptions;
 
       if (!store.getters.damage.isRepair) {
@@ -222,7 +223,7 @@ export default {
       }
 
       return windShieldOptions;
-      
+
     },
 
     getDoorSidesFromStore() {
@@ -249,7 +250,7 @@ export default {
 
       return driverSideReplaceOptions;
     },
-    
+
     getPassengerSideReplaceOptionsFromStore() {
       var passengerSideReplaceOptions = [];
 
@@ -264,7 +265,7 @@ export default {
 
     getRearReplaceOptionsFromStore(){
       var rearReplaceOptions = [];
-      
+
       store.getters.damage.glassToReplace.forEach(glass => {
         if (glass.location === damageLocationsSelected.REAR){
           rearReplaceOptions.push(glass.name);
@@ -284,10 +285,10 @@ export default {
       }
 
       store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
-      
+
       const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
       { carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
-      
+
       this.navigateForward(partsData);
     },
 
@@ -297,7 +298,7 @@ export default {
         this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS, this.$route, {}, {}, partsData.data);
         return;
       }
-      
+
       //found multiple parts for a single glass location (Windshield, Driver, Passenger, Rear)
       if (partsData.data.partsOrQuestions){
         for (var i = 0; i < partsData.data.partsOrQuestions.length; i++){
@@ -312,7 +313,7 @@ export default {
       if (!this.isWindshieldRepair){
         store.commit(this.storeMutations.UPDATE_PARTS, partsData.data.partsOrQuestions[0].parts);
       }
-    
+
       this.$router.navigate(this.navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, this.$route);
     },
 
@@ -341,33 +342,33 @@ export default {
             selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem});
           })
       }
-      
+
       return selectedGlassToReplace;
     },
   },
   computed: {
     isWindshieldDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages =>
         {
             return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
         });
     },
     isSideDoorDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages =>
         {
             return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
         });
     },
     isRearWindowDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages =>
         {
             return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
         });
     },
     isWindshieldRepair() {
       if (!this.isWindshieldDamageLocation) return false;
-      
-      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
+
+      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType =>
         {
             return selectedDamageType.toUpperCase() === "REPAIR";
         });
@@ -375,7 +376,7 @@ export default {
     isDriverSideReplace() {
       if (!this.isSideDoorDamageLocation) return false;
 
-      return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide => 
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide =>
         {
             return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
         });
@@ -383,7 +384,7 @@ export default {
     isPassengerSideReplace() {
       if (!this.isSideDoorDamageLocation) return false;
 
-      return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide => 
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide =>
         {
             return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
         });
@@ -407,3 +408,11 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+  .vehicle-damage-form {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+</style>

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -113,9 +113,9 @@ export default {
     if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
       fieldOptions['initialValue'] = fieldOptions.checkedValue;
     }
-    const { 
-      checked, 
-      handleChange, 
+    const {
+      checked,
+      handleChange,
       errors,
     } = useField(props.groupName, props.validationRules, fieldOptions);
 
@@ -135,6 +135,7 @@ export default {
     opacity: 0;
     width: 0;
     height: 0;
+    position: absolute;
     &:focus-visible + label {
       box-shadow: 0 0 0 2px $blue;
       z-index: 2;

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

@@ -183,6 +183,7 @@ export default {
     opacity: 0;
     width: 0;
     height: 0;
+    position: absolute;
 
     + label {
       display: block;
@@ -262,6 +263,7 @@ export default {
       height: 6px;
       width: 11px;
       transform: rotate(-45deg);
+      z-index: 1;
     }
   }