fix: login screen layout (#3538)

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/core/templates/core/wallet.html

@@ -537,7 +537,19 @@
             </q-card-section>
           </q-card>
           {% endif %}
-          <lnbits-wallet-ads></lnbits-wallet-ads>
+          <q-card class="lnbits-wallet-ads" v-if="AD_SPACE_ENABLED">
+            <q-card-section class="text-subtitle1">
+              <span v-text="AD_SPACE_TITLE"></span>
+              <a :href="ad[0]" class="lnbits-ad" v-for="ad in g.ads">
+                <q-img
+                  class="q-mb-xs"
+                  v-if="$q.dark.isActive"
+                  :src="ad[1]"
+                ></q-img>
+                <q-img class="q-mb-xs" v-else :src="ad[2]"></q-img>
+              </a>
+            </q-card-section>
+          </q-card>
           <div
             v-show="chartDataPointCount"
             class="col-12 col-md-5 q-gutter-y-md"

lnbits/helpers.py

@@ -69,7 +69,7 @@ def template_renderer(additional_folders: list | None = None) -> Jinja2Templates
     t.env.globals["static_url_for"] = static_url_for
 
     window_settings = {
-        "AD_SPACE": settings.lnbits_ad_space.split(","),
+        "AD_SPACE": settings.lnbits_ad_space,
         "AD_SPACE_ENABLED": settings.lnbits_ad_space_enabled,
         "AD_SPACE_TITLE": settings.lnbits_ad_space_title,
         "EXTENSIONS": list(settings.lnbits_installed_extensions_ids),

lnbits/static/js/components/lnbits-wallet-ads.js

@@ -1,15 +0,0 @@
-window.app.component('lnbits-wallet-ads', {
-  template: '#lnbits-wallet-ads',
-  mixins: [window.windowMixin],
-  computed: {
-    ads() {
-      return this.AD_SPACE.map(ad => ad.split(';'))
-    },
-    adSpaceTitle() {
-      return this.AD_SPACE_TITLE || 'Sponsored Ads'
-    },
-    adSpaceEnabled() {
-      return this.AD_SPACE_ENABLED && this.AD_SPACE && this.AD_SPACE.length > 0
-    }
-  }
-})

lnbits/static/js/globals.js

@@ -45,7 +45,8 @@ window.g = Vue.reactive({
   bgimageChoice: localStore(
     'lnbits.backgroundImage',
     WINDOW_SETTINGS.LNBITS_DEFAULT_BGIMAGE
-  )
+  ),
+  ads: WINDOW_SETTINGS.AD_SPACE.split(',').map(ad => ad.split(';'))
 })
 
 window.dateFormat = 'YYYY-MM-DD HH:mm'

lnbits/static/vendor.json

@@ -67,7 +67,6 @@
     "js/components/admin/lnbits-admin-site-customisation.js",
     "js/components/admin/lnbits-admin-assets-config.js",
     "js/components/admin/lnbits-admin-audit.js",
-    "js/components/lnbits-wallet-ads.js",
     "js/components/lnbits-wallet-api-docs.js",
     "js/components/lnbits-wallet-new.js",
     "js/components/lnbits-wallet-share.js",

lnbits/templates/components.vue

@@ -19,7 +19,6 @@ include('components/lnbits-manage-extension-list.vue') %} {%
 include('components/lnbits-manage-wallet-list.vue') %} {%
 include('components/lnbits-language-dropdown.vue') %} {%
 include('components/lnbits-payment-list.vue') %} {%
-include('components/lnbits-wallet-ads.vue') %} {%
 include('components/lnbits-wallet-new.vue') %} {%
 include('components/lnbits-wallet-api-docs.vue') %} {%
 include('components/lnbits-wallet-share.vue') %}

lnbits/templates/components/lnbits-wallet-ads.vue

@@ -1,21 +0,0 @@
-<template id="lnbits-wallet-ads">
-  <q-card v-if="adSpaceEnabled">
-    <q-card-section>
-      <h6 v-text="adSpaceTitle" class="text-subtitle1 q-mt-none q-mb-sm"></h6>
-    </q-card-section>
-    <q-card-section class="q-pa-none" v-for="ad in ads">
-      <a
-        style="display: inline-block"
-        :href="ad[0]"
-        class="q-ml-md q-mb-xs q-mr-md"
-      >
-        <img
-          style="max-width: 100%; height: auto"
-          v-if="$q.dark.isActive"
-          :src="ad[1]"
-        />
-        <img v-else :src="ad[2]" style="max-width: 100%; height: auto" />
-      </a>
-    </q-card-section>
-  </q-card>
-</template>

lnbits/templates/pages/home.vue

@@ -1,11 +1,8 @@
 <template id="page-home">
+  <div class="home row justify-center items-center">
     <div
-    class="home row justify-center items-center"
+      class="full-width content-center"
-    style="min-height: calc(100vh / 1.618)"
+      :style="`max-width: ${hasCustomImage ? '850' : '600'}px; min-height: 55vh;`"
-  >
-    <div
-      class="full-width"
-      :style="`max-width: ${hasCustomImage ? '850' : '600'}px`"
     >
       <div class="row q-mb-md">
         <div class="col-12">
@@ -148,31 +145,15 @@
         ></q-btn>
       </div>
     </div>
-    <div v-if="adsEnabled" class="q-pt-md full-width">
+    <div
-      <div class="row justify-center q-mb-xl">
+      :class="$q.screen.lt.md ? 'column col-10' : 'col-10'"
-        <div class="full-width text-center">
+      class="flex justify-center q-col-gutter-sm q-mb-lg"
-          <span v-text="adsTitle" class="text-uppercase text-grey"></span>
+    >
-        </div>
+      <a :href="ad[0]" class="col lnbits-ad" v-for="ad in g.ads">
-        <div class="flex flex-center columm">
+        <img class="full-width" v-if="$q.dark.isActive" :src="ad[1]" />
-          <div v-for="ad in ads" class="flex flex-center column q-pr-sm">
+        <img class="full-width" v-else :src="ad[2]" />
-            <a :href="ad[0]">
-              <img
-                v-if="$q.dark.isActive"
-                :src="ad[1]"
-                style="max-width: 420px"
-                class="full-width"
-              />
-              <img
-                v-else
-                :src="ad[2]"
-                style="max-width: 420px"
-                class="full-width"
-              />
       </a>
     </div>
-        </div>
-      </div>
-    </div>
     <lnbits-home-logos />
   </div>
 </template>

package.json

@@ -119,7 +119,6 @@
       "js/components/admin/lnbits-admin-site-customisation.js",
       "js/components/admin/lnbits-admin-assets-config.js",
       "js/components/admin/lnbits-admin-audit.js",
-      "js/components/lnbits-wallet-ads.js",
       "js/components/lnbits-wallet-api-docs.js",
       "js/components/lnbits-wallet-new.js",
       "js/components/lnbits-wallet-share.js",