From 4908d3986bc16202c27ed08969c5bd94704f853d Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Wed, 5 Jul 2023 18:16:23 +0300
Subject: [PATCH] feat: more UI improvements

---
 .../customer-stall/customer-stall.html        |  9 +-
 .../product-detail/product-detail.html        | 96 ++++++++++---------
 templates/nostrmarket/market.html             |  5 +-
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/static/components/customer-stall/customer-stall.html b/static/components/customer-stall/customer-stall.html
index c423349..411453a 100644
--- a/static/components/customer-stall/customer-stall.html
+++ b/static/components/customer-stall/customer-stall.html
@@ -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">
diff --git a/static/components/product-detail/product-detail.html b/static/components/product-detail/product-detail.html
index b9d00d4..32d0268 100644
--- a/static/components/product-detail/product-detail.html
+++ b/static/components/product-detail/product-detail.html
@@ -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>
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index 83893f9..de0cb20 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -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>