refactor: use mobileSimple reactive value (#3518)

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;
+    }
+  }
+}