Simplified mobile wallet (#2175)

---------

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>
Co-authored-by: Pavol Rusnak <pavol@rusnak.io>

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">
+            <div class="row">
-              <span
+              <div class="col">
-                class="text-h5 text-italic"
+                <div v-if="g.wallet.currency">
-                v-text="formattedFiatBalance"
+                  <span
-                style="opacity: 0.75"
+                    class="text-h5 text-italic"
-              ></span>
+                    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">

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',

lnbits/static/i18n/cn.js

@@ -166,6 +166,7 @@ window.localisation.cn = {
   notification_source: '通知来源',
   notification_source_label: '来源 URL（仅使用官方LNbits状态源和您信任的源）',
   more: '更多',
+  less: '少',
   releases: '版本',
   killswitch: '杀手锏',
   watchdog: '监控程序',

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',

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',

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',

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',

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',

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',

lnbits/static/i18n/jp.js

@@ -174,6 +174,7 @@ window.localisation.jp = {
   notification_source_label:
     'ソースURL（公式のLNbitsステータスソースのみを使用し、信頼できるソースのみを利用してください）',
   more: 'より多くの',
+  less: '少ない',
   releases: 'リリース',
   killswitch: 'キルスイッチ',
   watchdog: 'ウォッチドッグ',

lnbits/static/i18n/kr.js

@@ -174,6 +174,7 @@ window.localisation.kr = {
   notification_source_label:
     '알림 메세지를 가져올 URL (공식 LNbits 상황판 출처나, 당신이 신뢰할 수 있는 출처만을 사용하세요)',
   more: '더 알아보기',
+  less: '적게',
   releases: '배포 버전들',
   killswitch: '비상 정지',
   watchdog: '와치독',

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',

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',

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',

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',

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',

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',

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 => {

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()
 

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%}