style: remove PWA metric card and optimize category filters for mobile usability

2026-05-22 00:10:41 +02:00
parent 1cdd944aca
commit 0a72e63e84
5 changed files with 52 additions and 25 deletions
--- 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.
--- 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;
  }
--- a/index.html
+++ b/index.html
@@ -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="192x192" href="/icons/favicon-192-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>
 <body>
    <header class="shell hero">
@@ -37,10 +37,6 @@
                <span class="metric-value" id="serviceCount">9</span>
                <span class="metric-label">Dienste</span>
            </div>
-            <div class="metric">
-                <span class="metric-value">PWA</span>
-                <span class="metric-label">Installierbar</span>
-            </div>
        </div>

        <div class="dashboard-menu">
@@ -70,6 +66,15 @@
                <input id="serviceSearch" type="search" placeholder="Dienst suchen" autocomplete="off">
            </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">
                <button class="segment is-active" type="button" data-filter="all">Alle</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="personal">Persoenlich</button>
            </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>
-        </section>

        <div id="dashboardSections"></div>
        <div id="favoritesSections"></div>
@@ -141,6 +140,6 @@
    </div>

    <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>
 </html>
--- 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;
    }

--- 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',