dohertj2/mxaccessgw
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ui: align dashboard styling with ScadaLink master conventions

Browse Source 
- Rename DashboardLayout.razor -> MainLayout.razor; dashboard.css -> site.css
- Sidebar 218 -> 220px; add hamburger + Bootstrap collapse for <lg viewports
- Rename .metric-* KPI classes to .agg-* (matches shared theme tokens)
- Rebuild ApiKeysPage create form as card + h6 subsections + bottom Save/Cancel
This commit is contained in:
Joseph Doherty
2026-05-26 01:12:54 -04:00
parent 7fc1955287
commit ba2b936609
8 changed files with 212 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/DashboardLayout.razor
-68
View File
@@ -1,68 +0,0 @@
@inherits LayoutComponentBase
<header class="app-bar">
<a class="brand" href="/"><span class="mark">&#9646;</span> MXAccess Gateway</a>
<span class="crumb">&rsaquo;</span>
<span class="crumb">gateway dashboard</span>
<span class="spacer"></span>
<AuthorizeView>
<Authorized Context="authState">
<span class="meta">@authState.User.Identity?.Name</span>
<span class="conn-pill" data-state="connected">
<span class="dot"></span><span>signed in</span>
</span>
</Authorized>
<NotAuthorized>
<span class="conn-pill" data-state="disconnected">
<span class="dot"></span><span>signed out</span>
</span>
</NotAuthorized>
</AuthorizeView>
</header>
<div class="app-shell">
<nav class="side-rail">
<div class="rail-eyebrow">Overview</div>
<NavLink class="rail-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
<div class="rail-eyebrow">Runtime</div>
<NavLink class="rail-link" href="/sessions" Match="NavLinkMatch.Prefix">Sessions</NavLink>
<NavLink class="rail-link" href="/workers" Match="NavLinkMatch.Prefix">Workers</NavLink>
<NavLink class="rail-link" href="/events" Match="NavLinkMatch.Prefix">Events</NavLink>
<NavLink class="rail-link" href="/alarms" Match="NavLinkMatch.Prefix">Alarms</NavLink>
<div class="rail-eyebrow">Galaxy</div>
<NavLink class="rail-link" href="/galaxy" Match="NavLinkMatch.Prefix">Repository</NavLink>
<NavLink class="rail-link" href="/browse" Match="NavLinkMatch.Prefix">Browse</NavLink>
<div class="rail-eyebrow">Admin</div>
<NavLink class="rail-link" href="/apikeys" Match="NavLinkMatch.Prefix">API keys</NavLink>
<NavLink class="rail-link" href="/settings" Match="NavLinkMatch.Prefix">Settings</NavLink>
<div class="rail-foot">
<AuthorizeView>
<Authorized Context="authState">
<div class="rail-eyebrow">Session</div>
<div class="rail-user">@authState.User.Identity?.Name</div>
<div class="rail-roles">
@string.Join(", ", authState.User.Claims
.Where(c => c.Type == System.Security.Claims.ClaimTypes.Role)
.Select(c => c.Value))
</div>
<form method="post" action="/logout">
<AntiforgeryToken />
<button class="rail-btn" type="submit">Sign out</button>
</form>
</Authorized>
<NotAuthorized>
<div class="rail-eyebrow">Session</div>
<a class="rail-btn" href="/login">Sign in</a>
</NotAuthorized>
</AuthorizeView>
</div>
</nav>
<main class="page">
@Body
</main>
</div>
src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/MainLayout.razor
+83
View File
@@ -0,0 +1,83 @@
@inherits LayoutComponentBase
<header class="app-bar">
<a class="brand" href="/"><span class="mark">&#9646;</span> MXAccess Gateway</a>
<span class="crumb">&rsaquo;</span>
<span class="crumb">gateway dashboard</span>
<span class="spacer"></span>
<AuthorizeView>
<Authorized Context="authState">
<span class="meta">@authState.User.Identity?.Name</span>
<span class="conn-pill" data-state="connected">
<span class="dot"></span><span>signed in</span>
</span>
</Authorized>
<NotAuthorized>
<span class="conn-pill" data-state="disconnected">
<span class="dot"></span><span>signed out</span>
</span>
</NotAuthorized>
</AuthorizeView>
</header>
@* Hamburger toggle: visible only on viewports <lg. Bootstrap collapse JS lives
in bootstrap.bundle.min.js (loaded in App.razor). The app-bar above stays
full-width; the hamburger only collapses the side rail. *@
<button class="btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebar-collapse"
aria-controls="sidebar-collapse"
aria-expanded="false"
aria-label="Toggle navigation">
&#9776;
</button>
<div class="app-shell">
<div class="collapse d-lg-block" id="sidebar-collapse">
<nav class="side-rail">
<div class="rail-eyebrow">Overview</div>
<NavLink class="rail-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
<div class="rail-eyebrow">Runtime</div>
<NavLink class="rail-link" href="/sessions" Match="NavLinkMatch.Prefix">Sessions</NavLink>
<NavLink class="rail-link" href="/workers" Match="NavLinkMatch.Prefix">Workers</NavLink>
<NavLink class="rail-link" href="/events" Match="NavLinkMatch.Prefix">Events</NavLink>
<NavLink class="rail-link" href="/alarms" Match="NavLinkMatch.Prefix">Alarms</NavLink>
<div class="rail-eyebrow">Galaxy</div>
<NavLink class="rail-link" href="/galaxy" Match="NavLinkMatch.Prefix">Repository</NavLink>
<NavLink class="rail-link" href="/browse" Match="NavLinkMatch.Prefix">Browse</NavLink>
<div class="rail-eyebrow">Admin</div>
<NavLink class="rail-link" href="/apikeys" Match="NavLinkMatch.Prefix">API keys</NavLink>
<NavLink class="rail-link" href="/settings" Match="NavLinkMatch.Prefix">Settings</NavLink>
<div class="rail-foot">
<AuthorizeView>
<Authorized Context="authState">
<div class="rail-eyebrow">Session</div>
<div class="rail-user">@authState.User.Identity?.Name</div>
<div class="rail-roles">
@string.Join(", ", authState.User.Claims
.Where(c => c.Type == System.Security.Claims.ClaimTypes.Role)
.Select(c => c.Value))
</div>
<form method="post" action="/logout">
<AntiforgeryToken />
<button class="rail-btn" type="submit">Sign out</button>
</form>
</Authorized>
<NotAuthorized>
<div class="rail-eyebrow">Session</div>
<a class="rail-btn" href="/login">Sign in</a>
</NotAuthorized>
</AuthorizeView>
</div>
</nav>
</div>
<main class="page">
@Body
</main>
</div>