From a5cdd69dbe990be5df2041e6e19a48b4173429f0 Mon Sep 17 00:00:00 2001
From: ben <ben@arc.wales>
Date: Fri, 6 Jan 2023 17:46:41 +0000
Subject: [PATCH 1/3] Moved sub-menu for mobile

---
 .../example/templates/example/index.html      | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/lnbits/extensions/example/templates/example/index.html b/lnbits/extensions/example/templates/example/index.html
index 64a4d3dde..47319ac6e 100644
--- a/lnbits/extensions/example/templates/example/index.html
+++ b/lnbits/extensions/example/templates/example/index.html
@@ -79,9 +79,9 @@
           <div class="text-h6">Frameworks</div>
 
           <div>
-            <q-splitter v-model="splitterModel">
-              <template v-slot:before>
-                <q-tabs v-model="framworktab" vertical>
+            
+              <template >
+                <q-tabs align="left" v-model="framworktab" inline-label>
                   <q-tab name="fastapi"
                     ><img src="./static/fastapi-framework.png" />FASTAPI</q-tab
                   >
@@ -94,7 +94,7 @@
                 </q-tabs>
               </template>
 
-              <template v-slot:after>
+              <template>
                 <q-tab-panels v-model="framworktab">
                   <q-tab-panel name="fastapi" class="text-body1">
                     <a href="https://fastapi.tiangolo.com/"
@@ -122,9 +122,9 @@
 
                     <code class="bg-grey-3 text-black">views.py</code> is used
                     for setting application routes:
-                    <img src="./static/fastapi-example.png" />
+                    <img src="./static/fastapi-example.png" /><br /><br />
                     <code class="bg-grey-3 text-black">views_api.py</code> is
-                    used for setting application API endpoints:
+                    used for setting application API endpoints:<br />
                     <img src="./static/fastapi-example2.png" />
                   </q-tab-panel>
 
@@ -216,22 +216,22 @@
                   </q-tab-panel>
                 </q-tab-panels>
               </template>
-            </q-splitter>
+            
           </div>
         </q-tab-panel>
 
         <q-tab-panel name="tools">
           <div class="text-h6">Useful Tools</div>
           <div>
-            <q-splitter v-model="splitterModel">
-              <template v-slot:before>
-                <q-tabs v-model="usefultab" vertical>
+           
+              <template>
+                <q-tabs v-model="usefultab" align="left">
                   <q-tab name="magicalg">MAGICAL G</q-tab>
                   <q-tab name="exchange">EXCHANGE RATES</q-tab>
                 </q-tabs>
               </template>
 
-              <template v-slot:after>
+              <template>
                 <q-tab-panels v-model="usefultab">
                   <q-tab-panel name="magicalg" class="text-body1">
                     <div class="text-h5 q-mb-md">Magical G</div>
@@ -267,7 +267,7 @@
                   </q-tab-panel>
                 </q-tab-panels>
               </template>
-            </q-splitter>
+           
           </div>
         </q-tab-panel>
 

From df5b9de3938d333cc822c6816d75992c8e4e905f Mon Sep 17 00:00:00 2001
From: ben <ben@arc.wales>
Date: Fri, 6 Jan 2023 17:48:14 +0000
Subject: [PATCH 2/3] format

---
 .../example/templates/example/index.html      | 333 +++++++++---------
 1 file changed, 161 insertions(+), 172 deletions(-)

diff --git a/lnbits/extensions/example/templates/example/index.html b/lnbits/extensions/example/templates/example/index.html
index 47319ac6e..b1d072584 100644
--- a/lnbits/extensions/example/templates/example/index.html
+++ b/lnbits/extensions/example/templates/example/index.html
@@ -79,195 +79,184 @@
           <div class="text-h6">Frameworks</div>
 
           <div>
-            
-              <template >
-                <q-tabs align="left" v-model="framworktab" inline-label>
-                  <q-tab name="fastapi"
-                    ><img src="./static/fastapi-framework.png" />FASTAPI</q-tab
-                  >
-                  <q-tab name="quasar"
-                    ><img src="./static/quasar-framework.png" />QUASAR</q-tab
-                  >
-                  <q-tab name="vuejs"
-                    ><img src="./static/vuejs-framework.png" />VUE-JS</q-tab
-                  >
-                </q-tabs>
-              </template>
+            <template>
+              <q-tabs align="left" v-model="framworktab" inline-label>
+                <q-tab name="fastapi"
+                  ><img src="./static/fastapi-framework.png" />FASTAPI</q-tab
+                >
+                <q-tab name="quasar"
+                  ><img src="./static/quasar-framework.png" />QUASAR</q-tab
+                >
+                <q-tab name="vuejs"
+                  ><img src="./static/vuejs-framework.png" />VUE-JS</q-tab
+                >
+              </q-tabs>
+            </template>
 
-              <template>
-                <q-tab-panels v-model="framworktab">
-                  <q-tab-panel name="fastapi" class="text-body1">
-                    <a href="https://fastapi.tiangolo.com/"
-                      ><img src="./static/fastapilogo.png"
-                    /></a>
-                    <p>
-                      LNbits API is built using
-                      <a
-                        href="https://fastapi.tiangolo.com/"
-                        class="text-primary"
-                        >FastAPI</a
-                      >, a high-performance, easy to code API framework.<br /><br />
-                      FastAPI auto-generates swagger UI docs for testing
-                      endpoints <a class="text-primary" href="../docs">/docs</a>
-                    </p>
+            <template>
+              <q-tab-panels v-model="framworktab">
+                <q-tab-panel name="fastapi" class="text-body1">
+                  <a href="https://fastapi.tiangolo.com/"
+                    ><img src="./static/fastapilogo.png"
+                  /></a>
+                  <p>
+                    LNbits API is built using
+                    <a href="https://fastapi.tiangolo.com/" class="text-primary"
+                      >FastAPI</a
+                    >, a high-performance, easy to code API framework.<br /><br />
+                    FastAPI auto-generates swagger UI docs for testing endpoints
+                    <a class="text-primary" href="../docs">/docs</a>
+                  </p>
 
-                    <i>
-                      <strong>TIP:</strong> Although it is possible for
-                      extensions to use other extensions API endpoints (such as
-                      with the Satspay and Onchain extension), ideally an
-                      extension should only use LNbits
-                      <a href="../docs#/default" class="text-primary">core</a>
-                      endpoints. </i
-                    ><br /><br />
+                  <i>
+                    <strong>TIP:</strong> Although it is possible for extensions
+                    to use other extensions API endpoints (such as with the
+                    Satspay and Onchain extension), ideally an extension should
+                    only use LNbits
+                    <a href="../docs#/default" class="text-primary">core</a>
+                    endpoints. </i
+                  ><br /><br />
 
-                    <code class="bg-grey-3 text-black">views.py</code> is used
-                    for setting application routes:
-                    <img src="./static/fastapi-example.png" /><br /><br />
-                    <code class="bg-grey-3 text-black">views_api.py</code> is
-                    used for setting application API endpoints:<br />
-                    <img src="./static/fastapi-example2.png" />
-                  </q-tab-panel>
+                  <code class="bg-grey-3 text-black">views.py</code> is used for
+                  setting application routes:
+                  <img src="./static/fastapi-example.png" /><br /><br />
+                  <code class="bg-grey-3 text-black">views_api.py</code> is used
+                  for setting application API endpoints:<br />
+                  <img src="./static/fastapi-example2.png" />
+                </q-tab-panel>
 
-                  <q-tab-panel name="quasar" class="text-body1">
-                    <a href="https://quasar.dev/"
-                      ><img src="./static/quasarlogo.png"
-                    /></a>
-                    <p>
-                      LNbits uses
-                      <a class="text-primary" href="https://quasar.dev/"
-                        >Quasar Framework</a
-                      >
-                      for frontend deisgn elements. Quasar Framework is an
-                      open-source Vue.js based framework for building apps.
-                    </p>
-
-                    <i>
-                      <strong>TIP:</strong> Look through
-                      <code class="bg-grey-3 text-black">/template</code> files
-                      in other extensions for examples of Quasar elements being
-                      used. </i
-                    ><br /><br />
-
-                    <p>
-                      In the below example we make a dialogue popup box (box can
-                      be triggered
-                      <q-btn
-                        size="sm"
-                        color="primary"
-                        @click="thingDialog.show = true"
-                        >here</q-btn
-                      >): <q-tooltip>Exmple of a tooltip!</q-tooltip>
-                    </p>
-                    <img src="./static/quasar-example.png" /><br /><br />
-                    <div class="text-h6">Useful links:</div>
-                    <q-btn
-                      color="primary"
-                      type="a"
-                      href="https://quasar.dev/style/"
-                      >Style (typography, spacing, etc)</q-btn
+                <q-tab-panel name="quasar" class="text-body1">
+                  <a href="https://quasar.dev/"
+                    ><img src="./static/quasarlogo.png"
+                  /></a>
+                  <p>
+                    LNbits uses
+                    <a class="text-primary" href="https://quasar.dev/"
+                      >Quasar Framework</a
                     >
-                    <q-btn
-                      color="primary"
-                      type="a"
-                      href="https://quasar.dev/vue-components/"
-                      >Genral components (cards, buttons, popup dialogs,
-                      etc)</q-btn
-                    >
-                    <q-btn
-                      color="primary"
-                      type="a"
-                      href="https://quasar.dev/layout/grid"
-                      >Layouts (rows/columns, flexbox)</q-btn
-                    >
-                  </q-tab-panel>
+                    for frontend deisgn elements. Quasar Framework is an
+                    open-source Vue.js based framework for building apps.
+                  </p>
 
-                  <q-tab-panel
-                    v-if="someBool == true"
-                    name="vuejs"
-                    class="text-body1"
+                  <i>
+                    <strong>TIP:</strong> Look through
+                    <code class="bg-grey-3 text-black">/template</code> files in
+                    other extensions for examples of Quasar elements being used. </i
+                  ><br /><br />
+
+                  <p>
+                    In the below example we make a dialogue popup box (box can
+                    be triggered
+                    <q-btn
+                      size="sm"
+                      color="primary"
+                      @click="thingDialog.show = true"
+                      >here</q-btn
+                    >): <q-tooltip>Exmple of a tooltip!</q-tooltip>
+                  </p>
+                  <img src="./static/quasar-example.png" /><br /><br />
+                  <div class="text-h6">Useful links:</div>
+                  <q-btn
+                    color="primary"
+                    type="a"
+                    href="https://quasar.dev/style/"
+                    >Style (typography, spacing, etc)</q-btn
                   >
-                    <a href="https://vuejs.org/">
-                      <img src="./static/vuejslogo.png"
-                    /></a>
-                    <p>
-                      LNbits uses
-                      <a href="https://vuejs.org/" class="text-primary">Vue</a>
-                      components for best-in-class high-performance and
-                      responsive performance.
-                    </p>
+                  <q-btn
+                    color="primary"
+                    type="a"
+                    href="https://quasar.dev/vue-components/"
+                    >Genral components (cards, buttons, popup dialogs,
+                    etc)</q-btn
+                  >
+                  <q-btn
+                    color="primary"
+                    type="a"
+                    href="https://quasar.dev/layout/grid"
+                    >Layouts (rows/columns, flexbox)</q-btn
+                  >
+                </q-tab-panel>
 
-                    <p>
-                      Typical example of Vue components in a frontend script:
-                    </p>
-                    <img
-                      src="./static/script-example.png"
-                      style="max-width: 800px"
-                    /><br /><br />
+                <q-tab-panel
+                  v-if="someBool == true"
+                  name="vuejs"
+                  class="text-body1"
+                >
+                  <a href="https://vuejs.org/">
+                    <img src="./static/vuejslogo.png"
+                  /></a>
+                  <p>
+                    LNbits uses
+                    <a href="https://vuejs.org/" class="text-primary">Vue</a>
+                    components for best-in-class high-performance and responsive
+                    performance.
+                  </p>
 
-                    <p>
-                      In a page body, models can be called. <br />Content can be
-                      conditionally rendered using Vue's
-                      <code class="bg-grey-3 text-black">v-if</code>:
-                    </p>
-                    <img
-                      src="./static/vif-example.png"
-                      style="max-width: 800px"
-                    />
-                  </q-tab-panel>
-                </q-tab-panels>
-              </template>
-            
+                  <p>Typical example of Vue components in a frontend script:</p>
+                  <img
+                    src="./static/script-example.png"
+                    style="max-width: 800px"
+                  /><br /><br />
+
+                  <p>
+                    In a page body, models can be called. <br />Content can be
+                    conditionally rendered using Vue's
+                    <code class="bg-grey-3 text-black">v-if</code>:
+                  </p>
+                  <img
+                    src="./static/vif-example.png"
+                    style="max-width: 800px"
+                  />
+                </q-tab-panel>
+              </q-tab-panels>
+            </template>
           </div>
         </q-tab-panel>
 
         <q-tab-panel name="tools">
           <div class="text-h6">Useful Tools</div>
           <div>
-           
-              <template>
-                <q-tabs v-model="usefultab" align="left">
-                  <q-tab name="magicalg">MAGICAL G</q-tab>
-                  <q-tab name="exchange">EXCHANGE RATES</q-tab>
-                </q-tabs>
-              </template>
+            <template>
+              <q-tabs v-model="usefultab" align="left">
+                <q-tab name="magicalg">MAGICAL G</q-tab>
+                <q-tab name="exchange">EXCHANGE RATES</q-tab>
+              </q-tabs>
+            </template>
 
-              <template>
-                <q-tab-panels v-model="usefultab">
-                  <q-tab-panel name="magicalg" class="text-body1">
-                    <div class="text-h5 q-mb-md">Magical G</div>
-                    <p>
-                      A magical "g" (ie
-                      <code class="bg-grey-3 text-black"
-                        >this.g.user.wallets[0].inkey</code
-                      >) is always available, with info about the user, wallets
-                      and extensions:
-                    </p>
-                    <code class="text-caption"
-                      >{% raw %}{{ g }}{% endraw %}</code
-                    >
-                  </q-tab-panel>
-                  <q-tab-panel name="exchange">
-                    <div class="text-h6">Exchange rates</div>
-                    <p>
-                      LNbits includes a handy
-                      <a
-                        href="../docs#/default/api_fiat_as_sats_api_v1_conversion_post"
-                        class="text-primary"
-                        >exchange rate function</a
-                      >, that streams rates from 6 different sources.
-                    </p>
-                    Exchange rate API:<br />
-                    <img src="./static/conversion-example.png" /><br /><br />
-                    Exchange rate functions, included using
+            <template>
+              <q-tab-panels v-model="usefultab">
+                <q-tab-panel name="magicalg" class="text-body1">
+                  <div class="text-h5 q-mb-md">Magical G</div>
+                  <p>
+                    A magical "g" (ie
                     <code class="bg-grey-3 text-black"
-                      >from lnbits.utils.exchange_rates import
-                      fiat_amount_as_satoshis</code
-                    >:<br />
-                    <img src="./static/conversion-example2.png" />
-                  </q-tab-panel>
-                </q-tab-panels>
-              </template>
-           
+                      >this.g.user.wallets[0].inkey</code
+                    >) is always available, with info about the user, wallets
+                    and extensions:
+                  </p>
+                  <code class="text-caption">{% raw %}{{ g }}{% endraw %}</code>
+                </q-tab-panel>
+                <q-tab-panel name="exchange">
+                  <div class="text-h6">Exchange rates</div>
+                  <p>
+                    LNbits includes a handy
+                    <a
+                      href="../docs#/default/api_fiat_as_sats_api_v1_conversion_post"
+                      class="text-primary"
+                      >exchange rate function</a
+                    >, that streams rates from 6 different sources.
+                  </p>
+                  Exchange rate API:<br />
+                  <img src="./static/conversion-example.png" /><br /><br />
+                  Exchange rate functions, included using
+                  <code class="bg-grey-3 text-black"
+                    >from lnbits.utils.exchange_rates import
+                    fiat_amount_as_satoshis</code
+                  >:<br />
+                  <img src="./static/conversion-example2.png" />
+                </q-tab-panel>
+              </q-tab-panels>
+            </template>
           </div>
         </q-tab-panel>
 

From 45315084eefc89e1b4dec8991211c805ee9d93ff Mon Sep 17 00:00:00 2001
From: ben <ben@arc.wales>
Date: Fri, 6 Jan 2023 17:54:04 +0000
Subject: [PATCH 3/3] changed menu name

---
 lnbits/extensions/example/templates/example/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lnbits/extensions/example/templates/example/index.html b/lnbits/extensions/example/templates/example/index.html
index b1d072584..03f66b5f7 100644
--- a/lnbits/extensions/example/templates/example/index.html
+++ b/lnbits/extensions/example/templates/example/index.html
@@ -67,7 +67,7 @@
       >
         <q-tab name="frameworks" label="Frameworks"></q-tab>
         <q-tab name="tools" label="Useful Tools"></q-tab>
-        <q-tab name="structure" label="File Structure"></q-tab>
+        <q-tab name="goodpractice" label="Good Practice"></q-tab>
         <q-tab name="enviroment" label="Dev Enviroment"></q-tab>
         <q-tab name="submission" label="Submisson to LNbits repo"></q-tab>
       </q-tabs>
@@ -260,8 +260,8 @@
           </div>
         </q-tab-panel>
 
-        <q-tab-panel name="structure">
-          <div class="text-h6">File Structure</div>
+        <q-tab-panel name="goodpractice">
+          <div class="text-h6">Good Practice</div>
           Coming soon...
         </q-tab-panel>