feat: more UI improvements
This commit is contained in:
Vlad Stan
parent
040097381b
commit
4908d3986b
3 changed files with 55 additions and 55 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -161,9 +161,6 @@
|
|||
<div class="col-lg-8 col-md-10 col-sm-12 auto-width">
|
||||
|
||||
<div class="row q-mb-md">
|
||||
<!-- <q-toolbar class="col-2">
|
||||
<q-btn flat round dense icon="menu" @click="drawer = !drawer"></q-btn>
|
||||
</q-toolbar> -->
|
||||
<q-toolbar class="col-lg-8 col-md-7 col-sm-6 auto-width">
|
||||
<q-input class="rounded-pill" style="width:100%;" rounded outlined clearable v-model.trim="searchText"
|
||||
label="Filter products">
|
||||
|
|
@ -197,7 +194,7 @@
|
|||
<q-breadcrumbs-el :label="'Market'" icon="home" @click="navigateTo('market')"
|
||||
class="cursor-pointer"></q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el v-if="activeStall" :label="stallName" @click="navigateTo('stall', {stall: activeStall})"
|
||||
icon="widgets" class="cursor-pointer"></q-breadcrumbs-el>
|
||||
icon="storefront" class="cursor-pointer"></q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el v-if="activeProduct" :label="productName"
|
||||
@click="navigateTo('product', {stall: activeStall, product: activeProduct})" class="cursor-pointer"
|
||||
icon="widgets"></q-breadcrumbs-el>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue