Modernize profile page styles#112
Open
hendriebeats wants to merge 7 commits into
Open
Conversation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add id attributes to profile form inputs so label for= attributes actually work (clicking "Name"/"Email" now focuses the right input; both labels previously pointed to a non-existent id) - Replace ambient .profileCard form div selector with .checkboxRow to avoid unintended matches on future divs inside card forms - Apply checkboxRow class to feature checkbox wrapper elements - Convert #12 hex-alpha shadow to rgba(0,0,0,0.07) for broader browser compatibility and consistency with the avatar shadow above it
Both profile forms (info and features) now start with their Save button disabled. A FormData snapshot is taken after inputs.js initialises values on page load; any input/change event re-enables the button only when the current state differs from that baseline. After a successful HTMX swap the swapped-in form re-initialises, returning the button to disabled with the fresh server values as the new baseline.
hendriebeats
added
Size: Medium
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.
Redesigns the profile page with a card-based layout, an avatar header showing the user's name and email, and constrained-width content area. Save buttons are disabled until the user actually changes something.
Layout & scroll
html, body { overflow: hidden }: The scroll container is#profileScroll(not the body), so this prevents a double scrollbar — one from the browser and one from the inner div.height: calc(100vh - 52px): The 52px accounts for the fixed nav height so the scroll area fills exactly the remaining viewport.#profileScroll: Keeps the footer at the bottom of the scroll container (margin-top: auto) rather than below it.Dirty-tracking (Save button enabled state)
disabledin the template: Guarantees they're inactive even before JS runs, avoiding a flash of an enabled button on load.FormDatasnapshot as baseline: Captures text inputs and checkboxes uniformly without manually enumerating fields; works for both forms with a single approach.window load(notDOMContentLoaded):inputs.js(also onload) resets input values from their HTML attributes to work around HTMX re-use quirks — our snapshot must run after that, and same-event listeners fire in registration order.htmx:afterSwapre-init: After a successful save HTMX replaces the form's outerHTML; the new form's saved values become the new baseline so the button returns to disabled.cursor: defaultonbutton.blue:disabled: The previousnot-allowedcursor and red border were jarring for a "nothing has changed yet" state; the lighter blue background alone is sufficient to indicate the button is inactive.Other
forfix: Both labels previously pointed tofor="name"with no matchingid; clicking "Email" would have focused the name input. Prefixed ids (profileName,profileEmail) avoid any collision with other forms on the page.checkboxRowclass: Replaced the ambient.profileCard form divselector (which would match any future div inside a card form) with an explicit opt-in class.GroupStudy - …) from the feature toggle label; the description alone is sufficient now that it reads "Group Studies (Beta)".