refactor css
This commit is contained in:
Max
parent
e4fd449942
commit
8e49596c5c
12 changed files with 40 additions and 291 deletions
|
|
@ -1,6 +0,0 @@
|
|||
|
||||
describe("baseTemplate.vue", () => {
|
||||
it("Is a test", () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<template>
|
||||
<div class="select-car sticky-lg-top py-4">
|
||||
<div class="select-car-form overflow-hidden p-3 rounded">
|
||||
<div class="car_info text-center">
|
||||
<div class="car-image mb-3">
|
||||
<img
|
||||
class="vehicle-image img-fluid"
|
||||
:class="{ blur: blurImg }"
|
||||
:src="carImg"
|
||||
/>
|
||||
</div>
|
||||
<div class="current_car_info">
|
||||
<transition appear name="fade">
|
||||
<div
|
||||
class="current_car_info-text"
|
||||
@click="backFunction ? backFunction() : null"
|
||||
>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="text-center text-dark fs-5 d-block">{{
|
||||
this.currentCarInfo
|
||||
}}</span>
|
||||
<span v-if="backFunction" class="back-button"><img src="@/assets/img/icons/back-forward.svg" alt="back-button"></span>
|
||||
</div>
|
||||
<span v-if="style" class="text-center text-dark fs-6 mt-2">{{
|
||||
style
|
||||
}}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<transition appear :name="slideTransition">
|
||||
<div class="needed_car_info d-flex overflow-hidden mt-4 mb-3">
|
||||
<span class="text-center fs-6 fw-bold needed_car_info-text">{{
|
||||
this.neededCarInfo
|
||||
}}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<transition appear :name="slideTransition">
|
||||
<slot></slot>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "BaseTemplate",
|
||||
computed: {
|
||||
...mapState(["slideTransition", "carImg", "blurImg", "style"]),
|
||||
},
|
||||
props: {
|
||||
currentCarInfo: String,
|
||||
neededCarInfo: String,
|
||||
backFunction: Function,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1 +0,0 @@
|
|||
test.todo('some test to be written in the future');
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<div class="list-view d-flex">
|
||||
<div class="car_list">
|
||||
<div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
|
||||
<listButton :buttonText="attritbute" @click="selectAttribute(attritbute)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listButton from "@/uxComponents/listButton/listButton";
|
||||
|
||||
export default {
|
||||
name: "CarAttributes",
|
||||
props: {
|
||||
attritbutes: Array,
|
||||
selectAttribute: Function,
|
||||
},
|
||||
components: {
|
||||
listButton,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="radio_question">
|
||||
<div class="needed_car_info d-flex mt-4 mb-3">
|
||||
<span class="text-center fs-6 fw-bold needed_car_info-text">{{ questionText }}</span>
|
||||
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{ questionText }}</span>
|
||||
</div>
|
||||
<div class="car_list">
|
||||
<div class="car_list overflow-scroll position-absolute">
|
||||
<div v-for="answer in answers" :key="answer" class="mb-2">
|
||||
<radio :text="answer" :value="answer" @click="chooseAnswer(answer)" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,9 +29,4 @@ export default {
|
|||
);
|
||||
});
|
||||
},
|
||||
disableItems(arr) {
|
||||
arr.forEach( (i) => {
|
||||
i.disabled = true
|
||||
})
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
test.todo('some test to be written in the future');
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<baseTemplate
|
||||
:currentCarInfo="year + ' ' + make + ' ' + model"
|
||||
neededCarInfo="What is your damage?"
|
||||
>
|
||||
<div class="damage-section text-center">
|
||||
<div class="choose-damage row">
|
||||
<radioCard
|
||||
radioLabel="Windshield"
|
||||
radioImage="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
groupName="damageKey"
|
||||
radioID="windshield"
|
||||
name="damage"
|
||||
@click="chooseDamage('windshield')"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Side Window"
|
||||
radioImage="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
groupName="damageKey"
|
||||
radioID="sidewindow"
|
||||
name="damage"
|
||||
@click="chooseDamage('side-window')"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Back Glass"
|
||||
radioImage="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
groupName="damageKey"
|
||||
radioID="backglass"
|
||||
name="damage"
|
||||
@click="chooseDamage('side-glass')"
|
||||
/>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="damage" class="how-bad mt-3">
|
||||
<span class="text-center fs-6 fw-bold">How bad is it?</span>
|
||||
<div class="choose-how-bad row mt-2">
|
||||
<radioCard
|
||||
radioLabel="Crack"
|
||||
radioImage="windshield-damage.svg"
|
||||
altText="Crack"
|
||||
groupName="severityKey"
|
||||
radioID="Crack"
|
||||
name="severity"
|
||||
@click="chooseSeverity(Crack)"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Chip(s)"
|
||||
radioImage="side-window-damage.svg"
|
||||
altText="Chips"
|
||||
groupName="severityKey"
|
||||
radioID="Chips"
|
||||
name="severity"
|
||||
@click="chooseSeverity(Chips)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition appear name="fade">
|
||||
<div class="next-action d-flex align-items-center justify-content-around fixed-bottom py-3 border border-top-1 border-top-light">
|
||||
<div v-on:click="goBack" class="change">
|
||||
<span class="fw-bold text-decoration-underline">Change Vehicle</span>
|
||||
</div>
|
||||
<div>
|
||||
<buttonPrimary
|
||||
buttonText="Get your estimate"
|
||||
:isDisabled="this.isDisabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</baseTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
|
||||
import radioCard from "@/uxComponents/radioCard/radioCard";
|
||||
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "SelectCar",
|
||||
computed: {
|
||||
...mapState(["year", "make", "model"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
damage: "",
|
||||
severity: "",
|
||||
isDisabled: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
chooseDamage(damage) {
|
||||
this.damage = damage;
|
||||
},
|
||||
chooseSeverity(severity){
|
||||
this.severity = severity;
|
||||
this.isDisabled = false;
|
||||
},
|
||||
goBack() {
|
||||
this.$store.state.slideTransition = "slide_reverse";
|
||||
this.$store.commit("removeStyle");
|
||||
this.$router.push(
|
||||
`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`
|
||||
);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
baseTemplate,
|
||||
radioCard,
|
||||
buttonPrimary,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -37,16 +37,13 @@ export default {
|
|||
...mapState(["slideTransition", "carImg", "blurImg", "style"]),
|
||||
},
|
||||
mounted() {
|
||||
const headerHeight = document.querySelector('.select-car-form').offsetHeight + 75;
|
||||
document.querySelector('.car_list').style.padding = `0 0 ${headerHeight}px 0`;
|
||||
|
||||
globalMethods.callHttpClient({
|
||||
method: endpoints.GetYears.method,
|
||||
endpoint: endpoints.GetYears.url,
|
||||
payload:{}
|
||||
})
|
||||
.then( (response) => {
|
||||
this.years = response.data.Result;
|
||||
this.years = response.data;
|
||||
});
|
||||
|
||||
axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import selectYear from "@/layouts/selectYear/selectYear.vue";
|
|||
import selectMake from "@/layouts/selectMake/selectMake.vue";
|
||||
import selectModel from "@/layouts/selectModel/selectModel.vue";
|
||||
import selectStyle from "@/layouts/selectStyle/selectStyle.vue";
|
||||
import selectDamage from "@/layouts/selectDamage/selectDamage.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -86,11 +85,6 @@ const routes = [
|
|||
name: "selectStyle",
|
||||
component: selectStyle,
|
||||
},
|
||||
{
|
||||
path: "/select-damage",
|
||||
name: "selectDamage",
|
||||
component: selectDamage,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { createStore } from "vuex";
|
|||
import { endpoints } from "@/constants/endpoints.js";
|
||||
import createPersistedState from "vuex-persistedstate";
|
||||
import globalMethods from "@/global-methods";
|
||||
import router from "@/router";
|
||||
|
||||
export default createStore({
|
||||
plugins: [
|
||||
|
|
@ -26,17 +25,17 @@ export default createStore({
|
|||
mutations: {
|
||||
updateYear(state, data) {
|
||||
state.year = data.year;
|
||||
state.makes = data.makes.data.Result;
|
||||
state.makes = data.makes.data;
|
||||
state.slideTransition = "slide";
|
||||
},
|
||||
updateMake(state, data) {
|
||||
state.make = data.make;
|
||||
state.models = data.models.data.Result;
|
||||
state.models = data.models.data;
|
||||
state.slideTransition = "slide";
|
||||
},
|
||||
updateModel(state, data) {
|
||||
state.model = data.model;
|
||||
state.styles = data.styles.data.Result;
|
||||
state.styles = data.styles.data;
|
||||
state.slideTransition = "slide";
|
||||
},
|
||||
updateStyle(state, data) {
|
||||
|
|
|
|||
|
|
@ -1,66 +1,41 @@
|
|||
// SelectCar styles
|
||||
.select-car {
|
||||
height: calc(100vh - 1rem);
|
||||
|
||||
.car_list {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
// Height will be determined by overall height of content above list
|
||||
height: calc(100% - 100px);
|
||||
width: calc(100% - 1rem);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.current_car_info-text, .needed_car_info-text {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
transition: transform .3s;
|
||||
}
|
||||
|
||||
.current_car_info {
|
||||
position: relative;
|
||||
min-height: 2.5rem;
|
||||
|
||||
.current_car_info-text {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-left: 5px;
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(30vw);
|
||||
}
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: all .4s;
|
||||
}
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30vw);
|
||||
}
|
||||
|
||||
.slide_reverse-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30vw);
|
||||
}
|
||||
.slide_reverse-enter-active, .slide_reverse-leave-active {
|
||||
transition: all .4s;
|
||||
}
|
||||
.slide_reverse-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30vw);
|
||||
}
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: all .5s ease;
|
||||
}
|
||||
// Animations
|
||||
.slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(30vw);
|
||||
}
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: all .4s;
|
||||
}
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30vw);
|
||||
}
|
||||
|
||||
.slide_reverse-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30vw);
|
||||
}
|
||||
.slide_reverse-enter-active, .slide_reverse-leave-active {
|
||||
transition: all .4s;
|
||||
}
|
||||
.slide_reverse-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30vw);
|
||||
}
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: all .5s ease;
|
||||
}
|
||||
Loading…
Reference in a new issue