Mobile photo filmstrip + FAB, and enclose the desktop photo sidebar#70
Merged
Conversation
The hidden file input + addFiles wiring was copy-pasted across the sidebar and hero (and about to be again for the mobile FAB and tile). Pull it into useAddPhotos + a shared PHOTO_ACCEPT constant.
On phones the vertical photo list pushed the sheet far down the page. Below lg, hide the sidebar and show a horizontal, sideways-scrolling filmstrip (a + tile first, then draggable thumbnails) so any number of photos stays one row tall, plus a floating add-photos FAB. Desktop keeps the three-column layout untouched.
Make the drag-and-drop target fill the sidebar's height instead of a fixed square, and switch the Add-photos button to an outline style that fills coral only on hover.
So it stays distinct when it floats over the coral Export button.
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.
On phones the vertical photo list sat above the sheet, so a handful of photos pushed the canvas far down the page. This reworks the photo UI responsively while leaving desktop's three-column layout untouched.
lg): the sidebar is hidden and photos become a horizontal, sideways-scrolling filmstrip — a "+" tile first, then draggable thumbnails — so any number of photos stays one row tall and the sheet is visible immediately. A coral floating add-photos FAB sits bottom-right (with a stronger shadow + background ring so it stays distinct when it floats over the Export button). Tap a thumbnail to select/edit its frame, × to remove, drag to reorder.useAddPhotoshook +PHOTO_ACCEPTconstant, reused by the sidebar, hero, FAB, and filmstrip tile.Before any photo exists, the centre empty-state hero still carries the first add on both layouts.
Typecheck, lint, and build all pass.