tiennm99/serena
1
0 Fork 0
mirror of https://github.com/tiennm99/serena.git synced 2026-10-14 18:19:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard: Improve accessibility of logs view

Browse Source 
'Overview' and 'Logs' are now tabs instead of menu items
This commit is contained in:
Dominik Jain authored and Dominik Jain committed 2026-02-13 15:15:26 +01:00
1 parent 88327d6192
commit 036a065848
2 files changed
+65 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/serena/resources/dashboard/dashboard.css
+47 -3
View File
@@ -213,13 +213,48 @@ body {
.header-nav {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
width: 200px;
justify-content: space-between;
height: 100%;
gap: 10px;
flex-shrink: 0;
}
.header-actions {
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.header-tabs {
display: flex;
align-items: flex-end;
gap: 0;
}
.header-tab {
display: flex;
align-items: center;
padding: 8px 20px;
color: var(--text-muted);
text-decoration: none;
font-size: 15px;
font-weight: 500;
border-bottom: 3px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.header-tab:hover {
color: var(--text-primary);
}
.header-tab.active {
color: var(--btn-primary);
border-bottom-color: var(--btn-primary);
}
.menu-button {
background-color: var(--bg-secondary);
color: var(--text-primary);
@@ -240,7 +275,8 @@ body {
.menu-dropdown {
position: absolute;
top: calc(var(--header-height) + 10px);
top: 100%;
margin-top: 6px;
right: 0;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
@@ -966,6 +1002,14 @@ body {
.header-nav {
width: 100%;
align-items: center;
}
.header-tabs {
justify-content: center;
}
.header-actions {
justify-content: center;
}
src/serena/resources/dashboard/index.html
+18 -14
View File
@@ -30,20 +30,24 @@
</div>
<nav class="header-nav">
<button id="theme-toggle" class="theme-toggle">
<span id="theme-icon" style="height: 21px">🌙</span>
<span id="theme-text">Dark</span>
</button>
<button id="menu-toggle" class="menu-button">
<span>☰</span>
<span>Menu</span>
</button>
<div id="menu-dropdown" class="menu-dropdown" style="display:none">
<a href="#" data-page="overview" class="active">Overview</a>
<a href="#" data-page="logs">Logs</a>
<a href="#" data-page="stats">Advanced Stats</a>
<hr>
<a href="#" id="menu-shutdown">Shutdown Server</a>
<div class="header-actions">
<button id="theme-toggle" class="theme-toggle">
<span id="theme-icon" style="height: 21px">🌙</span>
<span id="theme-text">Dark</span>
</button>
<button id="menu-toggle" class="menu-button">
<span>☰</span>
<span>Menu</span>
</button>
<div id="menu-dropdown" class="menu-dropdown" style="display:none">
<a href="#" data-page="stats">Advanced Stats</a>
<hr>
<a href="#" id="menu-shutdown">Shutdown Server</a>
</div>
</div>
<div class="header-tabs">
<a href="#" data-page="overview" class="header-tab active">Overview</a>
<a href="#" data-page="logs" class="header-tab">Logs</a>
</div>
</nav>
</header>