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

fix(ui): make admin dialogs mobile-friendly + add fullscreen QR zoom #40

Merged
padreug merged 2 commits from fix/mobile-friendly-dialogs-and-QR-zoom into main 2026-07-02 18:56:05 +00:00
Conversation 0 Commits 2 Files changed 2 +16 -8
2 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 282d8e75c5 - Show all commits

fix(ui): make the zoom QR actually fill the screen
Some checks failed
ci.yml / fix(ui): make the zoom QR actually fill the screen (pull_request) Failing after 0s
Details

Prev Next 
lnbits-qrcode has no `options` prop — it renders width:100% of its
parent, capped by a `max-width` PROP that defaults to 450px. So the
previous `:options="{width: qrZoom.size}"` was dead: the QR only ever
grew to its container, and inside the zoom dialog's items-center flex
column the container collapsed to the QR's natural width, so "enlarge"
barely changed anything.

Wrap the zoom QR in an explicit full-width div (capped 96vw), feed the
real `max-width` prop, hide the component's own copy/download buttons
for a clean scan target, and size it to ~full shorter-viewport-edge.
Also swap the inline pair-dialog QR's dead `:options` for `max-width`.
Padreug 2026-07-02 19:58:05 +02:00
commit 282d8e75c5

8
static/js/index.js
View file

@ -1610,12 +1610,14 @@ 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.
// Open a fullscreen QR sized to nearly the full shorter viewport edge
// so it renders as large as possible for a spire's camera. The QR's
// wrapper caps at 96vw, so an over-estimate here is fine — it just
// means "fill the width". Feeds the lnbits-qrcode `max-width` prop.
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.size = Math.max(240, Math.floor(edge - 16))
this.qrZoom.value = value
this.qrZoom.show = true
},

12
templates/spirekeeper/index.html
View file

@ -902,11 +902,11 @@
</q-banner>
<div class="column items-center q-mb-md">
<div class="cursor-pointer"
<div class="cursor-pointer" :style="{width: '280px', maxWidth: '90vw'}"
@click="openQrZoom(pairDialog.result.seed_url)">
<lnbits-qrcode
:value="pairDialog.result.seed_url"
:options="{width: 280}"></lnbits-qrcode>
:max-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"
@ -957,9 +957,15 @@
</q-bar>
<q-card-section
class="col column items-center justify-center q-pt-none">
<!-- lnbits-qrcode renders width:100% of its parent capped by the
max-width prop (NOT an `options` prop). Give it an explicit
full-width wrapper so it actually fills the screen. -->
<div :style="{width: qrZoom.size + 'px', maxWidth: '96vw'}">
<lnbits-qrcode
:value="qrZoom.value"
:options="{width: qrZoom.size}"></lnbits-qrcode>
:max-width="qrZoom.size"
:show-buttons="false"></lnbits-qrcode>
</div>
<div class="text-caption text-center q-mt-md" :style="{opacity: 0.7}">
Point the spire's camera here — tap Close when scanned.
</div>