Merge pull request #1324 from lnbits/MEGA

Moved example ext sub-menu for mobile

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>
@@ -79,9 +79,8 @@
           <div class="text-h6">Frameworks</div>
 
           <div>
-            <q-splitter v-model="splitterModel">
+            <template>
-              <template v-slot:before>
+              <q-tabs align="left" v-model="framworktab" inline-label>
-                <q-tabs v-model="framworktab" vertical>
                 <q-tab name="fastapi"
                   ><img src="./static/fastapi-framework.png" />FASTAPI</q-tab
                 >
@@ -94,7 +93,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/"
@@ -102,29 +101,27 @@
                   /></a>
                   <p>
                     LNbits API is built using
-                      <a
+                    <a href="https://fastapi.tiangolo.com/" class="text-primary"
-                        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
+                    FastAPI auto-generates swagger UI docs for testing endpoints
-                      endpoints <a class="text-primary" href="../docs">/docs</a>
+                    <a class="text-primary" href="../docs">/docs</a>
                   </p>
 
                   <i>
-                      <strong>TIP:</strong> Although it is possible for
+                    <strong>TIP:</strong> Although it is possible for extensions
-                      extensions to use other extensions API endpoints (such as
+                    to use other extensions API endpoints (such as with the
-                      with the Satspay and Onchain extension), ideally an
+                    Satspay and Onchain extension), ideally an extension should
-                      extension should only use LNbits
+                    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
+                  <code class="bg-grey-3 text-black">views.py</code> is used for
-                    for setting application routes:
+                  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
+                  <code class="bg-grey-3 text-black">views_api.py</code> is used
-                    used for setting application API endpoints:
+                  for setting application API endpoints:<br />
                   <img src="./static/fastapi-example2.png" />
                 </q-tab-panel>
 
@@ -143,9 +140,8 @@
 
                   <i>
                     <strong>TIP:</strong> Look through
-                      <code class="bg-grey-3 text-black">/template</code> files
+                    <code class="bg-grey-3 text-black">/template</code> files in
-                      in other extensions for examples of Quasar elements being
+                    other extensions for examples of Quasar elements being used. </i
-                      used. </i
                   ><br /><br />
 
                   <p>
@@ -192,13 +188,11 @@
                   <p>
                     LNbits uses
                     <a href="https://vuejs.org/" class="text-primary">Vue</a>
-                      components for best-in-class high-performance and
+                    components for best-in-class high-performance and responsive
-                      responsive performance.
+                    performance.
                   </p>
 
-                    <p>
+                  <p>Typical example of Vue components in a frontend script:</p>
-                      Typical example of Vue components in a frontend script:
-                    </p>
                   <img
                     src="./static/script-example.png"
                     style="max-width: 800px"
@@ -216,22 +210,20 @@
                 </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>
-              <template v-slot:before>
+              <q-tabs v-model="usefultab" align="left">
-                <q-tabs v-model="usefultab" vertical>
                 <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>
@@ -242,9 +234,7 @@
                     >) is always available, with info about the user, wallets
                     and extensions:
                   </p>
-                    <code class="text-caption"
+                  <code class="text-caption">{% raw %}{{ g }}{% endraw %}</code>
-                      >{% raw %}{{ g }}{% endraw %}</code
-                    >
                 </q-tab-panel>
                 <q-tab-panel name="exchange">
                   <div class="text-h6">Exchange rates</div>
@@ -267,12 +257,11 @@
                 </q-tab-panel>
               </q-tab-panels>
             </template>
-            </q-splitter>
           </div>
         </q-tab-panel>
 
-        <q-tab-panel name="structure">
+        <q-tab-panel name="goodpractice">
-          <div class="text-h6">File Structure</div>
+          <div class="text-h6">Good Practice</div>
           Coming soon...
         </q-tab-panel>