fix: improve tablet/wide UX

static/components/payment-method-selector.js

@@ -0,0 +1,116 @@
+window.app.component('tpos-payment-method-selector', {
+  name: 'tpos-payment-method-selector',
+  props: {
+    bitcoinSymbol: {type: String, required: true},
+    currency: {type: String, required: true},
+    currencySymbol: {type: String, required: true},
+    fiatProvider: {type: Boolean, default: false},
+    allowCashSettlement: {type: Boolean, default: false},
+    onchainEnabled: {type: Boolean, default: false},
+    tabsEnabled: {type: Boolean, default: false},
+    isSettlingTab: {type: Boolean, default: false},
+    drawer: {type: Boolean, default: false},
+    disabled: {type: Boolean, default: false}
+  },
+  emits: ['select'],
+  template: `
+    <div class="row q-col-gutter-sm q-pt-xs">
+      <div class="col-6">
+        <q-btn
+          class="full-width q-px-lg q-py-sm"
+          :size="drawer ? 'lg' : 'xl'"
+          color="primary"
+          rounded
+          :disable="disabled"
+          aria-label="Lightning Network"
+          @click="$emit('select', 'btc')"
+        >
+          <div class="row items-center no-wrap q-gutter-x-sm">
+            <span class="text-h4 text-weight-bold" v-text="bitcoinSymbol"></span>
+            <span class="text-subtitle1 text-weight-medium">Lightning</span>
+          </div>
+        </q-btn>
+      </div>
+      <div class="col-6" v-if="onchainEnabled">
+        <q-btn
+          class="full-width q-px-lg q-py-sm"
+          :size="drawer ? 'lg' : 'xl'"
+          color="primary"
+          rounded
+          :disable="disabled"
+          aria-label="Bitcoin Onchain"
+          @click="$emit('select', 'btc_onchain')"
+        >
+          <div class="row items-center no-wrap q-gutter-x-sm">
+            <span class="text-h4 text-weight-bold" v-text="bitcoinSymbol"></span>
+            <span class="text-subtitle1 text-weight-medium">Onchain</span>
+          </div>
+        </q-btn>
+      </div>
+      <div class="col-6" v-if="fiatProvider">
+        <q-btn
+          class="full-width q-px-lg q-py-sm"
+          :size="drawer ? 'lg' : 'xl'"
+          color="secondary"
+          rounded
+          :disable="disabled"
+          :aria-label="currency + ' QR'"
+          @click="$emit('select', 'fiat')"
+        >
+          <div class="row items-center no-wrap q-gutter-x-xs">
+            <span class="text-h5 text-weight-bold" v-text="currencySymbol"></span>
+            <q-icon name="qr_code" size="30px"></q-icon>
+          </div>
+        </q-btn>
+      </div>
+      <div class="col-6" v-if="allowCashSettlement && currency != 'sats'">
+        <q-btn
+          class="full-width q-px-lg q-py-sm"
+          :size="drawer ? 'lg' : 'xl'"
+          color="secondary"
+          rounded
+          :disable="disabled"
+          :aria-label="currency + ' TAP'"
+          @click="$emit('select', 'cash')"
+        >
+          <div class="row items-center no-wrap q-gutter-x-xs">
+            <span class="text-h5 text-weight-bold" v-text="currencySymbol"></span>
+            <q-icon name="toll" size="30px"></q-icon>
+          </div>
+        </q-btn>
+      </div>
+      <div class="col-6" v-if="fiatProvider">
+        <q-btn
+          class="full-width q-px-lg q-py-sm"
+          :size="drawer ? 'lg' : 'xl'"
+          color="secondary"
+          rounded
+          :disable="disabled"
+          :aria-label="'CASH ' + currency"
+          @click="$emit('select', 'fiat_tap')"
+        >
+          <div class="row items-center no-wrap q-gutter-x-xs">
+            <span class="text-h5 text-weight-bold" v-text="currencySymbol"></span>
+            <q-icon name="credit_card" size="30px"></q-icon>
+          </div>
+        </q-btn>
+      </div>
+      <div class="col-6" v-if="tabsEnabled && !isSettlingTab">
+        <q-btn
+          class="full-width q-px-lg q-py-sm"
+          :size="drawer ? 'lg' : 'xl'"
+          color="secondary"
+          rounded
+          :disable="disabled"
+          aria-label="Add to tab"
+          @click="$emit('select', 'tab')"
+        >
+          <div class="row items-center no-wrap q-gutter-x-xs">
+            <q-icon class="text-h4" name="playlist_add_check"></q-icon>
+            <span class="text-subtitle1 text-weight-medium">Tab</span>
+          </div>
+        </q-btn>
+      </div>
+    </div>
+  `
+})

static/js/tpos.js

@@ -4,6 +4,11 @@ const {
   roundTposCurrencyAmount
 } = window.tposUtils
 
+const TILE_SIZE_DEFAULT = 150
+const TILE_SIZE_MIN = 80
+const TILE_SIZE_MAX = 240
+const TILE_SIZE_STEP = 10
+
 window.app = Vue.createApp({
   el: '#vue',
   mixins: [window.windowMixin],
@@ -80,7 +85,8 @@ window.app = Vue.createApp({
       pendingTabSettlement: null,
       cashValidating: false,
       tipDialog: {
-        show: false
+        show: false,
+        paymentMethod: null
       },
       urlDialog: {
         show: false
@@ -91,6 +97,7 @@ window.app = Vue.createApp({
       rounding: false,
       isFullScreen: false,
       isGridView: this.$q.screen.gt.sm,
+      tileSize: TILE_SIZE_DEFAULT,
       moreBtn: false,
       total: 0.0,
       cartTax: 0.0,
@@ -311,8 +318,14 @@ window.app = Vue.createApp({
     drawerWidth() {
       return this.$q.screen.lt.sm ? 360 : 450
     },
-    drawerItemsHeight() {
-      return `overflow-y: auto; height: ${this.$q.screen.gt.sm ? 'calc(100vh - 400px)' : 'calc(100vh - 465px)'}`
+    tileSizeStorageKey() {
+      return `lnbits.tpos.${this.tposId}.tileSize`
+    },
+    tileImageStyle() {
+      return {
+        height: `${Math.max(this.tileSize - 36, 32)}px`,
+        flex: '0 0 auto'
+      }
     },
     formattedCartTax() {
       return this.formatAmount(this.cartTax, this.currency)
@@ -921,25 +934,27 @@ window.app = Vue.createApp({
       }, 3000)
     },
     processTipSelection(selectedTipOption) {
+      const selectedPaymentMethod = this.tipDialog.paymentMethod
+      this.tipDialog.paymentMethod = null
       this.tipDialog.show = false
       if (!selectedTipOption) {
         this.tipAmount = 0.0
-        return this.showInvoice()
+        return this.showInvoice(selectedPaymentMethod)
       }
 
       this.tipAmount = roundTposCurrencyAmount(
         (selectedTipOption / 100) * this.activePaymentAmount,
         this.currency
       )
-      this.showInvoice()
+      this.showInvoice(selectedPaymentMethod)
     },
     resetPaymentAttempt() {
       this.paymentAmount = null
       this.tipAmount = 0.0
       this.rounding = false
       this.tipRounding = null
     },
-    submitForm() {
+    submitForm(selectedPaymentMethod = null) {
       const paymentAmount =
         this.total > 0.0
           ? roundTposCurrencyAmount(this.total + this.amount, this.currency)
@@ -949,6 +964,7 @@ window.app = Vue.createApp({
       this.sat = Math.ceil(paymentAmount * this.exchangeRate)
 
       if (!this.exchangeRate || this.exchangeRate == 0 || this.sat == 0) {
+        this.tipDialog.paymentMethod = null
         Quasar.Notify.create({
           type: 'negative',
           message:
@@ -957,19 +973,24 @@ window.app = Vue.createApp({
         return
       }
 
+      this.tipDialog.paymentMethod = selectedPaymentMethod
       if (this.tip_options && this.tip_options.length) {
         this.rounding = false
         this.tipRounding = null
         this.showTipModal()
       } else {
-        this.showInvoice()
+        const method = this.tipDialog.paymentMethod
+        this.tipDialog.paymentMethod = null
+        this.showInvoice(method)
       }
     },
     showTipModal() {
       if (!this.atmMode) {
         this.tipDialog.show = true
       } else {
-        this.showInvoice()
+        const method = this.tipDialog.paymentMethod
+        this.tipDialog.paymentMethod = null
+        this.showInvoice(method)
       }
     },
     showPaymentMethod() {
@@ -981,30 +1002,47 @@ window.app = Vue.createApp({
     selectPaymentMethod(method) {
       this.currency_choice = false
       if (this._currencyResolver) {
-        switch (method) {
-          case 'fiat_tap':
-            this.fiatMethod = 'terminal'
-            method = 'fiat'
-            break
-          case 'fiat':
-            this.fiatMethod = 'checkout'
-            break
-          case 'cash':
-            this.fiatMethod = 'cash'
-            method = 'fiat'
-            break
-          case 'btc':
-          case 'btc_onchain':
-            this.fiatMethod = 'checkout'
-            break
-          case 'tab':
-            this.fiatMethod = 'checkout'
-            break
-        }
-        this._currencyResolver(method)
+        this._currencyResolver(this.normalizePaymentMethod(method))
         this._currencyResolver = null
       }
     },
+    normalizePaymentMethod(method) {
+      switch (method) {
+        case 'fiat_tap':
+          this.fiatMethod = 'terminal'
+          return 'fiat'
+        case 'fiat':
+          this.fiatMethod = 'checkout'
+          return 'fiat'
+        case 'cash':
+          this.fiatMethod = 'cash'
+          return 'fiat'
+        case 'btc':
+        case 'btc_onchain':
+        case 'tab':
+          this.fiatMethod = 'checkout'
+          return method
+        default:
+          return method
+      }
+    },
+    normalizeTileSize(value) {
+      if (
+        value === null ||
+        value === undefined ||
+        (typeof value === 'string' && !value.trim())
+      ) {
+        return TILE_SIZE_DEFAULT
+      }
+      const parsed = Number(value)
+      if (!Number.isFinite(parsed)) return TILE_SIZE_DEFAULT
+      const bounded = Math.min(TILE_SIZE_MAX, Math.max(TILE_SIZE_MIN, parsed))
+      return Math.round(bounded / TILE_SIZE_STEP) * TILE_SIZE_STEP
+    },
+    persistTileSize(value) {
+      this.tileSize = this.normalizeTileSize(value)
+      this.$q.localStorage.set(this.tileSizeStorageKey, this.tileSize)
+    },
     normalizeApiAmount(currency, value) {
       if (value === null || value === undefined || value === '') return null
       const parsed = Number(value)
@@ -1285,7 +1323,7 @@ window.app = Vue.createApp({
       }
       return params
     },
-    async showInvoice() {
+    async showInvoice(selectedPaymentMethod = null) {
       if (this.atmMode) {
         this.atmGetWithdraw()
         return
@@ -1298,7 +1336,9 @@ window.app = Vue.createApp({
         this.isSettlingTab ||
         (this.tabsEnabled && !this.isSettlingTab)
       ) {
-        const method = await this.showPaymentMethod()
+        const method = selectedPaymentMethod
+          ? this.normalizePaymentMethod(selectedPaymentMethod)
+          : await this.showPaymentMethod()
         if (method === 'tab') {
           await this.openTabChargeDialog()
           return
@@ -1868,6 +1908,9 @@ window.app = Vue.createApp({
     this.amountFormatted = this.formatAmount(this.amount, this.currency)
     this.totalFormatted = this.formatAmount(this.total, this.currency)
     this.tposId = tpos.id
+    this.tileSize = this.normalizeTileSize(
+      this.$q.localStorage.getItem(this.tileSizeStorageKey)
+    )
     this.atmPremium = tpos.withdraw_premium / 100
     this.withdrawMaximum = withdraw_maximum
     this.pinDisabled = tpos.withdraw_pin_disabled