Add a banner header (props to JoshuaM) (#41)

* add banner header

* init naddr

* add type to place order content obj

* add content to config

* naddr working, still WIP

* add banner and UI customization

* add banner header

* init naddr

* add type to place order content obj

* add content to config

* naddr working, still WIP

* add banner and UI customization

* add market name to stall page breadcrumbs

* Add usage description to readme

static/components/customer-market/customer-market.html

@@ -22,44 +22,27 @@
           </div>
         </q-card-section>
         <q-card-section>
-          <q-input
-            class="q-ml-md"
-            standout
-            square
-            dense
-            outlined
-            clearable
-            v-model.trim="search"
-            label="Search products"
-            @keydown.enter="searchProducts"
-            hint="Enter search terms separated by spaces"
-          >
+          <q-input class="q-ml-md" standout square dense outlined clearable v-model.trim="search"
+            label="Search products" @keydown.enter="searchProducts" hint="Enter search terms separated by spaces">
             <template v-slot:after>
-              <q-btn
-                dense
-                flat
-                icon="search"
-                label="Search"
-                @click="searchProducts"
-              />
+              <q-btn dense flat icon="search" label="Search" @click="searchProducts" />
             </template>
           </q-input>
         </q-card-section>
       </q-card>
     </div>
   </div>
+  <q-banner v-if="styles?.ui?.banner" class="row q-pa-none q-mb-md">
+    <q-img :src="styles.ui.banner" style="width: 100%; height: 250px" cover></q-img>
+  </q-banner>
   <q-toolbar>
     <q-breadcrumbs>
-      <q-breadcrumbs-el label="Market" icon="home"></q-breadcrumbs-el>
+      <q-breadcrumbs-el :label="styles.name ?? 'Market'" icon="home"></q-breadcrumbs-el>
     </q-breadcrumbs>
   </q-toolbar>
   <div class="row q-col-gutter-md">
-    <div
-      class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
-      v-for="(item, idx) in products"
-      :key="idx"
-    >
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
       <product-card :product="item" @change-page="changePageM"></product-card>
     </div>
   </div>
-</div>
+</div>

static/components/customer-market/customer-market.js

@@ -10,7 +10,8 @@ async function customerMarket(path) {
       'search-nostr',
       'relays',
       'update-products',
-      'update-stalls'
+      'update-stalls',
+      'styles'
     ],
     data: function () {
       return {