From a65f3cdd96a451d71bfb868e86d1d0c6247750b2 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 18 Jul 2023 11:27:31 +0300
Subject: [PATCH] feat: UI improvements

---
 static/js/market.js               |  3 ++
 templates/nostrmarket/market.html | 57 ++++++++++++++++++-------------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/static/js/market.js b/static/js/market.js
index 55e0218..f56abbb 100644
--- a/static/js/market.js
+++ b/static/js/market.js
@@ -575,6 +575,9 @@ const market = async () => {
         window.history.pushState({}, '', url)
         // this.activePage = page
       },
+      copyUrl: function () {
+        this.copyText(window.location)
+      },
       copyText: function (text) {
         var notify = this.$q.notify
         Quasar.utils.copyToClipboard(text).then(function () {
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index 1e72809..efd0043 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -73,35 +73,46 @@
       <div class="col-lg-2 col-md-1 col-sm-0"></div>
       <div class="col-lg-8 col-md-10 col-sm-12 auto-width">
         <q-banner class="row q-pa-none q-mb-lg gt-sm shadow-2">
-          <q-img v-if="bannerImage" :src="bannerImage" class="rounded-borders"
-            style="width: 100%; height: 250px" cover>
+          <q-img v-if="bannerImage" :src="bannerImage" class="rounded-borders" style="width: 100%; height: 250px" cover>
             <div v-if="config?.opts?.about" class="absolute-bottom text-subtitle1 text-center">
               <span v-text="config.opts.about"></span>
             </div>
           </q-img>
         </q-banner>
-        <div>
-          <q-breadcrumbs class="cursor">
-            <q-breadcrumbs-el :label="config?.opts?.name || 'Market'" icon="home" @click="navigateTo('market')" class="cursor-pointer">
-              <q-checkbox v-model="groupByStall" v-if="activePage === 'market'" class="q-pl-md float-right" size="xs"
-                val="xs" label="Group by stalls"></q-checkbox>
 
-            </q-breadcrumbs-el>
-            <q-breadcrumbs-el v-if="activePage === 'customer-stall'" :label="stallName"
-              @click="navigateTo('stall', {stall: activeStall})" icon="storefront"
-              class="cursor-pointer"></q-breadcrumbs-el>
-            <q-breadcrumbs-el v-if="activePage === 'customer-stall' && activeProduct" :label="productName"
-              class="cursor-pointer" icon="widgets"></q-breadcrumbs-el>
-            <q-breadcrumbs-el v-if="activePage === 'shopping-cart-list'" label="Shoping Cart"
-              icon="shopping_cart"></q-breadcrumbs-el>
-            <q-breadcrumbs-el v-if="activePage === 'customer-orders'" label="Orders"
-              icon="receipt_long"></q-breadcrumbs-el>
-            <q-breadcrumbs-el v-if="activePage === 'market-config'" label="Settings" icon="settings"></q-breadcrumbs-el>
-            <q-breadcrumbs-el v-if="activePage === 'user-config'" label="User Config"
-              icon="perm_identity"></q-breadcrumbs-el>
-            <q-breadcrumbs-el v-if="activePage === 'user-chat'" label="User Chat" icon="chat"></q-breadcrumbs-el>
-          </q-breadcrumbs>
-        </div>
+      </div>
+      <div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>
+    </div>
+
+    <div class="row q-mb-sm">
+      <div class="col-lg-2 col-md-1 col-sm-0"></div>
+      <div class="col-lg-7 col-md-9 col-sm-12 auto-width">
+        <q-breadcrumbs class="cursor q-mt-sm">
+          <q-breadcrumbs-el :label="config?.opts?.name || 'Market'" icon="home" @click="navigateTo('market')"
+            class="cursor-pointer auto-width">
+            <q-checkbox v-model="groupByStall" v-if="activePage === 'market'" class="q-pl-md float-right" size="xs"
+              val="xs" label="Group by stalls"></q-checkbox>
+
+          </q-breadcrumbs-el>
+          <q-breadcrumbs-el v-if="activePage === 'customer-stall'" :label="stallName"
+            @click="navigateTo('stall', {stall: activeStall})" icon="storefront"
+            class="cursor-pointer"></q-breadcrumbs-el>
+          <q-breadcrumbs-el v-if="activePage === 'customer-stall' && activeProduct" :label="productName"
+            class="cursor-pointer" icon="widgets"></q-breadcrumbs-el>
+          <q-breadcrumbs-el v-if="activePage === 'shopping-cart-list'" label="Shoping Cart"
+            icon="shopping_cart"></q-breadcrumbs-el>
+          <q-breadcrumbs-el v-if="activePage === 'customer-orders'" label="Orders"
+            icon="receipt_long"></q-breadcrumbs-el>
+          <q-breadcrumbs-el v-if="activePage === 'market-config'" label="Settings" icon="settings"></q-breadcrumbs-el>
+          <q-breadcrumbs-el v-if="activePage === 'user-config'" label="User Config"
+            icon="perm_identity"></q-breadcrumbs-el>
+          <q-breadcrumbs-el v-if="activePage === 'user-chat'" label="User Chat" icon="chat"></q-breadcrumbs-el>
+        </q-breadcrumbs>
+
+
+      </div>
+      <div class="col-lg-1 col-md-1 col-sm-0 gt-sm auto-width">
+        <q-btn v-if="activePage !== 'market'" flat color="grey" icon="content_copy" @click="copyUrl()" class="q-ml-sm float-right"></q-btn>
       </div>
       <div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>
     </div>