diff --git a/Brain.md b/Brain.md index 51131ba..932bfeb 100644 --- a/Brain.md +++ b/Brain.md @@ -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. - **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. +- **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. diff --git a/app.js b/app.js index 4149b9f..a25b2a1 100644 --- a/app.js +++ b/app.js @@ -371,6 +371,11 @@ function updateVisibility() { dashboardSections.hidden = !showServices; } + const categoryFilters = document.querySelector('#categoryFilters'); + if (categoryFilters) { + categoryFilters.hidden = !showServices; + } + if (favoritesSections) { favoritesSections.hidden = !showFavorites; } diff --git a/index.html b/index.html index 2d2dea5..deb7a0b 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - +
@@ -37,10 +37,6 @@ 9 Dienste -
- PWA - Installierbar -
@@ -70,6 +66,15 @@ +
+ + + +
+ + + +
@@ -77,13 +82,7 @@
- -
- - - -
- +
@@ -141,6 +140,6 @@
- + diff --git a/style.css b/style.css index 6850ee7..30a2327 100644 --- a/style.css +++ b/style.css @@ -117,7 +117,7 @@ h1 { .hero-meta { display: grid; - grid-template-columns: repeat(3, minmax(82px, 1fr)); + grid-template-columns: repeat(2, minmax(82px, 1fr)); gap: 10px; margin-top: 12px; } @@ -255,11 +255,12 @@ main { top: 0; z-index: 10; display: grid; - grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); + grid-template-columns: minmax(240px, 360px) 1fr; gap: 10px 12px; align-items: center; padding: 12px 0; backdrop-filter: blur(16px); + background: rgba(10, 10, 15, 0.7); } .search-box { @@ -293,17 +294,24 @@ main { 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 { display: flex; - justify-content: flex-end; + justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; + width: 100%; + padding-bottom: 2px; } .view-toggle { - grid-column: 1 / -1; - justify-self: start; + justify-self: end; display: inline-grid; grid-template-columns: repeat(3, minmax(86px, auto)); gap: 3px; @@ -319,13 +327,22 @@ main { .segment { min-width: max-content; - height: 36px; - padding: 0 13px; + height: 28px; + padding: 0 11px; color: var(--muted); background: rgba(17, 22, 36, 0.78); border: 1px solid var(--border); - border-radius: var(--radius); + border-radius: 6px; 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 { @@ -346,6 +363,7 @@ main { color: #061014; background: #67e8f9; border-color: #67e8f9; + font-weight: 650; } .view-option:hover, @@ -1094,7 +1112,7 @@ main { } .hero-meta { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 8px; } diff --git a/sw.js b/sw.js index 76f8812..d38289e 100644 --- a/sw.js +++ b/sw.js @@ -1,12 +1,12 @@ -const CACHE_NAME = 'mischlabs-pwa-v21'; +const CACHE_NAME = 'mischlabs-pwa-v22'; const APP_SHELL = [ '/', '/index.html', '/favorites.html', '/offline.html', - '/style.css?v=30', + '/style.css?v=31', '/auth.js?v=2', - '/app.js?v=37', + '/app.js?v=38', '/favorites.js?v=1', '/services.json?v=1', '/manifest.webmanifest?v=4',