diff --git a/src/assets/img/icons/back-glass-damage.svg b/src/assets/img/icons/back-glass-damage.svg new file mode 100644 index 000000000..59379e6de --- /dev/null +++ b/src/assets/img/icons/back-glass-damage.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/src/assets/img/icons/side-window-damage.svg b/src/assets/img/icons/side-window-damage.svg new file mode 100644 index 000000000..356145856 --- /dev/null +++ b/src/assets/img/icons/side-window-damage.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/src/assets/img/icons/windshield-damage.svg b/src/assets/img/icons/windshield-damage.svg new file mode 100644 index 000000000..dfdea1bb1 --- /dev/null +++ b/src/assets/img/icons/windshield-damage.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss index 2afbb0859..4e1cf95b4 100644 --- a/src/assets/scss/_CustomVariables.scss +++ b/src/assets/scss/_CustomVariables.scss @@ -24,6 +24,8 @@ $grays: ( $blue-200: #E7F1F6; $blue-300: #B9D7E6; $blue-400: #125B7E; +$blue-600: #1574A1; +$blue-700: #06577C; $blue: #167CAC;//Default Blue (Blue 500) $indigo: #6610f2; $purple: #6f42c1; @@ -92,3 +94,12 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati // stylelint-enable value-keyword-case $font-family-base: $font-family-sans-serif; $font-family-code: $font-family-monospace; + +//Gutters +$grid-gutter-width: .75rem; + +//Border Radius +$border-radius: .25rem; +$border-radius-sm: .2rem; +$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course. +$border-radius-pill: 50rem; \ No newline at end of file diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss index 57d72c537..1646125b5 100644 --- a/src/assets/scss/_GlobalStyles.scss +++ b/src/assets/scss/_GlobalStyles.scss @@ -1,13 +1,15 @@ body { - background-color: $light; - - @media (max-width: 992px) { - background-color: $white; + font-size: 16px; + background-color: #fff; + padding: 0 .75rem; +} - &.no-scroll_mobile { - height: 100vh; - overflow: hidden; - } +a { + color: $blue-600; + text-decoration: none; + border-bottom: 1px solid $blue-600; + &:hover { + color: $blue-400; } } diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index 71a1118f3..fdb31b0b2 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -22,3 +22,20 @@ justify-content: space-between; } } + +// Non-Bootstrap button +// Intended to be used without .btn class +.btn-damage { + width: 100%; + background-color: $white; + border: 1px solid #b3b4b5; + &:focus { + background-color: #e7f1f6; + border: 1px solid $blue; + } + &:focus-visible { // For keyboard/screenreader + background-color: #e7f1f6; + outline: none; + box-shadow: 0 0 0 2px $blue; + } +} \ No newline at end of file diff --git a/src/layouts/SelectCar/BaseTemplate.vue b/src/layouts/CarFunnel/BaseTemplate.vue similarity index 53% rename from src/layouts/SelectCar/BaseTemplate.vue rename to src/layouts/CarFunnel/BaseTemplate.vue index d6af1ecfb..410567201 100644 --- a/src/layouts/SelectCar/BaseTemplate.vue +++ b/src/layouts/CarFunnel/BaseTemplate.vue @@ -9,54 +9,39 @@ :src="carImg" /> -
+
-

{{ this.currentCarInfo }}

+ {{ this.currentCarInfo }} + {{ style }}
-
-

{{ this.neededCarInfo }}

+
+ {{ this.neededCarInfo }}
-
-
-
-
-
-
+
\ No newline at end of file diff --git a/src/layouts/CarFunnel/Damage/SelectDamage.vue b/src/layouts/CarFunnel/Damage/SelectDamage.vue new file mode 100644 index 000000000..1390b54cd --- /dev/null +++ b/src/layouts/CarFunnel/Damage/SelectDamage.vue @@ -0,0 +1,104 @@ + + + \ No newline at end of file diff --git a/src/layouts/CarFunnel/SelectCar/CarAttributes.vue b/src/layouts/CarFunnel/SelectCar/CarAttributes.vue new file mode 100644 index 000000000..ba8ea62a4 --- /dev/null +++ b/src/layouts/CarFunnel/SelectCar/CarAttributes.vue @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/src/layouts/SelectCar/SelectMake.vue b/src/layouts/CarFunnel/SelectCar/SelectMake.vue similarity index 67% rename from src/layouts/SelectCar/SelectMake.vue rename to src/layouts/CarFunnel/SelectCar/SelectMake.vue index dcb998224..8a25e2f99 100644 --- a/src/layouts/SelectCar/SelectMake.vue +++ b/src/layouts/CarFunnel/SelectCar/SelectMake.vue @@ -3,15 +3,19 @@ + > + + \ No newline at end of file diff --git a/src/layouts/SelectCar/SelectModel.vue b/src/layouts/CarFunnel/SelectCar/SelectModel.vue similarity index 69% rename from src/layouts/SelectCar/SelectModel.vue rename to src/layouts/CarFunnel/SelectCar/SelectModel.vue index 1a092cb98..0c625201a 100644 --- a/src/layouts/SelectCar/SelectModel.vue +++ b/src/layouts/CarFunnel/SelectCar/SelectModel.vue @@ -3,15 +3,19 @@ + > + + \ No newline at end of file diff --git a/src/layouts/SelectCar/SelectStyle.vue b/src/layouts/CarFunnel/SelectCar/SelectStyle.vue similarity index 62% rename from src/layouts/SelectCar/SelectStyle.vue rename to src/layouts/CarFunnel/SelectCar/SelectStyle.vue index 95e71acee..cf111e597 100644 --- a/src/layouts/SelectCar/SelectStyle.vue +++ b/src/layouts/CarFunnel/SelectCar/SelectStyle.vue @@ -3,14 +3,19 @@ + > + + \ No newline at end of file diff --git a/src/layouts/SelectCar/SelectYear.vue b/src/layouts/CarFunnel/SelectCar/SelectYear.vue similarity index 67% rename from src/layouts/SelectCar/SelectYear.vue rename to src/layouts/CarFunnel/SelectCar/SelectYear.vue index dbee24b48..6221df317 100644 --- a/src/layouts/SelectCar/SelectYear.vue +++ b/src/layouts/CarFunnel/SelectCar/SelectYear.vue @@ -3,14 +3,18 @@ + > + + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index f78d3a808..b439265ef 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,9 +1,10 @@ import { createWebHistory, createRouter } from "vue-router"; import Home from "@/layouts/ContentSite/Home.vue"; -import SelectYear from "@/layouts/SelectCar/SelectYear.vue"; -import SelectMake from "@/layouts/SelectCar/SelectMake.vue"; -import SelectModel from "@/layouts/SelectCar/SelectModel.vue"; -import SelectStyle from "@/layouts/SelectCar/SelectStyle.vue"; +import SelectYear from "@/layouts/CarFunnel/SelectCar/SelectYear.vue"; +import SelectMake from "@/layouts/CarFunnel/SelectCar/SelectMake.vue"; +import SelectModel from "@/layouts/CarFunnel/SelectCar/SelectModel.vue"; +import SelectStyle from "@/layouts/CarFunnel/SelectCar/SelectStyle.vue"; +import SelectDamage from "@/layouts/CarFunnel/Damage/SelectDamage.vue"; const routes = [ { @@ -31,6 +32,11 @@ const routes = [ name: "SelectStyle", component: SelectStyle, }, + { + path: "/damage", + name: "SelectDamage", + component: SelectDamage, + }, ]; const router = createRouter({ diff --git a/src/sharedcomponents/Button.vue b/src/sharedcomponents/Buttons/Button.vue similarity index 100% rename from src/sharedcomponents/Button.vue rename to src/sharedcomponents/Buttons/Button.vue diff --git a/src/sharedcomponents/Buttons/ImageButton.vue b/src/sharedcomponents/Buttons/ImageButton.vue new file mode 100644 index 000000000..0366c8a84 --- /dev/null +++ b/src/sharedcomponents/Buttons/ImageButton.vue @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 2dff8165b..c956742bd 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -8,13 +8,14 @@ export default createStore({ storage: window.sessionStorage, })], state: { - makes: [], + makes: [], models: [], styles: [], year: '', make: '', model: '', - slideTransition: 'fade', + style: '', + slideTransition: 'none', carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg", blurImg: true }, @@ -27,12 +28,23 @@ export default createStore({ updateMake(state, data){ state.make = data.make; state.models = data.models.data.Result; - state.slideTransition = 'slide' + state.slideTransition = 'slide'; }, updateModel(state, data){ state.model = data.model; state.styles = data.styles.data.Result; - state.slideTransition = 'slide' + state.slideTransition = 'slide'; + }, + updateStyle(state, data){ + state.style = data.style; + state.carImg = "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"; + state.blurImg = false; + state.slideTransition = 'slide'; + }, + removeStyle(state) { + state.style = ''; + state.blurImg = true; + state.carImg = 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg' } }, actions: { @@ -50,6 +62,10 @@ export default createStore({ const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`); commit('updateModel', {model, styles}); router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`); + }, + selectStyle({commit, state}, style){ + commit('updateStyle', {style}); + router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`); } }