feat: improve on extension page layout (#2558)

* feat: improve on extension page layout
give it more luft and simplify it a bit. also improved responsiveness
* show description now, ben

lnbits/core/templates/core/extensions.html

@@ -55,20 +55,25 @@
 </div>
 <div class="row q-col-gutter-md">
   <div
-    class="col-6 col-md-4 col-lg-3"
+    class="col-12 col-sm-6 col-md-6 col-lg-4"
     v-for="extension in filteredExtensions"
     :key="extension.id + extension.hash"
   >
     <q-card>
-      <q-card-section style="min-height: 140px" class="q-pb-none">
+      <q-card-section>
         <div class="row">
           <div class="col-3">
             <q-img
+              @click="showExtensionDetails(extension.id, extension.details_link)"
               v-if="extension.icon"
               :src="extension.icon"
               spinner-color="white"
-              style="max-width: 100%"
+              style="cursor: pointer; max-width: 100%"
-            ></q-img>
+            >
+              <q-tooltip>
+                <span v-text="extension.shortDescription"></span>
+              </q-tooltip>
+            </q-img>
             <div v-else>
               <q-icon
                 class="gt-sm"
@@ -84,56 +89,78 @@
               ></q-icon>
             </div>
           </div>
-          <div class="col-9 q-pl-sm">
+          <div class="col-9 q-pl-md">
+            <q-badge
+              v-if="extension.isInstalled"
+              @click="showManageExtension(extension)"
+              class="float-right"
+              color="transparent"
+              style="cursor: pointer"
+            >
+              <span v-text="extension.installedRelease.version"></span>
+              <q-tooltip
+                ><span v-text="extension.installedRelease.version"></span
+              ></q-tooltip>
+            </q-badge>
+            <div
+              class="text-h5"
+              style="cursor: pointer"
+              @click="showExtensionDetails(extension.id, extension.details_link)"
+              v-text="extension.name"
+            ></div>
+            <div>
+              <lnbits-extension-rating :rating="0" />
+            </div>
+            <div style="justify-content: space-between; display: flex">
+              <q-toggle
+                size="xs"
+                v-if="extension.isAvailable && extension.isInstalled && g.user.admin"
+                :label="extension.isActive ? $t('activated'):  $t('deactivated') "
+                color="secondary"
+                style=""
+                v-model="extension.isActive"
+                @input="toggleExtension(extension)"
+                ><q-tooltip>
+                  &nbsp;
+                  <span
+                    v-text="$t('activate_extension_details')"
+                  ></span> </q-tooltip
+              ></q-toggle>
               <q-badge
                 v-if="hasNewVersion(extension)"
-              @click="showExtensionDetails(extension.id, extension.latestRelease?.details_link)"
+                @click="showManageExtension(extension)"
-              color="green"
+                color="primary"
                 class="float-right"
-              :class="extension.latestRelease?.details_link ? 'cursor-pointer': ''"
+                style="cursor: pointer; margin: 5px 0"
               >
-              <q-icon
+                <span v-text="$t('new_version')"></span>
-                v-if="extension.latestRelease?.details_link"
-                name="info"
-                size="xs"
-              ></q-icon>
-              <small v-text="$t('new_version')" class="q-ma-xs"></small>
                 <q-tooltip
                   ><span v-text="extension.latestRelease.version"></span
                 ></q-tooltip>
               </q-badge>
-            <div
+            </div>
-              class="text-h5 gt-sm q-mt-sm q-mb-xs gt-sm"
+            <div>
-              v-text="extension.name"
+              <p
-            ></div>
+                style="
-            <div
+                  overflow: hidden;
-              class="text-h5 gt-sm q-mt-sm q-mb-xs lt-md"
+                  white-space: nowrap;
-              style="min-height: 60px"
+                  text-overflow: ellipsis;
-              v-text="extension.name"
+                "
-            ></div>
-            <div
-              class="text-subtitle2 gt-sm"
-              style="font-size: 11px; height: 34px"
-              v-text="extension.shortDescription || extension.installedRelease?.description"
-            ></div>
-            <div
-              class="text-subtitle1 lt-md q-mt-sm q-mb-xs"
-              v-text="extension.name"
-            ></div>
-            <div
-              class="text-subtitle2 lt-md"
-              style="font-size: 9px; height: 34px"
                 v-text="extension.shortDescription"
-            ></div>
+              ></p>
+              <q-tooltip
+                ><span v-text="extension.shortDescription"></span
+              ></q-tooltip>
             </div>
           </div>
-        <div class="row q-pt-sm">
+        </div>
-          <div class="col">
+        <div
-            <small
+          id="dependencies"
+          class="row q-pt-sm"
           v-if="extension.dependencies?.length"
-              v-text="$t('extension_depends_on')"
+        >
-            ></small>
+          <div class="col">
-            <small v-else>&nbsp;</small>
+            <small v-text="$t('extension_depends_on')"></small>
             <q-badge
               v-for="dep in extension.dependencies"
               :key="dep"
@@ -144,41 +171,6 @@
           </div>
         </div>
       </q-card-section>
-      <q-card-section>
-        <div>
-          <q-rating
-            class="gt-sm"
-            v-model="maxStars"
-            disable
-            size="1.5em"
-            :max="5"
-            color="primary"
-            ><q-tooltip>
-              <span v-text="$t('extension_rating_soon')"></span> </q-tooltip
-          ></q-rating>
-          <q-rating
-            v-model="maxStars"
-            class="lt-md"
-            size="1.5em"
-            :max="5"
-            color="primary"
-            ><q-tooltip>
-              <span v-text="$t('extension_rating_soon')"></span> </q-tooltip
-          ></q-rating>
-          <q-toggle
-            v-if="extension.isAvailable && extension.isInstalled && g.user.admin"
-            :label="extension.isActive ? $t('activated'):  $t('deactivated') "
-            color="secondary"
-            style="max-height: 21px"
-            v-model="extension.isActive"
-            @input="toggleExtension(extension)"
-            ><q-tooltip>
-              <span
-                v-text="$t('activate_extension_details')"
-              ></span> </q-tooltip
-          ></q-toggle>
-        </div>
-      </q-card-section>
       <q-separator></q-separator>
       <q-card-actions style="min-height: 52px">
         <div class="col-10">
@@ -233,29 +225,16 @@
         </div>
 
         <div class="col-2">
-          <div
+          <div v-if="extension.details_link" class="float-right">
-            v-if="(extension.isInstalled && extension.installedRelease) || extension.details_link"
+            <q-btn
-            class="float-right"
-          >
-            <q-badge
               @click="showExtensionDetails(extension.id, extension.details_link)"
-              :class="extension.details_link? 'cursor-pointer' : ''"
+              flat
+              :label="$t('more')"
             >
-              <q-icon
-                v-if="extension.details_link"
-                name="info"
-                size="xs"
-              ></q-icon>
-              <div v-if="extension.installedRelease" class="q-ma-xs">
-                <span
-                  v-text="extension.installedRelease.version"
-                  class="q-mt-lg"
-                ></span>
               <q-tooltip>
-                  <span v-text="$t('extension_installed_version')"></span>
+                <span v-text="extension.shortDescription"></span>
               </q-tooltip>
-              </div>
+            </q-btn>
-            </q-badge>
           </div>
         </div>
       </q-card-actions>
@@ -903,17 +882,7 @@
               <br />
 
               <div>
-                <q-rating
+                <lnbits-extension-rating :rating="0" />
-                  v-model="maxStars"
-                  disable
-                  size="1.5em"
-                  :max="5"
-                  color="primary"
-                  ><q-tooltip>
-                    <span
-                      v-text="$t('extension_rating_soon')"
-                    ></span> </q-tooltip
-                ></q-rating>
                 <q-btn
                   size="xs"
                   color="primary"
@@ -985,6 +954,7 @@
         }
 
         this.filteredExtensions = this.extensions
+          .filter(e => (tab === 'all' ? !e.isInstalled : true))
           .filter(e => (tab === 'installed' ? e.isInstalled : true))
           .filter(e =>
             tab === 'installed'
@@ -1036,6 +1006,7 @@
             this.filteredExtensions = this.extensions.concat([])
             this.handleTabChanged('installed')
             this.tab = 'installed'
+            window.location.reload()
           })
           .catch(err => {
             console.warn(err)

lnbits/static/js/components/extension-rating.js

@@ -0,0 +1,16 @@
+Vue.component('lnbits-extension-rating', {
+  name: 'lnbits-extension-rating',
+  props: ['rating'],
+  template: `
+    <div style="margin-bottom: 3px">
+        <q-rating
+          v-model="rating"
+          size="1.5em"
+          :max="5"
+          color="primary"
+          ><q-tooltip>
+            <span v-text="$t('extension_rating_soon')"></span> </q-tooltip
+        ></q-rating>
+    </div>
+  `
+})

lnbits/static/vendor.json

@@ -37,6 +37,7 @@
     "js/components.js",
     "js/components/lnbits-funding-sources.js",
     "js/components/extension-settings.js",
+    "js/components/extension-rating.js",
     "js/components/payment-list.js",
     "js/components/payment-chart.js",
     "js/event-reactions.js",

package.json

@@ -86,6 +86,7 @@
       "js/components.js",
       "js/components/lnbits-funding-sources.js",
       "js/components/extension-settings.js",
+      "js/components/extension-rating.js",
       "js/components/payment-list.js",
       "js/components/payment-chart.js",
       "js/event-reactions.js",