nostrmarket/static/components/customer-stall-list/customer-stall-list.html
2023-07-18 16:40:43 +02:00

57 lines
No EOL
2.1 KiB
HTML

<div class="row q-col-gutter-md">
<div v-for="stall of stalls" :key="stall.id" class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card class="card--product">
<!-- <q-img
:src="(product.images && product.images.length > 0 && product.images[0]) ? product.images[0] : '/nostrmarket/static/images/placeholder.png'"
alt="Product Image" loading="lazy" spinner-color="white" fit="contain" height="300px"></q-img> -->
<q-card-section class="q-pb-xs q-pt-md">
<div class="row no-wrap items-center">
<div class="col text-subtitle2 ellipsis-2-lines">{{ stall.name }}</div>
</div>
</q-card-section>
<q-card-section class="q-py-sm">
<div>
<span v-if="stall.currency == 'sat'">
<!-- <span class="text-h6">{{ product.price }} sats</span><q-tooltip> BTC {{ (product.price /
1e8).toFixed(8) }}</q-tooltip> -->
currency sat
</span>
<span v-else>
<span class="text-h6">currency fiat</span>
</span>
<span class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md">product count</span>
</div>
<div v-if="stall.categories" class="text-subtitle1">
<q-virtual-scroll :items="product.categories || []" virtual-scroll-horizontal>
<template v-slot="{ item, index }">
<q-chip :key="index" dense><span v-text="item"></span></q-chip>
</template>
</q-virtual-scroll>
</div>
<div v-else class="text-subtitle1">
&nbsp
</div>
<div class="text-caption text-grey ellipsis-2-lines" style="min-height: 40px">
<p v-if="stall.description">{{ stall.description }}</p>
</div>
</q-card-section>
<q-separator></q-separator>
<q-card-actions>
<div class="q-ml-auto">
<q-btn flat class="text-weight-bold text-capitalize q-ml-auto float-left" dense color="primary"
@click="$emit('change-page', 'stall', {stall: stall.id})">
Visit Stall
</q-btn>
</div>
</q-card-actions>
</q-card>
</div>
</div>