dohertj2/scadalink-design
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(ui/shared): scroll-lock, escape, aria-live, responsive sidebar

Browse Source 
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 <li> to <div role="presentation">.

MainLayout adds a hamburger toggle for <lg viewports; sidebar collapses
via Bootstrap collapse data attributes.

App.razor extracts inline <style> 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.
This commit is contained in:
Joseph Doherty
2026-05-12 03:32:07 -04:00
parent ff5f5a10ef
commit f7b10f2ff7
12 changed files with 326 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/ScadaLink.Host/Components/App.razor
View File

@@ -8,70 +8,14 @@
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
<link href="/ScadaLink.Host.styles.css" rel="stylesheet" />
<style>
.sidebar {
min-width: 220px;
max-width: 220px;
min-height: 100vh;
background-color: #212529;
}
.sidebar .nav-link {
color: #adb5bd;
padding: 0.4rem 1rem;
font-size: 0.9rem;
}
.sidebar .nav-link:hover {
color: #fff;
background-color: #343a40;
}
.sidebar .nav-link.active {
color: #fff;
background-color: #0d6efd;
}
.sidebar .nav-section-header {
color: #6c757d;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.75rem 1rem 0.25rem;
margin-top: 0.5rem;
}
.sidebar .brand {
color: #fff;
font-size: 1.1rem;
font-weight: 600;
padding: 1rem;
border-bottom: 1px solid #343a40;
}
#reconnect-modal {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.5);
}
#reconnect-modal .modal-dialog {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
#reconnect-modal .modal-content {
max-width: 400px;
padding: 2rem;
text-align: center;
background: #fff;
border-radius: 0.5rem;
}
</style>
<link href="_content/ScadaLink.CentralUI/css/site.css" rel="stylesheet" />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
<div id="reconnect-modal">
<div class="modal-dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="spinner-border text-primary mb-3" role="status">
<span class="visually-hidden">Reconnecting...</span>