New UI branch for car selector
This commit is contained in:
Max
parent
41da40589e
commit
0c7d8254b7
8 changed files with 192 additions and 11 deletions
21
package-lock.json
generated
21
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
40
src/App.vue
40
src/App.vue
|
|
@ -1,26 +1,54 @@
|
|||
<template>
|
||||
<HeaderNav/>
|
||||
<div class="container">
|
||||
<div class="container-lg">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<HelloWorld msg="VueJS with Bootstrap"/>
|
||||
<div class="col-lg-8">
|
||||
<HeaderNav/>
|
||||
<div class="select-car-button d-flex justify-content-center my-4">
|
||||
<button v-on:click="slideSelectCar">Get quote + schedule</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<HelloWorld msg="VueJS with Bootstrap"/>
|
||||
</div>
|
||||
</div>
|
||||
<Colors/>
|
||||
<Colors/>
|
||||
<Colors/>
|
||||
<Colors/>
|
||||
<Colors/>
|
||||
<Colors/>
|
||||
<Colors/>
|
||||
</div>
|
||||
<div class="col" id="car-select-col">
|
||||
<SelectCar/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Colors/>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue';
|
||||
import HeaderNav from './components/HeaderNav';
|
||||
import Colors from './components/Colors';
|
||||
import SelectCar from './components/SelectCar';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld,
|
||||
HeaderNav,
|
||||
Colors
|
||||
Colors,
|
||||
SelectCar
|
||||
},
|
||||
methods: {
|
||||
slideSelectCar(){
|
||||
const selectCar = document.getElementById('car-select-col');
|
||||
selectCar.style.opacity = '1';
|
||||
selectCar.style.transform = 'translateY(0)';
|
||||
document.body.classList.add('no-scroll_mobile');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
69
src/assets/scss/components/_SelectCar.scss
Normal file
69
src/assets/scss/components/_SelectCar.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -21,3 +21,4 @@
|
|||
|
||||
//Custom Components CSS
|
||||
@import "./components/_navbar";
|
||||
@import "./components/_SelectCar";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="container my-4">
|
||||
<div class="my-4">
|
||||
<div class="row">
|
||||
<h4>Colors</h4>
|
||||
<div class="col-md-3">
|
||||
|
|
|
|||
58
src/components/SelectCar.vue
Normal file
58
src/components/SelectCar.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="select-car sticky-lg-top py-4">
|
||||
<div class="select-car-form p-3 rounded">
|
||||
<div class="close_select-car d-flex justify-content-end my-3">
|
||||
<button type="button" class="btn-close" aria-label="Close" v-on:click="closeSelectCar"></button>
|
||||
</div>
|
||||
<h3 class="d-flex justify-content-center">Select a year to get started</h3>
|
||||
<h5 class="d-flex justify-content-center">What year is your vehicle?</h5>
|
||||
<form :class="carView" class="list-view">
|
||||
<div class="car_list car_years">
|
||||
<div v-for="car in cars" :key="car.year" class="mb-3">
|
||||
<input type="text" v-on:click="selectBrand(car.brands)" class="form-control" id="year" :value="car.year" readonly >
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_brands">
|
||||
<div v-for="brand in brands" :key="brand.brand" class="mb-3">
|
||||
<input type="text" class="form-control" id="brand" :value="brand.brand" readonly >
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'SelectCar',
|
||||
data() {
|
||||
return {
|
||||
cars: [],
|
||||
brands: [],
|
||||
carView: 'show_years'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("https://mockey.qa.sagaws.net/service/'car_select'").then((response) => {
|
||||
this.cars = response.data.cars;
|
||||
console.log(this.cars);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
closeSelectCar() {
|
||||
const selectCar = document.getElementById('car-select-col');
|
||||
selectCar.style.transform = 'translateY(100%)';
|
||||
document.body.classList.remove('no-scroll_mobile');
|
||||
setTimeout(function(){
|
||||
selectCar.style.opacity = '0';
|
||||
}, 310);
|
||||
},
|
||||
selectBrand(brands) {
|
||||
this.brands = brands;
|
||||
this.carView = 'show_brands'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue