feat: more UI improvements

This commit is contained in:
Vlad Stan 2023-07-05 18:16:23 +03:00
parent 040097381b
commit 4908d3986b
3 changed files with 55 additions and 55 deletions

View file

@ -9,14 +9,9 @@
@open-checkout="openCheckout"></shopping-cart>
</q-toolbar>
-->
<div v-if="productDetail && product" class="row">
<div v-if="productDetail && product" class="row">
<div class="col-12 auto-width">
<q-card>
<q-card-section>
<product-detail :product="product" @add-to-cart="addToCart"></product-detail>
</q-card-section>
</q-card>
<product-detail :product="product" @add-to-cart="addToCart"></product-detail>
</div>
<div class="col-12 q-my-lg">

View file

@ -1,6 +1,6 @@
<div class="row q-mt-sm">
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
<div class="q-pa-md" v-if="product.images && product.images[0]">
<div class="q-pr-md" v-if="product.images && product.images[0]">
<q-carousel
swipeable
animated
@ -10,6 +10,10 @@
arrows
transition-prev="slide-right"
transition-next="slide-left"
navigation-icon="radio_button_unchecked"
control-type="regular"
control-color="secondary"
control-text-color="white"
>
<q-carousel-slide
v-for="(img, i) in product.images"
@ -26,50 +30,54 @@
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div class="row">
<div
class="col-lg-7 col-md-7 col-sm-12 col-xs-12"
:class="$q.platform.is.desktop ? '' : 'q-px-md'"
>
<div class="text-subtitle1 q-mt-sm q-pt-xs">{{ product.name }}</div>
<div v-if="product.categories" class="text-subtitle1">
<q-chip v-for="(cat, i) in product.categories" :key="i" dense
>{{cat}}</q-chip
<q-card>
<q-card-section>
<div class="row">
<div
class="col-12"
:class="$q.platform.is.desktop ? '' : 'q-px-md'"
>
<div class="text-subtitle1 q-mt-sm q-pt-xs">{{ product.name }}</div>
<div v-if="product.categories" class="text-subtitle1">
<q-chip v-for="(cat, i) in product.categories" :key="i" dense
>{{cat}}</q-chip
>
</div>
<div class="q-mt-sm text-weight-bold">{{ product.description }}</div>
<div>
<span v-if="product.currency == 'sat'">
<span class="text-h6">{{ product.price }} sats</span
><span class="q-ml-sm text-grey-6"
>BTC {{ (product.price / 1e8).toFixed(8) }}</span
>
</span>
<span v-else>
<span class="text-h6">{{ product.formatedPrice }}</span>
</span>
<span
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
>{{ product.quantity > 0 ? 'In stock.' : 'Out of stock.' }}</span
>
</div>
<div class="q-mt-md">
<q-btn
class="q-mt-md"
color="primary"
icon="shopping_cart"
label="Add to cart"
@click="$emit('add-to-cart', product)"
/>
<!-- <q-btn
class="q-mt-md q-ml-md"
color="primary"
icon="share"
label="Share"
/> -->
</div>
</div>
<!-- RATING TO BE DONE -->
</div>
<div class="q-mt-sm text-weight-bold">{{ product.description }}</div>
<div>
<span v-if="product.currency == 'sat'">
<span class="text-h6">{{ product.price }} sats</span
><span class="q-ml-sm text-grey-6"
>BTC {{ (product.price / 1e8).toFixed(8) }}</span
>
</span>
<span v-else>
<span class="text-h6">{{ product.formatedPrice }}</span>
</span>
<span
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
>{{ product.quantity > 0 ? 'In stock.' : 'Out of stock.' }}</span
>
</div>
<div class="q-mt-md">
<q-btn
class="q-mt-md"
color="primary"
icon="shopping_cart"
label="Add to cart"
@click="$emit('add-to-cart', product)"
/>
<!-- <q-btn
class="q-mt-md q-ml-md"
color="primary"
icon="share"
label="Share"
/> -->
</div>
</div>
<!-- RATING TO BE DONE -->
</div>
</q-card-section>
</q-card>
</div>
</div>