Simplified mobile wallet (#2175)

--------- Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com> Co-authored-by: Pavol Rusnak <pavol@rusnak.io>
2025-05-29 17:19:22 +02:00 · 2023-12-22 16:32:01 +00:00 · 2023-12-22 16:32:01 +00:00 · e8c9304519
commit e8c9304519
parent 815c3e61e4
21 changed files with 87 additions and 18 deletions
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@ -15,13 +15,28 @@
    {% elif HIDE_API %}
    <div class="col-12 q-gutter-y-md">
      {% else %}
-      <div class="col-12 col-md-7 q-gutter-y-md">
+      <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': ''
+    } : ''"
+      >
        {% endif %}
-        <q-card>
+        <q-card
+          :style="$q.screen.lt.md ? {
+            background: $q.screen.lt.md ? 'none !important': ''
+          , boxShadow: $q.screen.lt.md ? 'none !important': ''
+          , margin: $q.screen.lt.md && mobileSimple ? 'auto !important': ''
+          , width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
+        } : ''"
+        >
          <q-card-section>
-            <h3 class="q-my-none">
+            <h3 class="q-my-none text-no-wrap">
              <strong>{% raw %}{{ formattedBalance }} {% endraw %}</strong>
-              {{LNBITS_DENOMINATION}}
+              <small>{{LNBITS_DENOMINATION}}</small>
              <q-btn
                v-if="'{{user.super_user}}' == 'True'"
                flat
@ -55,12 +70,27 @@
                </q-popup-edit>
              </q-btn>
            </h3>
-            <div v-if="g.wallet.currency">
-              <span
-                class="text-h5 text-italic"
-                v-text="formattedFiatBalance"
-                style="opacity: 0.75"
-              ></span>
+            <div class="row">
+              <div class="col">
+                <div v-if="g.wallet.currency">
+                  <span
+                    class="text-h5 text-italic"
+                    v-text="formattedFiatBalance"
+                    style="opacity: 0.75"
+                  ></span>
+                </div>
+              </div>
+              <div class="col">
+                <q-btn
+                  @click="mobileSimple = !mobileSimple"
+                  color="primary"
+                  class="float-right lt-md"
+                  size="sm"
+                  flat
+                  :icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
+                  :label="mobileSimple ? $t('more') : $t('less')"
+                ></q-btn>
+              </div>
            </div>
          </q-card-section>
          <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
@ -98,7 +128,13 @@
          </div>
        </q-card>

-        <q-card>
+        <q-card
+          :style="$q.screen.lt.md ? {
+            background: $q.screen.lt.md ? 'none !important': ''
+            , boxShadow: $q.screen.lt.md ? 'none !important': ''
+            , marginTop: $q.screen.lt.md ? '0px !important': ''
+          } : ''"
+        >
          <q-card-section>
            <div class="row items-center no-wrap q-mb-sm">
              <div class="col">
@ -107,7 +143,7 @@
                  :v-text="$t('transactions')"
                ></h5>
              </div>
-              <div class="col-auto">
+              <div class="gt-sm col-auto">
                <q-btn
                  flat
                  color="grey"
@ -132,6 +168,9 @@
              </div>
            </div>
            <q-input
+              :style="$q.screen.lt.md ? {
+              display: mobileSimple ? 'none !important': ''
+            } : ''"
              filled
              dense
              clearable
@ -144,13 +183,15 @@
            <q-table
              dense
              flat
-              :data="payments"
+              :data="paymentsOmitter"
              :row-key="paymentTableRowKey"
              :columns="paymentsTable.columns"
              :pagination.sync="paymentsTable.pagination"
              :no-data-label="$t('no_transactions')"
              :filter="paymentsTable.filter"
              :loading="paymentsTable.loading"
+              :hide-header="mobileSimple"
+              :hide-bottom="mobileSimple"
              @request="fetchPayments"
            >
              {% raw %}
@ -304,11 +345,13 @@
          </q-card-section>
        </q-card>
      </div>
-
      {% if HIDE_API %}
      <div class="col-12 col-md-4 q-gutter-y-md">
        {% else %}
-        <div class="col-12 col-md-5 q-gutter-y-md">
+        <div
+          v-if="!mobileSimple || $q.screen.gt.sm"
+          class="col-12 col-md-5 q-gutter-y-md"
+        >
          <q-card>
            <q-card-section>
              <h6 class="text-subtitle1 q-mt-none q-mb-sm">
--- a/lnbits/static/bundle.min.js
+++ b/lnbits/static/bundle.min.js
--- a/lnbits/static/i18n/br.js
+++ b/lnbits/static/i18n/br.js
@ -177,6 +177,7 @@ window.localisation.br = {
  notification_source_label:
    'URL de origem (use apenas a fonte de status oficial do LNbits e fontes de confiança)',
  more: 'mais',
+  less: 'menos',
  releases: 'Lançamentos',
  killswitch: 'Dispositivo de desativação',
  watchdog: 'Cão de guarda',
--- a/lnbits/static/i18n/cn.js
+++ b/lnbits/static/i18n/cn.js
@ -166,6 +166,7 @@ window.localisation.cn = {
  notification_source: '通知来源',
  notification_source_label: '来源 URL（仅使用官方LNbits状态源和您信任的源）',
  more: '更多',
+  less: '少',
  releases: '版本',
  killswitch: '杀手锏',
  watchdog: '监控程序',
--- a/lnbits/static/i18n/cs.js
+++ b/lnbits/static/i18n/cs.js
@ -174,6 +174,7 @@ window.localisation.cs = {
  notification_source_label:
    'URL zdroje (používejte pouze oficiální zdroj stavu LNbits a zdroje, kterým můžete věřit)',
  more: 'více',
+  less: 'méně',
  releases: 'Vydání',
  killswitch: 'Killswitch',
  watchdog: 'Watchdog',
--- a/lnbits/static/i18n/de.js
+++ b/lnbits/static/i18n/de.js
@ -179,6 +179,7 @@ window.localisation.de = {
  notification_source_label:
    'Quell-URL (verwenden Sie nur die offizielle LNbits-Statusquelle und Quellen, denen Sie vertrauen können)',
  more: 'mehr',
+  less: 'weniger',
  releases: 'Veröffentlichungen',
  killswitch: 'Killswitch',
  watchdog: 'Wachhund',
--- a/lnbits/static/i18n/en.js
+++ b/lnbits/static/i18n/en.js
@ -171,6 +171,7 @@ window.localisation.en = {
  notification_source_label:
    'Source URL (only use the official LNbits status source, and sources you can trust)',
  more: 'more',
+  less: 'less',
  releases: 'Releases',
  killswitch: 'Killswitch',
  watchdog: 'Watchdog',
--- a/lnbits/static/i18n/es.js
+++ b/lnbits/static/i18n/es.js
@ -177,6 +177,7 @@ window.localisation.es = {
  notification_source_label:
    'URL de origen (solo use la fuente oficial de estado de LNbits y fuentes en las que confíe)',
  more: 'más',
+  less: 'menos',
  releases: 'Lanzamientos',
  killswitch: 'Interruptor de apagado',
  watchdog: 'Perro guardián',
--- a/lnbits/static/i18n/fr.js
+++ b/lnbits/static/i18n/fr.js
@ -181,6 +181,7 @@ window.localisation.fr = {
  notification_source_label:
    'URL source (utilisez uniquement la source officielle de statut LNbits et des sources de confiance)',
  more: 'plus',
+  less: 'moins',
  releases: 'Versions',
  killswitch: "Interrupteur d'arrêt",
  watchdog: 'Chien de garde',
--- a/lnbits/static/i18n/it.js
+++ b/lnbits/static/i18n/it.js
@ -177,6 +177,7 @@ window.localisation.it = {
  notification_source_label:
    'URL sorgente (utilizzare solo la fonte ufficiale di stato LNbits e fonti di cui ti puoi fidare)',
  more: 'più',
+  less: 'meno',
  releases: 'Pubblicazioni',
  killswitch: 'Interruttore di spegnimento',
  watchdog: 'Cane da guardia',
--- a/lnbits/static/i18n/jp.js
+++ b/lnbits/static/i18n/jp.js
@ -174,6 +174,7 @@ window.localisation.jp = {
  notification_source_label:
    'ソースURL（公式のLNbitsステータスソースのみを使用し、信頼できるソースのみを利用してください）',
  more: 'より多くの',
+  less: '少ない',
  releases: 'リリース',
  killswitch: 'キルスイッチ',
  watchdog: 'ウォッチドッグ',
--- a/lnbits/static/i18n/kr.js
+++ b/lnbits/static/i18n/kr.js
@ -174,6 +174,7 @@ window.localisation.kr = {
  notification_source_label:
    '알림 메세지를 가져올 URL (공식 LNbits 상황판 출처나, 당신이 신뢰할 수 있는 출처만을 사용하세요)',
  more: '더 알아보기',
+  less: '적게',
  releases: '배포 버전들',
  killswitch: '비상 정지',
  watchdog: '와치독',
--- a/lnbits/static/i18n/nl.js
+++ b/lnbits/static/i18n/nl.js
@ -177,6 +177,7 @@ window.localisation.nl = {
  notification_source_label:
    'Bron-URL (gebruik alleen de officiële LNbits-statusbron en bronnen die u vertrouwt)',
  more: 'meer',
+  less: 'minder',
  releases: 'Uitgaven',
  killswitch: 'Killswitch',
  watchdog: 'Waakhond',
--- a/lnbits/static/i18n/pi.js
+++ b/lnbits/static/i18n/pi.js
@ -176,6 +176,7 @@ window.localisation.pi = {
  notification_source_label:
    "Source URL (only use th' official LNbits status source, and sources ye can trust)",
  more: "Arr, 'tis more.",
+  less: "Arr, 'tis more fewer.",
  releases: 'Releases',
  killswitch: 'Killswitch',
  watchdog: 'Seadog',
--- a/lnbits/static/i18n/pl.js
+++ b/lnbits/static/i18n/pl.js
@ -174,6 +174,7 @@ window.localisation.pl = {
  notification_source_label:
    'Adres URL źródła (używaj tylko oficjalnego źródła statusu LNbits oraz źródeł, którym możesz zaufać)',
  more: 'więcej',
+  less: 'mniej',
  releases: 'Wydania',
  killswitch: 'Killswitch',
  watchdog: 'Pies gończy',
--- a/lnbits/static/i18n/pt.js
+++ b/lnbits/static/i18n/pt.js
@ -176,6 +176,7 @@ window.localisation.pt = {
  notification_source_label:
    'URL de Origem (use apenas a fonte oficial de status do LNbits e fontes em que confia)',
  more: 'mais',
+  less: 'menos',
  releases: 'Lançamentos',
  killswitch: 'Interruptor de desativação',
  watchdog: 'Cão de guarda',
--- a/lnbits/static/i18n/sk.js
+++ b/lnbits/static/i18n/sk.js
@ -174,6 +174,7 @@ window.localisation.sk = {
  notification_source_label:
    'URL zdroja (používajte len oficiálny LNbits zdroj stavu a zdroje, ktorým môžete dôverovať)',
  more: 'viac',
+  less: 'menej',
  releases: 'Vydania',
  killswitch: 'Killswitch',
  watchdog: 'Watchdog',
--- a/lnbits/static/i18n/we.js
+++ b/lnbits/static/i18n/we.js
@ -174,6 +174,7 @@ window.localisation.we = {
  notification_source_label:
    'URL Ffynhonnell (defnyddiwch yn unig ffynhonnell statws swyddogol LNbits, a ffynonellau y gallwch ymddiried ynddynt)',
  more: 'mwy',
+  less: 'llai',
  releases: 'Rhyddhau',
  killswitch: 'Killswitch',
  watchdog: 'Gwyliwr',
--- a/lnbits/static/js/service-worker.js
+++ b/lnbits/static/js/service-worker.js
@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 97
+const CACHE_VERSION = 98
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`

 const getApiKey = request => {
--- a/lnbits/static/js/wallet.js
+++ b/lnbits/static/js/wallet.js
@ -242,6 +242,7 @@ new Vue({
      },
      balance: 0,
      fiatBalance: 0,
+      mobileSimple: false,
      credit: 0,
      update: {
        name: null,
@ -271,6 +272,12 @@ new Vue({

      return LNbits.utils.search(this.payments, q)
    },
+    paymentsOmitter() {
+      if (this.$q.screen.lt.md && this.mobileSimple) {
+        return this.payments.length > 0 ? [this.payments[0]] : []
+      }
+      return this.payments
+    },
    canPay: function () {
      if (!this.parse.invoice) return false
      return this.parse.invoice.sat <= this.balance
@ -861,6 +868,9 @@ new Vue({
      this.decodeRequest()
      this.parse.show = true
    }
+    if (this.$q.screen.lt.md) {
+      this.mobileSimple = true
+    }
    this.fetchBalance()
    this.fetchPayments()

--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@ -64,7 +64,7 @@
            v-text="$t('voidwallet_active')"
            color="red"
            text-color="black"
-            class="q-mr-md"
+            class="q-mr-md gt-md"
          >
          </q-badge>
          {%endif%}