MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate dashboard hamburger menu inside search box and swap control-bar layout
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 12s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-22 00:32:12 +02:00
parent 47d73a466b
commit 072fc9b9f9
2 changed files with 60 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@@ -39,19 +39,7 @@
</div>
</div>
<div class="dashboard-menu">
<button class="dashboard-menu-button" id="dashboardMenuButton" type="button" aria-label="Menue oeffnen" aria-expanded="false" aria-controls="dashboardMenuPanel">
<span></span>
<span></span>
<span></span>
</button>
<nav class="dashboard-menu-panel" id="dashboardMenuPanel" aria-label="Dashboard Aktionen" hidden>
<span class="dashboard-menu-user" id="dashboardUserBadge" hidden></span>
<a class="dashboard-menu-item" id="favoritesLink" href="/favorites.html" hidden>Favoriten verwalten</a>
<button class="dashboard-menu-item" id="dashboardLoginButton" type="button">SSO Login</button>
<button class="dashboard-menu-item is-danger" id="dashboardLogoutButton" type="button" hidden>Abmelden</button>
</nav>
</div>
</header>
<main class="shell">
@@ -64,6 +52,19 @@
</svg>
</span>
<input id="serviceSearch" type="search" placeholder="Dienst suchen" autocomplete="off">
<div class="dashboard-menu">
<button class="dashboard-menu-button" id="dashboardMenuButton" type="button" aria-label="Menue oeffnen" aria-expanded="false" aria-controls="dashboardMenuPanel">
<span></span>
<span></span>
<span></span>
</button>
<nav class="dashboard-menu-panel" id="dashboardMenuPanel" aria-label="Dashboard Aktionen" hidden>
<span class="dashboard-menu-user" id="dashboardUserBadge" hidden></span>
<a class="dashboard-menu-item" id="favoritesLink" href="/favorites.html" hidden>Favoriten verwalten</a>
<button class="dashboard-menu-item" id="dashboardLoginButton" type="button">SSO Login</button>
<button class="dashboard-menu-item is-danger" id="dashboardLogoutButton" type="button" hidden>Abmelden</button>
</nav>
</div>
</label>
<div class="view-toggle" role="tablist" aria-label="Ansicht">

57
style.css
View File

@@ -64,7 +64,7 @@ input {
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
padding: 32px 0 22px;
@@ -132,6 +132,28 @@ h1 {
margin-top: 12px;
}
.search-box .dashboard-menu {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
margin-top: 0;
z-index: 30;
}
.search-box .dashboard-menu-button {
width: 36px;
height: 36px;
background: transparent;
border: none;
}
.search-box .dashboard-menu-button:hover,
.search-box .dashboard-menu-button.is-open {
background: rgba(103, 232, 249, 0.1);
border-color: transparent;
}
.dashboard-menu-button {
width: 42px;
height: 42px;
@@ -259,7 +281,7 @@ main {
top: 0;
z-index: 10;
display: grid;
grid-template-columns: minmax(240px, 360px) 1fr;
grid-template-columns: 1fr minmax(240px, 360px);
gap: 10px 12px;
align-items: center;
padding: 12px 0;
@@ -270,6 +292,12 @@ main {
position: relative;
display: flex;
align-items: center;
grid-column: 2;
}
.view-toggle {
grid-column: 1;
grid-row: 1;
}
.search-icon {
@@ -284,7 +312,7 @@ main {
.search-box input {
width: 100%;
height: 44px;
padding: 0 14px 0 40px;
padding: 0 52px 0 40px;
color: var(--text);
background: rgba(17, 22, 36, 0.92);
border: 1px solid var(--border);
@@ -297,6 +325,13 @@ main {
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
}
.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-results-button,
.search-box input::-webkit-search-results-decoration {
display: none;
}
.category-filters {
margin: 16px 0 6px 0;
display: flex;
@@ -1054,12 +1089,6 @@ main {
grid-column: 1 / 2;
}
.dashboard-menu {
grid-column: 2 / 3;
grid-row: 1;
justify-self: end;
}
.admin-actions {
justify-content: flex-start;
}
@@ -1093,15 +1122,21 @@ main {
grid-template-columns: 1fr;
}
.segments {
justify-content: flex-start;
.search-box {
grid-column: auto;
}
.view-toggle {
grid-column: auto;
grid-row: auto;
width: 100%;
grid-template-columns: repeat(3, 1fr);
}
.segments {
justify-content: flex-start;
}
.view-option {
min-width: 0;
}