[GrandComicsDatabase/gcd-django] Keep editing form actions visible while scrolling (PR #770)
Simone Nardi
Overview
A small UX improvement with a significant impact on editing productivity: action buttons remain visible while scrolling through long forms, reducing the need to scroll all the way to the bottom to save changes or continue editing.
Features
- Add a shared sticky action bar to revision, inline editing, and add forms.
- Preserve existing button styling and allow buttons to wrap on smaller screens.
- Compile the shared stylesheet with Tailwind 3.4.1, preserving existing CSS classes.
Validation
git diff --checkpasses.- The local server serves the updated CSS.
You can view, comment on, or merge this pull request online at:
https://github.com/GrandComicsDatabase/gcd-django/pull/770
Commit Summary
- 9c2e4b5 Keep editing form actions visible while scrolling
File Changes
(5 files)
- M static/css/input.css (10)
- M static/css/output.css (10)
- M templates/oi/edit/add_frame.html (2)
- M templates/oi/edit/include_frame.html (2)
- M templates/oi/edit/revision.html (2)
Patch Links:
- https://github.com/GrandComicsDatabase/gcd-django/pull/770.patch
- https://github.com/GrandComicsDatabase/gcd-django/pull/770.diff
—
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
gemini-code-assist[bot]
@gemini-code-assist[bot] commented on this pull request.
Code Review
This pull request introduces a new .editing-actions CSS class to implement a sticky action bar at the bottom of various editing templates, ensuring that action buttons remain accessible while scrolling. The reviewer suggested improving the visual separation and UX by adding a top border, vertical padding, and adjusting the safe-area inset calculation to prevent content from blending into the sticky bar.
> + .editing-actions {
+ position: sticky;
+ bottom: 0;
+ z-index: 50;
+ display: flex;
+ flex-wrap: wrap;
+ background: white;
+ padding-bottom: env(safe-area-inset-bottom);
+ }
Without a top border or shadow, the sticky action bar blends directly into the form content scrolling underneath it, causing text to abruptly cut off and making the interface look unpolished. Additionally, adding some top and bottom padding ensures the buttons have adequate breathing room and don't sit too close to the edges of the sticky container.\n\nUsing a top border and vertical padding (with a calc fallback for the safe-area inset) will significantly improve the visual separation and overall UX.
.editing-actions {\n position: sticky;\n bottom: 0;\n z-index: 50;\n display: flex;\n flex-wrap: wrap;\n background: white;\n @apply border-t border-gray-200 pt-2 pb-2;\n padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));\n }
—
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- 4fa3c08 Add separation and spacing to sticky form actions
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi commented on this pull request.
> + .editing-actions {
+ position: sticky;
+ bottom: 0;
+ z-index: 50;
+ display: flex;
+ flex-wrap: wrap;
+ background: white;
+ padding-bottom: env(safe-area-inset-bottom);
+ }
Implemented
—
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
JochenGCD
@jochengcd commented on this pull request.
> + position: sticky; + bottom: 0; + z-index: 50; + display: flex; + flex-wrap: wrap; + background: white; + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
This should be based on tailwind.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- 9d1b2df Use Tailwind utilities for sticky form actions
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi commented on this pull request.
> + position: sticky; + bottom: 0; + z-index: 50; + display: flex; + flex-wrap: wrap; + background: white; + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
Commit: 9d1b2df — Use Tailwind utilities for sticky form actions.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- bc24486 Merge beta into sticky form actions
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.
Simone Nardi
@ProfNardi pushed 1 commit.
- 1a8dd50 Merge beta into sticky form actions and preserve page-count validation
—
View it on GitHub or unsubscribe.
Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today!
You are receiving this because you are subscribed to this thread.