diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css index e47350565..a605df285 100644 --- a/public/css/site-2020Styling.css +++ b/public/css/site-2020Styling.css @@ -194,6 +194,16 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item { margin-bottom: 2px; } +@media (min-width: 500px) { + .form-group { + width: 80%; + } +} +@media (min-width: 800px) { + .form-group { + width: 60%; + } +} .list-group { margin-bottom: 20px; padding-left: 0; diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss index b3b4b21ce..ec72ae1b9 100644 --- a/public/scss/site-2020Styling.scss +++ b/public/scss/site-2020Styling.scss @@ -188,6 +188,17 @@ margin-bottom: 2px; } + @media (min-width: 500px) { + .form-group { + width: 80%; + } + } + @media (min-width: 800px) { + .form-group { + width: 60%; + } + } + .list-group { margin-bottom: 20px; padding-left: 0; diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js index f177b6cf7..50b353151 100644 --- a/src/constants/progress-bar-mapper.js +++ b/src/constants/progress-bar-mapper.js @@ -1,95 +1,28 @@ -export const pageProgressMapper = { - //Combine progress bar slide percent and button steps - vehicle: { - percent: 7, - step: 1, - }, - "vehicle-damage": { - percent: 10, - step: 1, - }, - estimate: { - percent: 14, - step: 1, - }, - "service-zip": { - percent: 18, - step: 1, - }, - "vin-lookup": { - percent: 18, - step: 1, - }, - "license-plate-lookup": { - percent: 18, - step: 1, - }, - "address-lookup": { - percent: 18, - step: 1, - }, - "address-vehicles": { - percent: 25, - step: 1, - }, - "part-questions": { - percent: 30, - step: 1, - }, - "molding-questions": { - percent: 30, - step: 1, - }, - "vehicle-parts": { - percent: 30, - step: 1, - }, - "capability-questions": { - percent: 30, - step: 1, - }, - quote: { - percent: 39, //Must be 39 - step: 2, - }, - "insurance-company": { - percent: 52, - step: 2, - }, - "service-location": { - percent: 60, - step: 2, - }, - schedule: { - percent: 70.5, //Must be 70.5 - step: 3, - }, - "mobile-details": { - percent: 76, - step: 3, - }, - "customer-details": { - percent: 84, - step: 3, - }, - "payment-method": { - percent: 92, //Must be 92 - step: 3, - }, - payment: { - percent: 96, - step: 4, - }, - confirmation: { - percent: 100, - step: 4, - }, +const pagePercentageMapper = { + vehicle: 4, + "vehicle-damage": 16, + estimate: 28, + "service-zip": 32, + "vin-lookup": 32, + "license-plate-lookup": 32, + "address-lookup": 32, + "address-vehicles": 36, + "part-questions": 40, + "molding-questions": 40, + "vehicle-parts": 40, + "capability-questions": 40, + quote: 48, + "insurance-company": 52, + // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED + // "service-location": 60, + schedule: 64, + "mobile-details": 76, + "customer-details": 84, + "payment-method": 92, + payment: 96, + confirmation: 100, }; export const getProgressBarPercentage = (page) => { - return pageProgressMapper[page]?.percent || 0; -}; - -export const getProgressBarStep = (page) => { - return pageProgressMapper[page]?.step || 1; + return pagePercentageMapper[page] || 0; }; diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 82fbf424c..2eaf204ad 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -7,7 +7,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com ">