Merge pull request #1356 from Safelite/CSR-1673-list-button-item-alignment

CSR-1673 fix icon and text alignment and add back scroll to bottom fe…
2023-09-22 11:01:05 -04:00 · 2023-09-22 11:01:05 -04:00 · 73726af7a3
commit 73726af7a3
parent e024258980 1ee67c259e
15 changed files with 32 additions and 18 deletions
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@ -1,7 +1,7 @@
 <template>
    <div :class="`questions-page`">
        <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@ -5,7 +5,7 @@
        ref="theForm"
        v-slot="{ meta }"
        autocomplete="off">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@ -1,6 +1,6 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@ -1,7 +1,7 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@ -1,6 +1,6 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@ -1,7 +1,7 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@ -1,7 +1,7 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
+++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
@ -97,8 +97,8 @@ export default {
 <style lang="scss">
 .appointment-type-question {
    .list-card img {
-        height: auto;
-        width: 3.417rem;
+        height: 1.5rem;
+        width: auto;
    }
 }
 </style>
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@ -1,7 +1,7 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@ -1,6 +1,6 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@ -2,7 +2,7 @@
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
        <div class="vehicle-parts small-question-text">
            <loadingModal ref="loadingModal" />
-            <div class="container-fluid">
+            <div class="container-fluid page-container-grouped-styles">
                <div class="row">
                    <div class="col">
                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@ -1,7 +1,7 @@
 <template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@ -91,6 +91,7 @@ export default {
                    lineItem.partType != partTypeStrings.RAIN_DEFENSE
                );
            });
+            console.log("step one", lineItemsToPrice);
            let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
            return totalPrice;
        },
@ -112,18 +113,26 @@ export default {
                        lineItem.childParts
                    );
                }
+                console.log(
+                    "step two, lineItem name: ",
+                    lineItem.partNumber,
+                    " / totalPrice: ",
+                    totalPrice
+                );
            });
+            console.log("step three", totalPrice);
            return totalPrice;
        },
        getTotalLineItemPrice(lineItem) {
            return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
        },
        scrollToPageTop() {
-            const container = document.getElementsByClassName("container-fluid")[0];
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
            container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
        },
        scrollToPageBottom() {
-            const container = document.getElementsByClassName("container-fluid")[0];
+            console.log("scroll to bottom");
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
        },
    },
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@ -10,6 +10,11 @@ body {
        .prevent-squish {
            overflow-x: unset;
        }
+        &.page-container-grouped-styles {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
    }
    .pointer {
        cursor: pointer;
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@ -82,8 +82,8 @@ export default {

    img {
        // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
-        height: auto;
-        width: 6.5rem;
+        height: 2rem;
+        width: auto;
        margin-bottom: 2.2rem;
        max-width: 100%;
    }
@ -96,7 +96,7 @@ export default {
            outline: none;
            display: flex;
            position: relative;
-            justify-content: space-between;
+            justify-content: flex-start;

            p {
                color: $gray-600;