aiolabs/spirekeeper
9
0
Fork 0
Code Issues 25 Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): make spirekeeper dialogs mobile-friendly + add fullscreen QR zoom
Some checks failed
ci.yml / fix(ui): make spirekeeper dialogs mobile-friendly + add fullscreen QR zoom (pull_request) Failing after 0s
Details

Browse source 
The `min-width: 480px` on dialog cards overrode `max-width: 95vw` on
narrow viewports (CSS min-width wins on conflict), so add-machine / pair
/ etc. dialogs overflowed off-screen on phones. Switch every dialog card
from minWidth to width so maxWidth can shrink it to fit.

Also cap the tall add-machine form section at 65vh with a scroll
container so all fields stay reachable on short screens.

For pairing, the seed-URL QR is now tappable and has an "Enlarge for
scanning" button opening a fullscreen maximized QR sized to the shorter
viewport edge — maximises visibility to the spire's scan camera.
This commit is contained in:
Padreug 2026-07-02 19:36:07 +02:00
commit 015208500a
2 changed files with 62 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

17
static/js/index.js
View file

@ -200,6 +200,13 @@ window.app = Vue.createApp({
durationHours: null,
result: null
},
// Fullscreen QR overlay — maximises a QR's on-screen size so a spire
// camera can lock onto it. openQrZoom() sizes it to the viewport.
qrZoom: {
show: false,
value: '',
size: 280
},
machineDetail: {
show: false,
loading: false,
@ -1603,6 +1610,16 @@ window.app = Vue.createApp({
})
},
// Open a fullscreen QR sized to the shorter viewport edge (minus a
// margin) so it renders as large as possible for a spire's camera.
openQrZoom(value) {
if (!value) return
const edge = Math.min(window.innerWidth, window.innerHeight)
this.qrZoom.size = Math.max(240, Math.floor(edge - 64))
this.qrZoom.value = value
this.qrZoom.show = true
},
_emptyDepositForm() {
// currency is server-resolved from the selected client's machine
// fiat_code (see #26); not stored on the form, just displayed in

55
templates/spirekeeper/index.html
View file

@ -763,13 +763,13 @@
<!-- ADD MACHINE DIALOG -->
<!-- =============================================================== -->
<q-dialog v-model="addMachineDialog.show" persistent>
<q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
<q-card :style="{width: '480px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Add bitSpire machine</div>
<q-space ></q-space>
<q-btn icon="close" flat round dense v-close-popup></q-btn>
</q-card-section>
<q-card-section>
<q-card-section class="scroll" :style="{maxHeight: '65vh'}">
<p class="text-caption q-mb-md" :style="{opacity: 0.7}">
Register an ATM by its Nostr public key. Choose the LNbits wallet that
will receive cash-out payments from this machine — settlements there
@ -847,7 +847,7 @@
<!-- PAIR SPIRE DIALOG — mint bunker key + one-shot seed URL (S0/#9) -->
<!-- =============================================================== -->
<q-dialog v-model="pairDialog.show" persistent>
<q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
<q-card :style="{width: '480px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Pair spire</div>
<q-space></q-space>
@ -901,11 +901,17 @@
into <code>provision-atm</code>. Shown once — copy it now.
</q-banner>
<div class="row justify-center q-mb-md">
<div class="column items-center q-mb-md">
<div class="cursor-pointer"
@click="openQrZoom(pairDialog.result.seed_url)">
<lnbits-qrcode
:value="pairDialog.result.seed_url"
:options="{width: 280}"></lnbits-qrcode>
</div>
<q-btn flat dense color="primary" icon="zoom_out_map"
label="Enlarge for scanning" size="sm" class="q-mt-sm"
@click="openQrZoom(pairDialog.result.seed_url)"></q-btn>
</div>
<q-input
v-model="pairDialog.result.seed_url"
@ -938,6 +944,29 @@
</q-card>
</q-dialog>
<!-- =============================================================== -->
<!-- QR ZOOM DIALOG — fullscreen QR to maximise scan visibility -->
<!-- =============================================================== -->
<q-dialog v-model="qrZoom.show" maximized>
<q-card class="bg-white text-grey-9 column no-wrap">
<q-bar class="bg-white">
<q-space></q-space>
<q-btn dense flat icon="close" color="grey-9" v-close-popup>
<q-tooltip>Close</q-tooltip>
</q-btn>
</q-bar>
<q-card-section
class="col column items-center justify-center q-pt-none">
<lnbits-qrcode
:value="qrZoom.value"
:options="{width: qrZoom.size}"></lnbits-qrcode>
<div class="text-caption text-center q-mt-md" :style="{opacity: 0.7}">
Point the spire's camera here — tap Close when scanned.
</div>
</q-card-section>
</q-card>
</q-dialog>
<!-- =============================================================== -->
<!-- MACHINE DETAIL DIALOG — settlements list + per-row actions -->
<!-- =============================================================== -->
@ -1212,7 +1241,7 @@
<!-- CASSETTE PUBLISH CONFIRM DIALOG -->
<!-- =============================================================== -->
<q-dialog v-model="cassettePublishConfirm.show" persistent>
<q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
<q-card :style="{width: '480px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Publish cassette config to ATM</div>
<q-space ></q-space>
@ -1264,7 +1293,7 @@
<!-- PARTIAL-DISPENSE DIALOG -->
<!-- =============================================================== -->
<q-dialog v-model="partialDispenseDialog.show" persistent>
<q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
<q-card :style="{width: '480px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Apply partial dispense</div>
<q-space ></q-space>
@ -1323,7 +1352,7 @@
<!-- ADD-NOTE DIALOG -->
<!-- =============================================================== -->
<q-dialog v-model="noteDialog.show" persistent>
<q-card :style="{minWidth: '420px', maxWidth: '95vw'}">
<q-card :style="{width: '420px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Add note to settlement</div>
<q-space ></q-space>
@ -1353,7 +1382,7 @@
<!-- SUPER-FEE EDIT DIALOG (super-only) -->
<!-- =============================================================== -->
<q-dialog v-model="superFeeDialog.show" persistent>
<q-card :style="{minWidth: '460px', maxWidth: '95vw'}">
<q-card :style="{width: '460px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Platform fee (super-only)</div>
<q-space ></q-space>
@ -1400,7 +1429,7 @@
<!-- ADD / EDIT DEPOSIT DIALOG -->
<!-- =============================================================== -->
<q-dialog v-model="depositDialog.show" persistent>
<q-card :style="{minWidth: '460px', maxWidth: '95vw'}">
<q-card :style="{width: '460px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6"
v-text="depositDialog.mode === 'add' ? 'Record deposit' : 'Edit deposit'"></div>
@ -1466,7 +1495,7 @@
<!-- REJECT DEPOSIT DIALOG (status update with notes) -->
<!-- =============================================================== -->
<q-dialog v-model="rejectDepositDialog.show" persistent>
<q-card :style="{minWidth: '420px', maxWidth: '95vw'}">
<q-card :style="{width: '420px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Reject deposit</div>
<q-space ></q-space>
@ -1495,7 +1524,7 @@
<!-- ADD / EDIT CLIENT DIALOGS -->
<!-- =============================================================== -->
<q-dialog v-model="clientDialog.show" persistent>
<q-card :style="{minWidth: '520px', maxWidth: '95vw'}">
<q-card :style="{width: '520px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6" v-text="clientDialog.mode === 'add' ? 'Register liquidity provider' : 'Edit LP'"></div>
<q-space ></q-space>
@ -1552,7 +1581,7 @@
<!-- SETTLE BALANCE DIALOG (closes spirekeeper#2) -->
<!-- =============================================================== -->
<q-dialog v-model="settleBalanceDialog.show" persistent>
<q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
<q-card :style="{width: '480px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Settle LP balance</div>
<q-space ></q-space>
@ -1611,7 +1640,7 @@
<!-- EDIT MACHINE DIALOG (same fields; PUT instead of POST) -->
<!-- =============================================================== -->
<q-dialog v-model="editMachineDialog.show" persistent>
<q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
<q-card :style="{width: '480px', maxWidth: '95vw'}">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Edit machine</div>
<q-space ></q-space>