fix(server): polish home bulk-action & upload UI/UX#3066
Merged
Conversation
Follow-up UI/UX pass over the recently shipped bulk asset management (#3048), multi-file upload (#3049), and ffmpeg/HandBrake rejection hints (#3040). - Reserve bottom space (.has-bulk-selection) while a selection is active so the fixed bulk-action bar never floats over the last rows or their action buttons — exactly the assets a bulk selection targets. - Cap .modal-card to the viewport and scroll inside it, with sticky header/footer, so a tall bulk-edit form (or the Edit modal with the failure alert + Advanced open) keeps its title and Apply/Save buttons reachable instead of pushing them below the fold. - Wire real drag-and-drop on the upload dropzone (dropFiles() feeds the same sequential uploadFiles() batch path); the dashed zone already read as a drop target but silently ignored drops. - Lift the selection checkbox contrast on the dark Enabled surface so the select-all (checked/indeterminate) and per-row boxes are legible against the purple gradient; scoped to .asset-select so the activity switch keeps its track styling. - Anchor the bulk bar's clear (x) to the top-right on phones so it no longer wraps beside the destructive Delete (mis-tap risk). - Stack the ffmpeg recipe's copy button under the command at narrow widths; make the empty-state CTA a <button> (action, not nav); drop the bulk duration field's placeholder that collided with its floating label. Presentational only — no API/model changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
UI/UX polish for the home page’s bulk actions and upload flow, focusing on layout correctness (bulk bar + tall modals) and improving the upload dropzone interaction, without changing server APIs or models.
Changes:
- Reserve bottom padding on the home container while bulk selection is active to prevent the fixed bulk-action bar from covering/capturing clicks on the last rows.
- Make tall modals scroll internally with sticky header/footer so key actions (Save/Apply) remain reachable.
- Improve upload UX: accept drag-and-drop on the upload dropzone (with drag-over highlighting) and refine a few small UI affordances (empty-state CTA semantics, checkbox contrast, mobile bulk-bar clear button positioning, ffmpeg recipe layout on narrow widths).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/anthias_server/app/templates/home.html |
Adds Alpine-bound class to reserve space when bulk selection is active. |
src/anthias_server/app/templates/_empty_assets.html |
Changes empty-state CTA from link to button for correct semantics. |
src/anthias_server/app/templates/_bulk_edit_modal.html |
Removes duration placeholder that clashes with floating label. |
src/anthias_server/app/templates/_asset_modal.html |
Adds drag/drop handlers and drag-over styling hook to upload dropzone. |
src/anthias_server/app/static/src/home.ts |
Adds dragActive state and dropFiles() to feed dropped files into existing upload flow. |
src/anthias_server/app/static/sass/_styles.scss |
Adds styling for new button CTA, sticky modal header/footer + internal scroll, drag-over state, bulk-bar mobile tweaks, bulk-bar space reservation, checkbox contrast, and narrow ffmpeg recipe layout. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Copilot review on #3066: dragleave bubbles from the dropzone's child icon/paragraphs, toggling dragActive off while the cursor is still over the label and flickering the highlight. Add the .self modifier so the handler only runs when leaving the label itself. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Second Copilot pass on #3066: dragActive could stay true if the user drags into the dropzone then closes the Add modal (Esc/backdrop/Cancel) before dragleave fires, so the dropzone re-opened still highlighted. Reset dragActive in closeModal() alongside the other modal state. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
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
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.
Issues Fixed
Follow-up UI/UX polish on the recently shipped home-page work: bulk asset management (#3048), multi-file upload (#3049), and the ffmpeg/HandBrake rejection hints (#3040). No associated issue — found during a design review of those changes.
Description
Presentational-only pass (no API/model changes). Each fix is verified by compiling the real stylesheet and rendering the affected components in headless Chromium at desktop + mobile widths.
.app-containernow gets.has-bulk-selection(bound toselectedIds.length) which reserves bottom padding while a selection is active..modal-cardis capped to the viewport and scrolls internally, withposition: stickyheader/footer — so the bulk-edit form with every group expanded (or the Edit modal with the failure alert + Advanced open) keeps its title and Apply/Save buttons reachable.dropFiles()feeds the droppedFileListthrough the same sequentialuploadFiles()batch path, plus anis-dragoverhighlight..asset-selectso the activity switch keeps its track styling.<button>(action, not navigation); removed the bulk durationplaceholderthat collided with its floating label.Checklist
🤖 Generated with Claude Code