mre formats (#1733)

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

lnbits/static/js/components.js

@@ -214,66 +214,72 @@ Vue.component('lnbits-payment-details', {
   },
   template: `
   <div class="q-py-md" style="text-align: left">
+      
   <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">
     <b v-text="$t('created')"></b>:
     {{ payment.date }} ({{ payment.dateFrom }})
   </div>
+  
   <div class="row">
    <b v-text="$t('expiry')"></b>:
    {{ payment.expirydate }} ({{ payment.expirydateFrom }})
   </div>
+  
   <div class="row">
    <b v-text="$t('amount')"></b>:
     {{ (payment.amount / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}
   </div>
+  
   <div class="row">
     <b v-text="$t('fee')"></b>:
     {{ (payment.fee / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}
   </div>
+  
   <div class="text-wrap">
     <b style="white-space: nowrap;" v-text="$t('payment_hash')"></b>:&nbsp;{{ 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>
+    <b v-text="$t('webhook')"></b>:
-        <div class="col-9 text-wrap mono">
     {{ payment.webhook }}
     <q-badge :color="webhookStatusColor" text-color="white">
       {{ webhookStatusText }}
     </q-badge>
   </div>
-      </div>
+
   <div class="row" v-if="hasPreimage">
-        <div class="col-3"><b v-text="$t('payment_proof')"></b>:</div>
+    <b v-text="$t('payment_proof')"></b>:
-        <div class="col-9 text-wrap mono">{{ payment.preimage }}</div>
+    {{ payment.preimage }}
   </div>
+
   <div class="row" v-for="entry in extras">
-        <div class="col-3">
     <q-badge v-if="hasTag" color="secondary" text-color="white">
       extra
     </q-badge>
     <b>{{ entry.key }}</b>:
+    {{ entry.value }}
   </div>
-        <div class="col-9 text-wrap mono">{{ entry.value }}</div>
+
-      </div>
   <div class="row" v-if="hasSuccessAction">
-        <div class="col-3"><b>Success action</b>:</div>
+    <b>Success action</b>:
-        <div class="col-9">
       <lnbits-lnurlpay-success-action
         :payment="payment"
         :success_action="payment.extra.success_action"
       ></lnbits-lnurlpay-success-action>
   </div>
-      </div>
+
-    </div>
+</div>
   `,
   computed: {
     hasPreimage() {

lnbits/templates/base.html

@@ -238,6 +238,7 @@
         class="bg-transparent q-px-lg q-py-md"
         :class="{'text-dark': !$q.dark.isActive}"
       >
+        <q-space class="q-py-lg lt-sm"></q-space>
         <q-toolbar class="gt-sm">
           <q-toolbar-title class="text-caption">
             {{ SITE_TITLE }}, {{SITE_TAGLINE}}