KevinMidboe/planetposen
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen.git synced 2025-10-29 17:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds to cart w/ store. Moved color classes to global.scss.

Browse Source
This commit is contained in:
Kevin
2020-07-19 16:14:02 +02:00
parent 2ce06580a8
commit b77fe8c8dc
1 changed files with 23 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/components/ui/ProductCard.vue
View File

@@ -6,7 +6,7 @@
<img :src="product.image" /> <img :src="product.image" />
</div> </div>
<div class="content" :class="color"> <div class="content" :class="'bg-' + color">
<div class="content-top"> <div class="content-top">
<router-link :to="'edit/' + product.urlSlug"> <router-link :to="'edit/' + product.urlSlug">
<h3 class="h3-alt">{{ product.name }}</h3> <h3 class="h3-alt">{{ product.name }}</h3>
@@ -21,7 +21,7 @@
</div> </div>
<div class="content-bottom-actions"> <div class="content-bottom-actions">
<Button :small="true" :color="color">Add to cart</Button> <Button :small="true" :color="color" @click="addItemToCart">Add to cart</Button>
</div> </div>
</div> </div>
</div> </div>
@@ -30,6 +30,7 @@
</template> </template>
<script> <script>
import store from '@/store'
import Button from '@/components/ui/Button'; import Button from '@/components/ui/Button';
export default { export default {
@@ -37,22 +38,29 @@ export default {
props: { props: {
product: { product: {
type: Object, type: Object,
default: null, required: true
required: false
} }
}, },
computed: { data() {
color() { return {
const r = Math.random(); color: null
}
},
beforeMount() {
const r = Math.random();
if (r < 0.25) if (r < 0.25)
return 'green'; this.color = 'green';
else if (r < 0.5) else if (r < 0.5)
return 'pink'; this.color = 'pink';
else if (r < 0.75) else if (r < 0.75)
return 'blue'; this.color = 'blue';
else else
return 'yellow'; this.color = 'yellow';
},
methods: {
addItemToCart() {
store.dispatch('cartModule/addItemToCart', this.product);
} }
} }
} }
@@ -85,26 +93,11 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 100%;
margin-top: -1px; margin-top: -1px;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
color: black; color: black;
&.pink {
background-color: var(--color-background-pink);
}
&.green {
background-color: var(--color-background-green);
}
&.yellow {
background-color: var(--color-background-yellow);
}
&.blue {
background-color: var(--color-background-blue);
}
&-top { &-top {
padding: var(--space-md); padding: var(--space-md);