Fix mobile scanner upload flow and fit it to one screen - #7684
Open
Frooodle wants to merge 3 commits into
Open
Conversation
The phone page had four problems after picking a file:
- A successful upload called window.close(), and when the browser
blocked it (always, for a tab opened from a QR code) fell back to
navigating to the editor root, which is auth-gated - so the phone
landed on the login page. It now stays on the success screen and
offers "Scan another". handleHttpError also bounced any 401 to
/login without exempting /mobile-scanner and /mobile-sign.
- The preview pane was a fixed calc(100dvh - 60px) block stacked after
the header and the camera warning, pushing its controls bar - and the
batch strip below it - off the bottom of the screen, so there was no
visible upload button. The page is now one 100dvh flex column with
the primary action pinned to the bottom on every screen.
- The HTTPS/camera warning was permanent and full-size. It is now a
compact dismissible alert, hidden while a preview is waiting.
- Nothing scrolls at any size: every level clips, sizes are clamp()ed
against dvh, the choice cards share the leftover height (side by side
and chrome-free under 34rem tall), and the thumbnail strip shrinks
tiles and collapses extras into a "+N" tile.
Also fixes three bugs in the same flow: the multiple file input only
kept files[0]; the pending preview uploaded ahead of the batch, so page
2 arrived before page 1; and the input was never reset, so re-picking
the same file did nothing. The camera status banner printed developer
strings ("Waiting for video... (12/50)", "jscanify init failed") to
users - that detail now goes to the console and the banner is a plain
"Starting camera...".
Picking several images left two overlapping ideas of "the images": a single pending preview plus a separate batch. That produced a strip labelled "Batch (3)" next to an "Upload (4)" button, a "Clear" that wiped everything sitting beside a "Remove" that dropped only the previewed one, and - worst - thumbnails that could not be tapped, so once an image was removed the rest could not be viewed or removed at all. There is now one list of images and an index into it: - Every thumbnail is a button. Tapping one opens it, ringed in the accent colour with the rest dimmed, and the strip header reads "Image 3 of 5" so position is never in doubt. - Remove drops the open image and lands on a neighbour, so the rest stay reviewable. In camera mode it is labelled Retake and returns to the viewfinder, which is what retaking means. - Add More returns to the viewfinder or reopens the picker; Back leaves the image in place and goes back to capturing. - Clear All sits in the strip header, away from the per-image Remove. - The strip wraps instead of scrolling, and the tile size is chosen from the viewport so every image stays reachable and on screen. Verified across ten viewports from 240x320 to 1024x1366 with 1, 3, 9, 21 and 40 images: nothing renders off screen, nothing scrolls, no thumbnail is clipped out of reach and Upload stays in view. Retires the batch-era keys (addToBatch, batchImages, clearBatch) and renames selectImage to selectImages now the picker takes several.
github-actions
Bot
added
Front End
Contributor
Frontend Check FailedThere are issues with your frontend code that will need to be fixed before they can be merged in. Run |
dosubot
Bot
added
size:XXL
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
file mobile phone scanner UI issues when on http and scaling UI issues
Checklist
General
Documentation
Translations (if applicable)
scripts/counter_translation.pyUI Changes (if applicable)
Testing (if applicable)
task checkto verify linters, typechecks, and tests pass