lnbits-exts/nostrmarket
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: horizontal categories

Browse source
This commit is contained in:
Vlad Stan 2023-07-05 17:43:49 +03:00
parent 8d5aa813d3
commit ca466937e6
1 changed files with 21 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

69
static/components/product-card/product-card.html
View file

@ -1,30 +1,15 @@
<q-card class="card--product"> <q-card class="card--product">
<q-img <q-img
:src="(product.images && product.images.length > 0 && product.images[0]) ? product.images[0] : '/nostrmarket/static/images/placeholder.png'" :src="(product.images && product.images.length > 0 && product.images[0]) ? product.images[0] : '/nostrmarket/static/images/placeholder.png'"
alt="Product Image" alt="Product Image" loading="lazy" spinner-color="white" fit="contain" height="300px"></q-img>
loading="lazy"
spinner-color="white"
fit="contain"
height="300px"
></q-img>
<q-card-section class="q-pb-xs q-pt-md"> <q-card-section class="q-pb-xs q-pt-md">
<q-btn <q-btn v-if="isStall" round :disabled="product.quantity < 1" color="primary" icon="shopping_cart" size="lg" style="
v-if="isStall"
round
:disabled="product.quantity < 1"
color="primary"
icon="shopping_cart"
size="lg"
style="
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
" " @click="$emit('add-to-cart', product)"><q-tooltip> Add to cart </q-tooltip></q-btn>
@click="$emit('add-to-cart', product)"
><q-tooltip> Add to cart </q-tooltip></q-btn
>
<div class="row no-wrap items-center"> <div class="row no-wrap items-center">
<div class="col text-subtitle2 ellipsis-2-lines">{{ product.name }}</div> <div class="col text-subtitle2 ellipsis-2-lines">{{ product.name }}</div>
</div> </div>
@ -36,27 +21,26 @@
<div> <div>
<div class="text-caption text-weight-bolder">{{ product.stallName }}</div> <div class="text-caption text-weight-bolder">{{ product.stallName }}</div>
<span v-if="product.currency == 'sat'"> <span v-if="product.currency == 'sat'">
<span class="text-h6">{{ product.price }} sats</span <span class="text-h6">{{ product.price }} sats</span><span class="q-ml-sm text-grey-6">BTC {{ (product.price /
><span class="q-ml-sm text-grey-6" 1e8).toFixed(8) }}</span>
>BTC {{ (product.price / 1e8).toFixed(8) }}</span
>
</span> </span>
<span v-else> <span v-else>
<span class="text-h6">{{ product.formatedPrice }}</span> <span class="text-h6">{{ product.formatedPrice }}</span>
</span> </span>
<span class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md" <span class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md">{{ product.quantity }} left</span>
>{{ product.quantity }} left</span
>
</div> </div>
<div v-if="product.categories" class="text-subtitle1"> <div v-if="product.categories" class="text-subtitle1">
<q-chip v-for="(cat, i) in product.categories" :key="i" dense <q-virtual-scroll :items="product.categories || []" virtual-scroll-horizontal>
>{{cat}}</q-chip <template v-slot="{ item, index }">
> <q-chip :key="index" dense><span v-text="item"></span></q-chip>
</template>
</q-virtual-scroll>
</div> </div>
<div <div v-else class="text-subtitle1">
class="text-caption text-grey ellipsis-2-lines" &nbsp
style="min-height: 40px" </div>
>
<div class="text-caption text-grey ellipsis-2-lines" style="min-height: 40px">
<p v-if="product.description">{{ product.description }}</p> <p v-if="product.description">{{ product.description }}</p>
</div> </div>
</q-card-section> </q-card-section>
@ -67,25 +51,14 @@
<span>Stall: {{ product.stallName }}</span> <span>Stall: {{ product.stallName }}</span>
<span>{{ $parent.activeStall }}</span> <span>{{ $parent.activeStall }}</span>
<div class="q-ml-auto"> <div class="q-ml-auto">
<q-btn <q-btn flat class="text-weight-bold text-capitalize q-ml-auto" dense color="primary"
flat @click="$emit('change-page', 'stall', {stall: product.stall_id, product: product.id})">
class="text-weight-bold text-capitalize q-ml-auto"
dense
color="primary"
@click="$emit('change-page', 'stall', {stall: product.stall_id, product: product.id})"
>
View details View details
</q-btn> </q-btn>
<q-btn <q-btn v-if="!isStall" flat class="text-weight-bold text-capitalize q-ml-auto" dense color="primary"
v-if="!isStall" @click="$emit('change-page', 'stall', {stall: product.stall_id})">
flat
class="text-weight-bold text-capitalize q-ml-auto"
dense
color="primary"
@click="$emit('change-page', 'stall', {stall: product.stall_id})"
>
Visit Stall Visit Stall
</q-btn> </q-btn>
</div> </div>
</q-card-actions> </q-card-actions>
</q-card> </q-card>