Merge branch 'develop' into feature/CSR-1413

src/digital-components/modal/modal.vue

@@ -148,12 +148,25 @@ export default {
     }
     &.modal-component {
         .modal-dialog {
-            max-width: 576px;
+            max-width: 767px;
             margin: 0 auto;
+            @include media-breakpoint-up(md) {
+                width: 376px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                transform: translate(100%, 0);
+            }
             .modal-content {
-                margin: 0 auto;
+                margin: 1.5rem auto 0 auto;
                 box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
                 border-radius: 1.5rem 1.5rem 0 0;
+                @include media-breakpoint-up(md) {
+                    box-shadow: none;
+                    border-radius: 0;
+                    height: 100vh;
+                    margin: 0 auto;
+                }
                 .modal-body {
                     .modal-sub-body {
                         color: $gray-600;
@@ -166,6 +179,9 @@ export default {
                             margin-bottom: 0;
                         }
                     }
+                    @include media-breakpoint-up(md) {
+                        overflow: scroll;
+                    }
                 }
             }
             &.modal-dialog-centered {
@@ -184,6 +200,11 @@ export default {
     &.show .modal-dialog {
         transform: translateY(0);
     }
+    @include media-breakpoint-up(md) {
+        &.fade {
+            transition: opacity 0.25s linear;
+        }
+    }
 }
 body {
     .modal-backdrop {

src/fmg-components/nav-bar/nav-bar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="row"></div>
     <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
-        <div class="row d-flex flex-row-reverse align-items-center vw-100">
+        <div class="row d-flex flex-row-reverse justify-content-between align-items-center vw-100">
             <div
                 :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
                 id="stacked">

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -516,9 +516,6 @@ export default {
 
 <style lang="scss">
 .time-slots-modal.modal.modal-component {
-    > .modal-dialog > .modal-content {
-        margin-top: 24px;
-    }
     .modal-header {
         padding-bottom: 0;
         margin-bottom: 0 !important;

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

@@ -32,6 +32,7 @@
                         groupName="DamageLocationQuestion" />
 
                     <windshieldOptions
+                        class="windshield-options"
                         ref="windshieldOptions"
                         v-model="selectedWindshieldOptions"
                         :hasRepairReplaceConflict="hasRepairReplaceConflict"
@@ -547,10 +548,12 @@ export default {
 
 <style lang="scss">
 .vehicle-damage {
-    @include media-breakpoint-up(md) {
+    .windshield-options {
-        .col {
+        @include media-breakpoint-up(md) {
-            flex: 0 0 auto;
+            .col {
-            width: 33.33333333%;
+                flex: 0 0 auto;
+                width: 33.33333333%;
+            }
         }
     }
 }

src/store/index.js

@@ -1675,35 +1675,25 @@ export const actions = {
         context,
         { year, make, model, style, carId, category, imageUrl, imageVifNumber, imageVifColor }
     ) {
-        context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-        context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
-
         if (
             context.state.order.vehicle.year != year ||
             context.state.order.vehicle.make != make ||
             context.state.order.vehicle.model != model ||
             context.state.order.vehicle.style != style
-        )
+        ) {
+            context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+            context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
             context.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
-
-        if (context.state.order.vehicle.year != year) {
             context.commit(storeMutations.UPDATE_YEAR, year);
-        }
-        if (context.state.order.vehicle.make != make) {
             context.commit(storeMutations.UPDATE_MAKE, make);
-        }
-        if (context.state.order.vehicle.model != model) {
             context.commit(storeMutations.UPDATE_MODEL, model);
-        }
-        if (context.state.order.vehicle.style != style) {
             context.commit(storeMutations.UPDATE_STYLE, style);
+            context.commit(storeMutations.UPDATE_CAR_ID, carId);
+            context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, category);
+            context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, imageUrl);
+            context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, imageVifNumber);
+            context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, imageVifColor);
         }
-
-        context.commit(storeMutations.UPDATE_CAR_ID, carId);
-        context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, category);
-        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, imageUrl);
-        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, imageVifNumber);
-        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, imageVifColor);
     },
 
     saveVehicleDamage(

src/styles/common-styles.scss

@@ -41,14 +41,6 @@ body {
         height: 1px;
         overflow: hidden;
     }
-
-    //Footer modal backdrop adjustments for positioning
-    .modal-backdrop {
-        left: 50%;
-        transform: translateX(-50%);
-        max-width: 576px;
-        height: calc(100% - 72px);
-    }
 }
 //Disable scroll of main container when modal is open
 .modal-open {