updates
This commit is contained in:
Max
parent
0c7d8254b7
commit
74ea9ad5f1
4 changed files with 114 additions and 79 deletions
34
src/App.vue
34
src/App.vue
|
|
@ -1,25 +1,7 @@
|
|||
<template>
|
||||
<div class="container-lg">
|
||||
<div class="row">
|
||||
<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">
|
||||
<div class="col">
|
||||
<SelectCar/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,26 +11,12 @@
|
|||
</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,
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -10,3 +10,7 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,11 @@
|
|||
.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;
|
||||
|
|
@ -18,26 +16,23 @@
|
|||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.show_years {
|
||||
.car_list {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.car_list, .current_car_info-text, .needed_car_info-text {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
&.show_brands {
|
||||
.car_list {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
.current_car_info {
|
||||
position: relative;
|
||||
min-height: 2.5rem;
|
||||
|
||||
.car_list {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
.current_car_info-text {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,3 +62,17 @@
|
|||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,55 @@
|
|||
<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 class="select-car-form overflow-hidden p-3 rounded">
|
||||
<div class="car_info text-center">
|
||||
<div class="current_car_info">
|
||||
<transition name="slide-fade">
|
||||
<div class="current_car_info-text" v-if="translate === 0">
|
||||
<h3>Select a year to get started</h3>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
|
||||
<h3>{{ this.year }}</h3>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
|
||||
<h3>{{ this.year }} {{ this.brand }}</h3>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
|
||||
<h3>{{ this.year }} {{ this.brand }} {{ this.model }}</h3>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="needed_car_info d-flex overflow-hidden">
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</h5>
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</h5>
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.brand }}?</h5>
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</h5>
|
||||
</div>
|
||||
</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 >
|
||||
<form class="list-view d-flex ">
|
||||
<div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="year in years" :key="year" class="mb-3">
|
||||
<input type="text" v-on:click="selectYear(year)" class="form-control" id="year" :value="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 class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="brand in brands" :key="brand" class="mb-3">
|
||||
<input type="text" v-on:click="selectBrand(brand)" class="form-control" id="brand" :value="brand" readonly >
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="model in models" :key="model" class="mb-3">
|
||||
<input type="text" v-on:click="selectModel(model)" class="form-control" id="model" :value="model" readonly >
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="style in styles" :key="style" class="mb-3">
|
||||
<input type="text" class="form-control" id="style" :value="style" readonly >
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -29,29 +64,48 @@ export default {
|
|||
name: 'SelectCar',
|
||||
data() {
|
||||
return {
|
||||
cars: [],
|
||||
years: [],
|
||||
brands: [],
|
||||
carView: 'show_years'
|
||||
models: [],
|
||||
styles: [],
|
||||
translate: 0,
|
||||
carViewTranslate: 'translateX(0%)',
|
||||
year: '',
|
||||
brand: '',
|
||||
model: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("https://mockey.qa.sagaws.net/service/'car_select'").then((response) => {
|
||||
this.cars = response.data.cars;
|
||||
console.log(this.cars);
|
||||
axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
|
||||
this.years = response.data.Result;
|
||||
console.log(this.years);
|
||||
});
|
||||
},
|
||||
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);
|
||||
translateView(forward=true) {
|
||||
this.translate = forward ? this.translate - 100 : this.translate + 100;
|
||||
this.carViewTranslate = `translateX(${this.translate}%)`;
|
||||
},
|
||||
selectBrand(brands) {
|
||||
this.brands = brands;
|
||||
this.carView = 'show_brands'
|
||||
selectYear(year) {
|
||||
this.year = year;
|
||||
axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`).then((response) => {
|
||||
this.brands = response.data.Result;
|
||||
});
|
||||
this.translateView();
|
||||
},
|
||||
selectBrand(brand) {
|
||||
this.brand = brand;
|
||||
axios.get(`https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${brand}`).then((response) => {
|
||||
this.models = response.data.Result;
|
||||
});
|
||||
this.translateView();
|
||||
},
|
||||
selectModel(model) {
|
||||
this.model = model;
|
||||
axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.brand}/model=${model}`).then((response) => {
|
||||
this.styles = response.data.Result;
|
||||
});
|
||||
this.translateView();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue