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

Button modification and car image stored in state

Browse source
This commit is contained in:
Max 2021-10-19 16:20:38 -04:00
parent c24cb57863
commit 593c5470cb
3 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/layouts/SelectCar/BaseTemplate.vue
View file

@ -3,7 +3,11 @@
<div class="select-car-form overflow-hidden p-3 rounded"> <div class="select-car-form overflow-hidden p-3 rounded">
<div class="car_info text-center"> <div class="car_info text-center">
<div class="car-image mb-3"> <div class="car-image mb-3">
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" /> <img
class="vehicle-image img-fluid"
:class="{ blur: blurImg }"
:src="carImg"
/>
</div> </div>
<div class="current_car_info mb-4"> <div class="current_car_info mb-4">
<transition appear name="fade"> <transition appear name="fade">
@ -40,9 +44,9 @@ import Button from '@/sharedcomponents/Button';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
export default { export default {
name: 'SCTemplate', name: 'BaseTemplate',
computed: { computed: {
...mapState(['slideTransition']) ...mapState(['slideTransition', 'carImg', 'blurImg'])
}, },
props: { props: {
currentCarInfo: String, currentCarInfo: String,

3
src/sharedcomponents/Button.vue
View file

@ -2,11 +2,12 @@
<button <button
type="button" type="button"
class="btn" class="btn"
v-bind:class="this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType" v-bind:class="[(this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType)]"
v-on:click="this.buttonType === 'btn-funnel' ? showLoader() : null" v-on:click="this.buttonType === 'btn-funnel' ? showLoader() : null"
> >
{{ this.buttonText }} {{ this.buttonText }}
<!-- Spinner for funnel Button --> <!-- Spinner for funnel Button -->
<div v-if="this.buttonType === 'btn-funnel' && this.isLoading" class="spinner-border spinner-border-sm text-success" role="status"> <div v-if="this.buttonType === 'btn-funnel' && this.isLoading" class="spinner-border spinner-border-sm text-success" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>

4
src/store/index.js
View file

@ -14,7 +14,9 @@ export default createStore({
year: '', year: '',
make: '', make: '',
model: '', model: '',
slideTransition: 'fade' slideTransition: 'fade',
carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
blurImg: true
}, },
mutations: { mutations: {
updateYear(state, data){ updateYear(state, data){