From f7b10f2ff7105d1b3f7128e26542b031d4875bbc Mon Sep 17 00:00:00 2001 From: Joseph Doherty Date: Tue, 12 May 2026 03:32:07 -0400 Subject: [PATCH] refactor(ui/shared): scroll-lock, escape, aria-live, responsive sidebar ConfirmDialog locks body scroll via IJSRuntime + Bootstrap's modal-open class on show, restores on hide. Escape key now closes the dialog; default ConfirmButtonClass flipped from btn-danger to btn-primary so non-destructive confirms aren't red. Destructive callsites (Delete, Discard) get explicit ConfirmButtonClass="btn-danger". ToastNotification adds aria-live="polite" + aria-atomic="true" on the container and an optional autoDismissMs parameter on every Show* method. LoadingSpinner text-muted -> text-secondary for contrast. DataTable gains a clear (x) button on the search input and applies disabled / aria-disabled directly to the pagination buttons. NewFolderDialog splits backdrop and modal markup to match ConfirmDialog. NavMenu wraps the nav list in an overflow-y scroll container so the username/sign-out footer stays anchored, and section headers convert from
  • to
    . MainLayout adds a hamburger toggle for block to a shared site.css; adds a left-border accent on the active nav link; switches the reconnect modal to modal-dialog-centered. Login uses d-flex / min-vh-100 centering. NotAuthorizedView gets the same centered layout plus the ScadaLink brand heading. Sites.razor: only the new ConfirmButtonClass="btn-danger" follow-up. --- .../Components/Layout/MainLayout.razor | 21 ++- .../Components/Layout/NavMenu.razor | 157 +++++++++--------- .../Components/Pages/Admin/Sites.razor | 2 +- .../Components/Pages/Login.razor | 6 +- .../Components/Shared/ConfirmDialog.razor | 88 +++++++++- .../Components/Shared/DataTable.razor | 27 ++- .../Components/Shared/LoadingSpinner.razor | 2 +- .../Components/Shared/NewFolderDialog.razor | 5 +- .../Components/Shared/NotAuthorizedView.razor | 17 +- .../Components/Shared/ToastNotification.razor | 38 +++-- src/ScadaLink.CentralUI/wwwroot/css/site.css | 75 +++++++++ src/ScadaLink.Host/Components/App.razor | 60 +------ 12 files changed, 326 insertions(+), 172 deletions(-) create mode 100644 src/ScadaLink.CentralUI/wwwroot/css/site.css diff --git a/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor b/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor index 0ebafe1..24468b9 100644 --- a/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor +++ b/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor @@ -1,8 +1,23 @@ @inherits LayoutComponentBase -
    - -
    +
    + @* Hamburger toggle: visible only on viewports
    diff --git a/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor b/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor index 59c4fc9..c94e13d 100644 --- a/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor +++ b/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor @@ -3,87 +3,92 @@
    diff --git a/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor b/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor index 5fbab62..8261e78 100644 --- a/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor +++ b/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor @@ -41,7 +41,7 @@
    - + @if (_loading) { diff --git a/src/ScadaLink.CentralUI/Components/Pages/Login.razor b/src/ScadaLink.CentralUI/Components/Pages/Login.razor index 774c8fe..69e5b07 100644 --- a/src/ScadaLink.CentralUI/Components/Pages/Login.razor +++ b/src/ScadaLink.CentralUI/Components/Pages/Login.razor @@ -2,8 +2,8 @@ @using Microsoft.AspNetCore.Authorization @attribute [AllowAnonymous] -
    -
    +
    +

    ScadaLink

    @@ -25,9 +25,9 @@
    +

    Authenticate with your organization's LDAP credentials.

    -

    Authenticate with your organization's LDAP credentials.

    @code { diff --git a/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor b/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor index 1d55c59..04d6349 100644 --- a/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor +++ b/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor @@ -1,9 +1,16 @@ -@* Reusable confirmation dialog using Bootstrap modal *@ +@* Reusable confirmation dialog using Bootstrap modal. + z-index ladder: Toast container 1090 > this modal 1055 > this backdrop 1040. *@ +@inject IJSRuntime JS +@implements IAsyncDisposable @if (_visible) {
    -