Format wallet UI tweaks (#1732)

* Formatting wallet stuff

* Bundle fundle

* Added v-if

lnbits/core/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 = 20
+const CACHE_VERSION = 28
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {

lnbits/core/static/js/wallet.js

@@ -145,12 +145,6 @@ new Vue({
       payments: [],
       paymentsTable: {
         columns: [
-          {
-            name: 'memo',
-            align: 'left',
-            label: this.$t('memo'),
-            field: 'memo'
-          },
           {
             name: 'time',
             align: 'left',
@@ -158,18 +152,19 @@ new Vue({
             field: 'date',
             sortable: true
           },
+          {
+            name: 'memo',
+            align: 'left',
+            label: this.$t('memo'),
+            field: 'date',
+            sortable: true
+          },
           {
             name: 'amount',
             align: 'right',
             label: this.$t('amount') + ' (' + LNBITS_DENOMINATION + ')',
             field: 'sat',
             sortable: true
-          },
-          {
-            name: 'fee',
-            align: 'right',
-            label: this.$t('fee') + ' (m' + LNBITS_DENOMINATION + ')',
-            field: 'fee'
           }
         ],
         pagination: {

lnbits/core/templates/core/wallet.html

@@ -149,7 +149,6 @@
               {% raw %}
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th auto-width></q-th>
                   <q-th v-for="col in props.cols" :key="col.name" :props="props"
                     >{{ col.label }}</q-th
                   >
@@ -192,11 +191,11 @@
                       </a>
                     </q-badge>
                     {{ props.row.memo }}
-                  </q-td>
+                    <br />
-                  <q-td auto-width key="time" :props="props">
                     <q-tooltip>{{ props.row.date }}</q-tooltip>
-                    {{ props.row.dateFrom }}
+                    <i> {{ props.row.dateFrom }}</i>
                   </q-td>
+
                   {% endraw %}
                   <q-td
                     auto-width
@@ -209,10 +208,8 @@
                   </q-td>
 
                   <q-td auto-width key="amount" v-else :props="props">
-                    {{ props.row.fsat }}
+                    {{ props.row.fsat }}<br />
-                  </q-td>
+                    <i>fee {{ props.row.fee }}</i>
-                  <q-td auto-width key="fee" :props="props">
-                    {{ props.row.fee }}
                   </q-td>
                 </q-tr>
 
@@ -552,7 +549,7 @@
             </h6>
             <q-separator class="q-my-sm"></q-separator>
             <p class="text-wrap">
-              <strong v-text="$t('description')">:</strong> {{
+              <strong v-text="$t('memo')">:</strong> {{
               parse.invoice.description }}<br />
               <strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
               <strong>Hash:</strong> {{ parse.invoice.hash }}

lnbits/static/js/components.js

@@ -214,37 +214,33 @@ Vue.component('lnbits-payment-details', {
   },
   template: `
     <div class="q-py-md" style="text-align: left">
-      <div class="row justify-center q-mb-md">
+      <div v-if="payment.tag" class="row justify-center q-mb-md">
         <q-badge v-if="hasTag" color="yellow" text-color="black">
           #{{ payment.tag }}
         </q-badge>
       </div>
       <div class="row">
-        <div class="col-3"><b v-text="$t('created')"></b>:</div>
+        <b v-text="$t('created')"></b>:
-        <div class="col-9">{{ payment.date }} ({{ payment.dateFrom }})</div>
+        {{ payment.date }} ({{ payment.dateFrom }})
       </div>
       <div class="row">
-        <div class="col-3"><b v-text="$t('expiry')"></b>:</div>
+       <b v-text="$t('expiry')"></b>:
-        <div class="col-9">{{ payment.expirydate }} ({{ payment.expirydateFrom }})</div>
+       {{ payment.expirydate }} ({{ payment.expirydateFrom }})
       </div>
       <div class="row">
-        <div class="col-3"><b v-text="$t('description')"></b>:</div>
+       <b v-text="$t('amount')"></b>:
-        <div class="col-9">{{ payment.memo }}</div>
+        {{ (payment.amount / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}
       </div>
       <div class="row">
-        <div class="col-3"><b v-text="$t('amount')"></b>:</div>
+        <b v-text="$t('fee')"></b>:
-        <div class="col-9">{{ (payment.amount / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}</div>
+        {{ (payment.fee / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}
       </div>
-      <div class="row">
+      <div class="text-wrap">
-        <div class="col-3"><b v-text="$t('fee')"></b>:</div>
+        <b style="white-space: nowrap;" v-text="$t('payment_hash')"></b>:&nbsp;{{ payment.payment_hash }}
-        <div class="col-9">{{ (payment.fee / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}</div>
-      </div>
-      <div class="row">
-        <div class="col-3"><b v-text="$t('payment_hash')"></b>:</div>
-        <div class="col-9 text-wrap mono">
-            {{ payment.payment_hash }}
             <q-icon name="content_copy" @click="copyText(payment.payment_hash)" size="1em" color="grey" class="q-mb-xs cursor-pointer" />
       </div>
+      <div class="text-wrap">
+        <b style="white-space: nowrap;" v-text="$t('memo')"></b>:&nbsp;{{ payment.memo }}
       </div>
       <div class="row" v-if="payment.webhook">
         <div class="col-3"><b v-text="$t('webhook')"></b>:</div>