refactor: use mobileSimple reactive value (#3518)

lnbits/core/templates/core/wallet.html

@@ -10,24 +10,9 @@
     {% elif HIDE_API %}
     <div class="col-12 q-gutter-y-md">
       {% else %}
-      <div
-        class="col-12 col-md-7 q-gutter-y-md"
-        :style="$q.screen.lt.md ? {
-        position: mobileSimple ? 'fixed !important': ''
-      , top: mobileSimple ? '50% !important': ''
-      , left: mobileSimple ? '50% !important': ''
-      , transform: mobileSimple ? 'translate(-50%, -50%) !important': ''
-    } : ''"
-      >
+      <div class="col-12 col-md-7 q-gutter-y-md wallet-wrapper">
         {% endif %}
-        <q-card
-          :style="$q.screen.lt.md ? {
-            background: $q.screen.lt.md ? 'none !important': ''
-            , boxShadow: $q.screen.lt.md ? 'none !important': ''
-            , border: $q.screen.lt.md ? 'none !important': ''
-            , width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
-          } : ''"
-        >
+        <q-card class="wallet-card">
           <q-card-section style="height: 130px">
             <div class="row q-gutter-md">
               <div
@@ -139,15 +124,15 @@
                 </div>
                 <q-btn
                   v-if="$q.screen.lt.md"
-                  @click="simpleMobile()"
+                  @click="g.mobileSimple = !g.mobileSimple"
                   color="primary"
                   class="q-ml-xl absolute-right"
                   dense
                   size="sm"
                   style="height: 20px; margin-top: 75px"
                   flat
-                  :icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
-                  :label="mobileSimple ? $t('more') : $t('less')"
+                  :icon="g.mobileSimple ? 'unfold_more' : 'unfold_less'"
+                  :label="g.mobileSimple ? $t('more') : $t('less')"
                 ></q-btn>
               </div>
             </div>
@@ -191,23 +176,12 @@
           </div>
         </q-card>
 
-        <q-card
-          :style="
-          $q.screen.lt.md
-            ? {
-                background: $q.screen.lt.md ? 'none !important' : '',
-                boxShadow: $q.screen.lt.md ? 'none !important' : '',
-                border: $q.screen.lt.md ? 'none !important': '',
-                marginTop: $q.screen.lt.md ? '0px !important' : ''
-              }
-            : ''
-        "
-        >
+        <q-card class="wallet-card">
           <q-card-section>
             <lnbits-payment-list
               @filter-changed="handleFilterChange"
               :update="updatePayments"
-              :mobile-simple="mobileSimple"
+              :mobile-simple="g.mobileSimple"
               :expand-details="expandDetails"
             ></lnbits-payment-list>
           </q-card-section>
@@ -216,7 +190,10 @@
       {% if HIDE_API %}
       <div class="col-12 col-md-4 q-gutter-y-md">
         {% else %}
-        <div v-if="!mobileSimple" class="col-12 col-md-5 q-gutter-y-md">
+        <div
+          v-if="!g.mobileSimple || !$q.screen.lt.md"
+          class="col-12 col-md-5 q-gutter-y-md"
+        >
           <q-card>
             <q-card-section class="q-pb-xs">
               <div class="row items-center">

lnbits/static/css/base.css

@@ -438,3 +438,20 @@ video {
 .wallet-list-card:first-child {
   margin-left: 1px;
 }
+
+@media (max-width: 1024px) {
+  .wallet-card {
+    background: none !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
+  .mobile-simple .wallet-wrapper {
+    position: fixed !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+  }
+  .mobile-simple .wallet-card {
+    width: 90% !important;
+  }
+}

lnbits/static/js/components/lnbits-payment-list.js

@@ -138,7 +138,7 @@ window.app.component('lnbits-payment-list', {
       return LNbits.utils.search(this.payments, q)
     },
     paymentsOmitter() {
-      if (this.$q.screen.lt.md && this.mobileSimple) {
+      if (this.$q.screen.lt.md && this.g.mobileSimple) {
         return this.payments.length > 0 ? [this.payments[0]] : []
       }
       return this.payments

lnbits/static/js/components/lnbits-theme.js

@@ -29,6 +29,14 @@ window.app.component('lnbits-theme', {
         document.body.classList.remove('gradient-bg')
       }
     },
+    'g.mobileSimple'(val) {
+      this.$q.localStorage.set('lnbits.mobileSimple', val)
+      if (val === true) {
+        document.body.classList.add('mobile-simple')
+      } else {
+        document.body.classList.remove('mobile-simple')
+      }
+    },
     'g.bgimageChoice'(val) {
       this.$q.localStorage.set('lnbits.backgroundImage', val)
       if (val === '') {
@@ -102,6 +110,9 @@ window.app.component('lnbits-theme', {
         `url(${this.g.bgimageChoice})`
       )
     }
+    if (this.g.mobileSimple === true) {
+      document.body.classList.add('mobile-simple')
+    }
     this.checkUrlParams()
   }
 })

lnbits/static/js/globals.js

@@ -20,6 +20,7 @@ window.g = Vue.reactive({
   walletEventListeners: [],
   updatePayments: false,
   updatePaymentsHash: '',
+  mobileSimple: localStore('lnbits.mobileSimple', true),
   walletFlip: localStore('lnbits.walletFlip', false),
   locale: localStore('lnbits.lang', navigator.languages[1] ?? 'en'),
   darkChoice: localStore('lnbits.darkMode', true),

lnbits/static/js/wallet.js

@@ -49,7 +49,6 @@ window.WalletPageLogic = {
         show: false,
         location: window.location
       },
-      mobileSimple: this.$q.screen.lt.md,
       icon: {
         show: false,
         data: {},
@@ -961,7 +960,7 @@ window.WalletPageLogic = {
       this.paymentsFilter = value
     },
     async fetchChartData() {
-      if (this.mobileSimple) {
+      if (this.g.mobileSimple) {
         this.chartConfig = {}
         return
       }
@@ -1271,11 +1270,6 @@ window.WalletPageLogic = {
         this.formatFiatAmount(this.g.fiatBalance, this.g.wallet.currency)
       }
     },
-    '$q.screen.gt.sm'(value) {
-      if (value == true) {
-        this.mobileSimple = false
-      }
-    },
     'g.wallet': {
       handler() {
         try {

lnbits/static/js/windowMixin.js

@@ -6,7 +6,6 @@ window.windowMixin = {
       utils: window._lnbitsUtils,
       g: window.g,
       toggleSubs: true,
-      mobileSimple: true,
       addWalletDialog: {show: false, walletType: 'lightning'},
       walletTypes: [{label: 'Lightning Wallet', value: 'lightning'}],
       isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
@@ -37,10 +36,6 @@ window.windowMixin = {
     showAddNewWalletDialog() {
       this.addWalletDialog = {show: true, walletType: 'lightning'}
     },
-    simpleMobile() {
-      this.$q.localStorage.set('lnbits.mobileSimple', !this.mobileSimple)
-      this.refreshRoute()
-    },
     paymentEvents() {
       this.g.walletEventListeners = this.g.walletEventListeners || []
       this.g.user.wallets.forEach(wallet => {
@@ -156,12 +151,6 @@ window.windowMixin = {
     if (window.extensions) {
       this.g.extensions = Vue.reactive(window.extensions)
     }
-    if (
-      this.$q.screen.gt.sm ||
-      this.$q.localStorage.getItem('lnbits.mobileSimple') == false
-    ) {
-      this.mobileSimple = false
-    }
   },
   mounted() {
     if (this.g.user) {

lnbits/static/scss/base.scss

@@ -178,3 +178,22 @@ video {
 .wallet-list-card:first-child {
   margin-left: 1px;
 }
+
+@media (max-width: 1024px) {
+  .wallet-card {
+    background: none !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
+  .mobile-simple {
+    .wallet-wrapper {
+      position: fixed !important;
+      top: 50% !important;
+      left: 50% !important;
+      transform: translate(-50%, -50%) !important;
+    }
+    .wallet-card {
+      width: 90% !important;
+    }
+  }
+}

lnbits/templates/components/lnbits-payment-list.vue

@@ -1,6 +1,6 @@
 <template id="lnbits-payment-list">
   <div class="row items-center no-wrap">
-    <div class="col" v-if="!mobileSimple || $q.screen.gt.sm">
+    <div class="col" v-if="!g.mobileSimple || $q.screen.gt.sm">
       <q-input
         :label="$t('search_by_tag_memo_amount')"
         dense
@@ -173,8 +173,8 @@
     :no-data-label="$t('no_transactions')"
     :filter="paymentsTable.filter"
     :loading="paymentsTable.loading"
-    :hide-header="mobileSimple"
-    :hide-bottom="mobileSimple"
+    :hide-header="g.mobileSimple"
+    :hide-bottom="g.mobileSimple"
     v-model:pagination="paymentsTable.pagination"
     @request="fetchPayments"
   >