bug: carousel and adv desc fix (#2562)

* Carousel image fix
* pushed carousel nav to top as well so yt controls are accessible
* Added some extra breathing room for the adv description

lnbits/core/templates/core/extensions.html

@@ -240,6 +240,8 @@
       </q-card-actions>
     </q-card>
   </div>
+</div>
+
 <q-dialog v-model="showUninstallDialog">
   <q-card class="q-pa-lg">
     <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
@@ -346,11 +348,7 @@
     </div>
   </q-card>
   <q-card v-else class="q-pa-lg lnbits__dialog-card">
-      <q-tabs
+    <q-tabs v-model="manageExtensionTab" active-color="primary" align="justify">
-        v-model="manageExtensionTab"
-        active-color="primary"
-        align="justify"
-      >
       <q-tab
         name="releases"
         :label="$t('releases')"
@@ -399,9 +397,7 @@
                   <br />
                   <small v-text="repoName"></small>
                   <q-tooltip
-                      ><span
+                    ><span v-text="selectedExtensionRepos[repoName].repo"></span
-                        v-text="selectedExtensionRepos[repoName].repo"
-                      ></span
                   ></q-tooltip>
                 </div>
                 <div class="col-2"></div>
@@ -757,8 +753,8 @@
 <q-dialog v-model="showExtensionDetailsDialog">
   <q-card
     v-if="selectedExtensionDetails"
-      class="q-pa-lg"
+    class="q-pa-sm"
-      style="width: 800px; max-width: 80vw"
+    style="width: 800px; max-width: 95vw"
   >
     <q-card-section>
       <div class="row">
@@ -769,14 +765,21 @@
             type="image"
           ></q-img>
         </div>
-          <div class="col-7 q-pl-md">
+        <div class="col-9 q-pl-md gt-xs">
           <h3 class="q-my-sm" v-text="selectedExtensionDetails.name"></h3>
           <h6
             class="q-my-sm"
             v-text="selectedExtensionDetails.short_description"
           ></h6>
         </div>
-          <div class="col-3">
+        <div class="col-9 q-pl-md lt-sm">
+          <h5 class="q-my-sm" v-text="selectedExtensionDetails.name"></h5>
+          <p
+            class="q-my-sm"
+            v-text="selectedExtensionDetails.short_description"
+          ></p>
+        </div>
+        <div class="col-1">
           <q-btn
             v-close-popup
             flat
@@ -789,6 +792,7 @@
       <div v-if="selectedExtensionDetails.images?.length" class="row q-my-lg">
         <div class="col q-pr-md">
           <q-carousel
+            navigation-position="top"
             swipeable
             animated
             v-model="slide"
@@ -833,20 +837,49 @@
       </div>
 
       <div class="row">
-          <div class="col-8 q-pr-sm">
+        <div class="col-sm-12 col-md-8 q-pr-sm">
           <div v-html="selectedExtensionDetails.description_md"></div>
         </div>
-          <div class="col-4 q-pl-sm" style="border-left: 1px solid grey">
+        <div class="col-sm-12 col-md-4 q-pl-sm">
-            <div class="">
+          <q-rating
-              <q-btn
+            v-model="maxStars"
-                size="xs"
+            disable
+            size="2.5em"
+            :max="5"
             color="primary"
-                label="Terms and conditions"
+          ></q-rating>
-                type="a"
+          <div class="q-mt-md">
-                :href="selectedExtensionDetails.terms_and_conditions_md"
+            <b>
+              <span v-text="$t('contributors')"></span>
+            </b>
+            <small>
+              <div v-for="contributor of selectedExtensionDetails.contributors">
+                <a
+                  :href="contributor.uri"
                   target="_blank"
                   rel="noopener noreferrer"
-              ></q-btn>
+                  style="color: var(--q-primary); text-decoration: none"
+                >
+                  <span
+                    v-text="(contributor.name || contributor) + ' - ' + (contributor.role || 'dev')"
+                  ></span>
+                </a>
+              </div>
+            </small>
+          </div>
+          <div class="row q-pt-md">
+            <div>
+              <q-btn
+                size="sm"
+                color="primary"
+                label="Repo"
+                type="a"
+                :href="selectedExtensionDetails.repo"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="q-pr-xs"
+                ><q-tooltip>repository</q-tooltip></q-btn
+              >
             </div>
             <div class="q-mt-md">
               <b>
@@ -896,10 +929,10 @@
             </div>
           </div>
         </div>
+      </div>
     </q-card-section>
   </q-card>
 </q-dialog>
-</div>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
 <script>
   new Vue({

lnbits/static/css/base.css

@@ -554,3 +554,12 @@ video {
 .whitespace-pre-line {
   white-space: pre-line;
 }
+
+.q-carousel__slide {
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.q-dialog__inner--minimized {
+  padding: 12px;
+}

lnbits/static/scss/base.scss

@@ -231,3 +231,10 @@ video {
 .whitespace-pre-line {
   white-space: pre-line;
 }
+.q-carousel__slide {
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.q-dialog__inner--minimized {
+  padding: 12px;
+}