Add sticky position on footer buttons#788
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces significant layout and UI improvements to the admin panel. The primary goal is to enhance user experience by constraining the main content area for better readability and ensuring that critical action buttons, such as those in the CreationPanel and various forms, remain visible and accessible via sticky positioning. Highlights
New Features🧠 You can now enable Memory (public preview) to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request restructures the main layout and form actions to support a side-by-side layout with a creation panel, including styling updates for sticky action bars and forms. Feedback highlights several improvements: dynamically adjusting the main content width when the creation panel is collapsed using the :has() selector, localizing hardcoded button labels in SkillEntryCreationForm.razor for internationalization, and adding z-index properties to the sticky .add-new-bar and .form-actions containers to prevent overlapping issues during scrolling.
eduardosmaniotto
changed the title
There was a problem hiding this comment.
Code Review
This pull request refactors layout and styling across several Blazor components, including updates to the creation panel, main layout, configuration grids, and form actions. Key feedback highlights several layout and CSS issues: an overly broad ::deep selector in the creation panel that applies width: 100% to all descendants, a min-width: 50vw on the main layout that could cause horizontal overflow on small screens, a non-standard global width: 10% on checkboxes, a regression where the sidebar navigation loses its sticky positioning, and a missing z-index on the sticky 'Add New' bar.
|
Great, thank you |
drop the "Pre-existing regression" section (Eduardo's MUnique#788 now owns that fix) Review feedback (3 items): - ThemeSelector: drop the constructor, inject NavigationManager as a property to match the [Inject] pattern used by the rest of the project (MapEditor, ConfigurationSearch, NavMenu, ...). - ThemeSelector: prepend a leading slash to the redirect target ("/Theme/Set?...") so it always resolves against the application root, independently of the current route depth. - ThemeController: accept a nullable redirectUri and fall back to LocalRedirect("/") when it is missing or not a local URL, so a malformed request can no longer crash LocalRedirect into a 500. Dark-mode coverage gaps: - theme.css: set `color-scheme: dark` under [data-theme="dark"] so native form controls (unchecked checkboxes/radios, scrollbars, date pickers) render in their dark variant instead of bright white. - Typeahead.razor.css: replace hardcoded #fff/#ced4da/#6c757d/... with the --omu-* variables. Covers every LookupField / MultiLookupField / Typeahead in the panel (auto-form lookups on ItemDefinition, Skill, MonsterDefinition, ..., plus the Connect Server config, item-slot pickers, modal selectors). - theme.css: shift --omu-sidebar-gradient stops from % to vh and add an override for `.sidebar > nav` in dark mode (Navigation.scss hardcodes the light gradient there, would otherwise leak into dark mode). - theme.css: add an override for `.sidebar > nav` in dark mode (Navigation.scss hardcodes the light gradient there, would otherwise leak into dark mode); add an override for `.creation-panel-body .form-actions` introduced by MUnique#788 so the new sticky footer doesn't stay bright white in dark mode.
QuickGrid header/sort/paginator, alert variants, sticky bars
QuickGrid:
- button.col-title + .col-title-text: shared.css globally sets
`button { color: #212529 }` which leaks to the bare <button> used by
the QuickGrid sort header. Narrow override so `.btn-*` variants
(which have their own explicit color) are not affected.
- .sort-indicator and .go-first/previous/next/last: QuickGrid renders
these arrows as SVG data-URIs in `background-image` with no `fill`
attribute, defaulting to black. Can't override SVG fill from outside;
use `filter: invert(1)` so black -> white in dark mode.
Sticky bars added by MUnique#788:
- .add-new-bar (EditConfigGrid.razor.css) hardcodes background-color
#fff and a #dee2e6 top border — same pattern we already overrode for
`.creation-panel-body .form-actions`. Added the analogous override.
Modals:
- .blazored-modal (Blazored.Modal NuGet package, `_content/Blazored.Modal/
blazored.modal.bundle.scp.css`) hardcodes `background-color: #fff` and
white border. Override the panel surface; backdrop is already
`rgba(0, 0, 0, 0.5)` so it works on both themes.
- .multi-lookup-field__* (OpenMU's own multi-select) had hardcoded
Bootstrap defaults across container, tag, dropdown, hover and selected
states. Mapped to --omu-* tokens — fixes the Plugins config modal
(gear icon on a plugin) and the Excellent / Wing options pickers in
ItemEdit.
Bootstrap alert variants (used on Updates.razor and Install.razor):
- .alert-primary, .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-light: light backgrounds + dark text are
illegible on dark mode. Subtle tinted backgrounds (15% accent over
the dark surface) with bright accent text and 40% accent border,
per Bootstrap dark-mode conventions. .alert-secondary stays as it
was overridden in the earlier commit.
- `.alert hr`: Bootstrap sets per-variant `<hr>` border colors as bright
tints of the alert hue (e.g. .alert-primary hr -> rgb(158, 204, 255));
too loud over our dark alert backgrounds. One neutral 15%-white line
for all variants.
2 participants
Summary
Layout changes for the admin panel: makes CreationPanel and "Add New" buttons sticky at the bottom, and cleans up styling for form action buttons.
test.webm