From 0c7d8254b7c59a3748c93fea6f393428e95f7c81 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 30 Sep 2021 14:38:05 -0400 Subject: [PATCH 1/8] New UI branch for car selector --- package-lock.json | 21 ++++++- package.json | 1 + src/App.vue | 40 +++++++++++-- src/assets/scss/_GlobalStyles.scss | 11 +++- src/assets/scss/components/_SelectCar.scss | 69 ++++++++++++++++++++++ src/assets/scss/custom.scss | 1 + src/components/Colors.vue | 2 +- src/components/SelectCar.vue | 58 ++++++++++++++++++ 8 files changed, 192 insertions(+), 11 deletions(-) create mode 100644 src/assets/scss/components/_SelectCar.scss create mode 100644 src/components/SelectCar.vue diff --git a/package-lock.json b/package-lock.json index 0ae7e6b56..287b6b81b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "Safelite", "version": "0.1.0", "dependencies": { + "axios": "^0.21.4", "bootstrap": "^5.1.1", "core-js": "^3.6.5", "vue": "^3.0.0", @@ -3246,6 +3247,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "node_modules/axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "dependencies": { + "follow-redirects": "^1.14.0" + } + }, "node_modules/babel-eslint": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", @@ -7059,7 +7068,6 @@ "version": "1.14.4", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz", "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==", - "dev": true, "funding": [ { "type": "individual", @@ -18206,6 +18214,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "requires": { + "follow-redirects": "^1.14.0" + } + }, "babel-eslint": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", @@ -21268,8 +21284,7 @@ "follow-redirects": { "version": "1.14.4", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz", - "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==", - "dev": true + "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==" }, "for-in": { "version": "1.0.2", diff --git a/package.json b/package.json index a9876f78d..ef1bd0ca3 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "axios": "^0.21.4", "bootstrap": "^5.1.1", "core-js": "^3.6.5", "vue": "^3.0.0", diff --git a/src/App.vue b/src/App.vue index 1982e117d..1a6b3d9c6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,26 +1,54 @@ diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss index de25b29f8..198686215 100644 --- a/src/assets/scss/_GlobalStyles.scss +++ b/src/assets/scss/_GlobalStyles.scss @@ -1,3 +1,12 @@ body { - background-color: #fff; + background-color: $light; + + @media (max-width: 992px) { + background-color: $white; + + &.no-scroll_mobile { + height: 100vh; + overflow: hidden; + } + } } diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss new file mode 100644 index 000000000..9a8007ef1 --- /dev/null +++ b/src/assets/scss/components/_SelectCar.scss @@ -0,0 +1,69 @@ +.select-car { + height: 100vh; + + .select-car-form { + background: $white; + height: 100%; + overflow: hidden; + + form { + height: calc(100% - 80px); + overflow-y: scroll; + overflow-x: hidden; + display: flex; + + .form-control { + border: 2px solid $light; + background: $white; + font-weight: bold; + cursor: pointer; + } + + &.show_years { + .car_list { + transform: translateX(0); + } + } + + &.show_brands { + .car_list { + transform: translateX(-100%); + } + } + + .car_list { + flex-shrink: 0; + width: 100%; + position: relative; + transition: transform .3s; + } + } + } +} + +@media (max-width: 992px) { + .select-car { + height: 100%; + width: 100%; + background: $white; + } + #car-select-col { + position: fixed; + top: 0; + height: 100vh; + width: 100%; + opacity: 0; + transform: translateY(100%); + transition: transform .3s; + } +} + +@media (min-width: 993px) { + .select-car-button, .close_select-car { + display: none !important; + } + #car-select-col { + transform: translateY(0) !important; + opacity: 1 !important; + } +} diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss index 93b0e01b1..433e6734f 100644 --- a/src/assets/scss/custom.scss +++ b/src/assets/scss/custom.scss @@ -21,3 +21,4 @@ //Custom Components CSS @import "./components/_navbar"; +@import "./components/_SelectCar"; diff --git a/src/components/Colors.vue b/src/components/Colors.vue index 03af8fbe7..00f5134d9 100644 --- a/src/components/Colors.vue +++ b/src/components/Colors.vue @@ -1,5 +1,5 @@ \ 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}`); } }