jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changing list style

Browse source
This commit is contained in:
Max 2021-11-05 10:22:50 -04:00
parent 2db9ccfdf0
commit 66ee43e269
3 changed files with 46 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/commonComponents/radioQuestion/radioQuestion.vue
View file

@ -3,13 +3,11 @@
<div class="needed_car_info d-flex mt-4 mb-3"> <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 needed_car_info-text">{{ questionText }}</span>
</div> </div>
<div class="list-view d-flex"> <div class="car_list">
<div class="car_list"> <div v-for="answer in answers" :key="answer" class="mb-2">
<div v-for="answer in answers" :key="answer" class="mb-2"> <radio :text="answer" :value="answer" />
<radio :text="answer" :value="answer" /> </div>
</div> </div>
</div>
</div>
</div> </div>
</template> </template>

58
src/layouts/selectYear/selectYear.vue
View file

@ -1,15 +1,13 @@
<template> <template>
<div class="select-car sticky-lg-top py-4"> <div class="select-car overflow-hidden">
<div class="select-car-form overflow-hidden p-3 rounded"> <div class="select-car-form rounded text-center">
<div class="car_info text-center"> <Header
<Header :text="pageHeader.Text"
text="Select a year to get started" />
/> <radioQuestion
<radioQuestion :questionText="radioQuestion.Question"
questionText="What year is your vehicle?" :answers="this.years"
:answers="this.years" />
/>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -26,6 +24,8 @@ export default {
data() { data() {
return { return {
years: [], years: [],
pageHeader: {},
radioQuestion: {}
}; };
}, },
mounted() { mounted() {
@ -38,25 +38,23 @@ export default {
this.years = response.data.Result; this.years = response.data.Result;
}); });
// Sample Call to Mockey to represent real data being sent back from the API, and how the modles are supposed to axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => {
// be prosessed and passed to child components. response.data.Result.forEach((m) => {
axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => { switch (m.Type) {
response.data.Result.forEach((m) => { case this.widgetNames.PAGE_HEADING_WIDGET: {
switch (m.Type) { this.pageHeader = m.Model;
case this.widgetNames.PAGE_HEADING_WIDGET: { break;
this.pageHeader = m.Model; }
break; case this.widgetNames.RADIO_QUESTION_WIDGET: {
} this.radioQuestion = m.Model;
case this.widgetNames.RADIO_QUESTION_WIDGET: { break;
this.radioQuestion = m.Model; }
break; default: {
} break;
default: { }
break; }
} })
} });
})
});
}, },
methods: { methods: {
selectYear(year) { selectYear(year) {

29
src/styles/commonStyles.scss
View file

@ -146,24 +146,21 @@ caption {
// SelectCar styles // SelectCar styles
.select-car { .select-car {
height: 100vh; height: calc(100vh - 1rem);
.select-car-form, .car_info, .radio_question { .car_list {
background: $white; position: absolute;
height: 100%; height: calc(100% - 1rem);
width: calc(100% - 1rem);
overflow-y: scroll;
overflow-x: hidden;
}
.list-view { .current_car_info-text, .needed_car_info-text {
height: calc(100% - 230px); flex-shrink: 0;
overflow-y: scroll; width: 100%;
overflow-x: hidden; position: relative;
} transition: transform .3s;
.car_list, .current_car_info-text, .needed_car_info-text {
flex-shrink: 0;
width: 100%;
position: relative;
transition: transform .3s;
}
} }
.current_car_info { .current_car_info {