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

style: remove PWA metric card and optimize category filters for mobile usability
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-22 00:10:41 +02:00
parent 1cdd944aca
commit 0a72e63e84
5 changed files with 52 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Brain.md
View File

@@ -185,3 +185,8 @@ volumes:
- **Cache-Buster-Update:** Cache-Busting-Parameter in den CSS-Verknüpfungen wurden auf `v=26` erhöht, damit der geänderte Farbverlauf sofort ohne manuelles Cache-Leeren im Browser gerendert wird. - **Cache-Buster-Update:** Cache-Busting-Parameter in den CSS-Verknüpfungen wurden auf `v=26` erhöht, damit der geänderte Farbverlauf sofort ohne manuelles Cache-Leeren im Browser gerendert wird.
- **Git Deployment & Sync:** - **Git Deployment & Sync:**
- Sämtliche Implementierungen wurden sicher staged, committet und direkt auf das selbstgehostete Gitea-Remote (`https://git.mischlabs.de/MrDiderot/mischlabs.git`, Branch `master`) gepusht. - Sämtliche Implementierungen wurden sicher staged, committet und direkt auf das selbstgehostete Gitea-Remote (`https://git.mischlabs.de/MrDiderot/mischlabs.git`, Branch `master`) gepusht.
- **Frontend Optimierung & Mobile Usability (Stand: 2026-05-22):**
- **PWA-Kachel Entfernung:** Die ungenutzte "PWA Installierbar"-Statistik-Kachel wurde aus der oberen Übersichtsleiste (`index.html`) entfernt. Das Layout der verbleibenden zwei Kacheln ("Online" & "Dienste") wurde in `style.css` auf ein stabiles, zentriertes 2-Spalten-Raster für Desktop und mobile Ansichten angepasst.
- **Kompakte Service-Kategoriefilter:** Die Kategorieauswahl (`.segments`) wurde aus der klebrigen (`sticky`) oberen `.control-bar` herausgelöst und in einem separaten `#categoryFilters`-Bereich direkt über dem Dienste-Grid platziert. Sie verbraucht dadurch im ungescrollten Zustand keinen kostbaren Platz mehr auf Mobilgeräten.
- **Visual-Premium Redesign:** Die Filter-Pills wurden verkleinert (Höhe von 36px auf 28px reduziert, kleinere Schriftgröße `0.78rem` und kompakteres Padding), linksbündig ausgerichtet und mit sanften Hover- & Aktiv-Transitions versehen.
- **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` und `app.js` wurden in `index.html` hochgestuft (`v=31` bzw. `v=38`). Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v22` erhöht und die App-Shell-Liste entsprechend angepasst, um ein sofortiges Update der App bei allen Nutzern ohne manuelles Cache-Leeren zu garantieren.

5
app.js
View File

@@ -371,6 +371,11 @@ function updateVisibility() {
dashboardSections.hidden = !showServices; dashboardSections.hidden = !showServices;
} }
const categoryFilters = document.querySelector('#categoryFilters');
if (categoryFilters) {
categoryFilters.hidden = !showServices;
}
if (favoritesSections) { if (favoritesSections) {
favoritesSections.hidden = !showFavorites; favoritesSections.hidden = !showFavorites;
} }

23
index.html
View File

@@ -15,7 +15,7 @@
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png"> <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png"> <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
<link rel="stylesheet" href="style.css?v=30"> <link rel="stylesheet" href="style.css?v=31">
</head> </head>
<body> <body>
<header class="shell hero"> <header class="shell hero">
@@ -37,10 +37,6 @@
<span class="metric-value" id="serviceCount">9</span> <span class="metric-value" id="serviceCount">9</span>
<span class="metric-label">Dienste</span> <span class="metric-label">Dienste</span>
</div> </div>
<div class="metric">
<span class="metric-value">PWA</span>
<span class="metric-label">Installierbar</span>
</div>
</div> </div>
<div class="dashboard-menu"> <div class="dashboard-menu">
@@ -70,6 +66,15 @@
<input id="serviceSearch" type="search" placeholder="Dienst suchen" autocomplete="off"> <input id="serviceSearch" type="search" placeholder="Dienst suchen" autocomplete="off">
</label> </label>
<div class="view-toggle" role="tablist" aria-label="Ansicht">
<button class="view-option is-active" type="button" data-view="all">Alles</button>
<button class="view-option" type="button" data-view="services">Dienste</button>
<button class="view-option" type="button" data-view="favorites">Favoriten</button>
</div>
</section>
<!-- Compact categories filter options placed directly above the service grid -->
<div id="categoryFilters" class="category-filters">
<div class="segments" role="tablist" aria-label="Kategorien"> <div class="segments" role="tablist" aria-label="Kategorien">
<button class="segment is-active" type="button" data-filter="all">Alle</button> <button class="segment is-active" type="button" data-filter="all">Alle</button>
<button class="segment" type="button" data-filter="access">Zugang</button> <button class="segment" type="button" data-filter="access">Zugang</button>
@@ -77,13 +82,7 @@
<button class="segment" type="button" data-filter="work">Arbeit</button> <button class="segment" type="button" data-filter="work">Arbeit</button>
<button class="segment" type="button" data-filter="personal">Persoenlich</button> <button class="segment" type="button" data-filter="personal">Persoenlich</button>
</div> </div>
<div class="view-toggle" role="tablist" aria-label="Ansicht">
<button class="view-option is-active" type="button" data-view="all">Alles</button>
<button class="view-option" type="button" data-view="services">Dienste</button>
<button class="view-option" type="button" data-view="favorites">Favoriten</button>
</div> </div>
</section>
<div id="dashboardSections"></div> <div id="dashboardSections"></div>
<div id="favoritesSections"></div> <div id="favoritesSections"></div>
@@ -141,6 +140,6 @@
</div> </div>
<script src="/auth.js?v=2" defer></script> <script src="/auth.js?v=2" defer></script>
<script src="/app.js?v=37" defer></script> <script src="/app.js?v=38" defer></script>
</body> </body>
</html> </html>

36
style.css
View File

@@ -117,7 +117,7 @@ h1 {
.hero-meta { .hero-meta {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(82px, 1fr)); grid-template-columns: repeat(2, minmax(82px, 1fr));
gap: 10px; gap: 10px;
margin-top: 12px; margin-top: 12px;
} }
@@ -255,11 +255,12 @@ main {
top: 0; top: 0;
z-index: 10; z-index: 10;
display: grid; display: grid;
grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); grid-template-columns: minmax(240px, 360px) 1fr;
gap: 10px 12px; gap: 10px 12px;
align-items: center; align-items: center;
padding: 12px 0; padding: 12px 0;
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
background: rgba(10, 10, 15, 0.7);
} }
.search-box { .search-box {
@@ -293,17 +294,24 @@ main {
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08); box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
} }
.category-filters {
margin: 16px 0 6px 0;
display: flex;
justify-content: flex-start;
}
.segments { .segments {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
gap: 6px; gap: 6px;
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
width: 100%;
padding-bottom: 2px;
} }
.view-toggle { .view-toggle {
grid-column: 1 / -1; justify-self: end;
justify-self: start;
display: inline-grid; display: inline-grid;
grid-template-columns: repeat(3, minmax(86px, auto)); grid-template-columns: repeat(3, minmax(86px, auto));
gap: 3px; gap: 3px;
@@ -319,13 +327,22 @@ main {
.segment { .segment {
min-width: max-content; min-width: max-content;
height: 36px; height: 28px;
padding: 0 13px; padding: 0 11px;
color: var(--muted); color: var(--muted);
background: rgba(17, 22, 36, 0.78); background: rgba(17, 22, 36, 0.78);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 0.78rem;
font-weight: 550;
transition: all 0.16s ease;
}
.segment:hover {
color: #fff;
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
} }
.view-option { .view-option {
@@ -346,6 +363,7 @@ main {
color: #061014; color: #061014;
background: #67e8f9; background: #67e8f9;
border-color: #67e8f9; border-color: #67e8f9;
font-weight: 650;
} }
.view-option:hover, .view-option:hover,
@@ -1094,7 +1112,7 @@ main {
} }
.hero-meta { .hero-meta {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 8px; gap: 8px;
} }

6
sw.js
View File

@@ -1,12 +1,12 @@
const CACHE_NAME = 'mischlabs-pwa-v21'; const CACHE_NAME = 'mischlabs-pwa-v22';
const APP_SHELL = [ const APP_SHELL = [
'/', '/',
'/index.html', '/index.html',
'/favorites.html', '/favorites.html',
'/offline.html', '/offline.html',
'/style.css?v=30', '/style.css?v=31',
'/auth.js?v=2', '/auth.js?v=2',
'/app.js?v=37', '/app.js?v=38',
'/favorites.js?v=1', '/favorites.js?v=1',
'/services.json?v=1', '/services.json?v=1',
'/manifest.webmanifest?v=4', '/manifest.webmanifest?v=4',