From be847a814dd9e0bfb378ec5b4b322cbf28486a20 Mon Sep 17 00:00:00 2001
From: Gemini <gemini@localhost>
Date: Thu, 14 May 2026 20:02:51 +0000
Subject: [PATCH] =?UTF-8?q?Fix:=20Artikel=20Grid-Ansicht=20optimiert=20(H?=
 =?UTF-8?q?=C3=B6he,=20Farben,=20Kategorien=20ohne=20Filter)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/articles.php | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/articles.php b/src/articles.php
index b2b4cd5..8ae263c 100644
--- a/src/articles.php
+++ b/src/articles.php
@@ -229,7 +229,7 @@ $conn->close();
         border: 1px solid #eee; border-radius: 8px; padding: 6px;
         text-align: center; background: #fff; display: flex; flex-direction: column;
         transition: transform 0.1s, box-shadow 0.1s;
-        height: 200px;
+        height: 250px;
         position: relative;
     }
     .lager-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
@@ -361,7 +361,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
         if (sortedCategories.length === 0) {
             tableHTML = '<tr><td colspan="12" class="text-center text-muted p-4">Keine Artikel gefunden.</td></tr>';
-            gridHTML = '<div class="col-12 text-center text-muted p-4">Keine Artikel gefunden.</div>';
+            gridHTML = '<div class="col-12 text-center text-muted p-4" style="grid-column: 1 / -1;">Keine Artikel gefunden.</div>';
         } else {
             sortedCategories.forEach(catName => {
                 const items = groupedArticles[catName];
@@ -369,12 +369,16 @@ document.addEventListener('DOMContentLoaded', function () {
                 const isCollapsed = collapsedCategories.has(catName) && !isSearching;
                 const count = items.reduce((acc, item) => acc + 1 + item.children.length, 0);
                 
-                tableHTML += `<tr class="category-header ${isCollapsed ? 'collapsed' : ''}" data-category="${catName}">
+                tableHTML += `<tr class="category-header ${isCollapsed ? 'collapsed' : ''}" data-category="${catName}" style="cursor: pointer;">
                     <td colspan="12">
-                        <i class="fas fa-chevron-down me-2"></i> ${catName} 
+                        <i class="fas fa-chevron-${isCollapsed ? 'right' : 'down'} me-2"></i> ${catName} 
                         <span class="badge bg-light text-dark rounded-pill ms-2">${count}</span>
                     </td>
                 </tr>`;
+                
+                gridHTML += `<h6 class="w-100 mt-3 mb-2 ps-2 border-bottom pb-1 text-secondary category-header ${isCollapsed ? 'collapsed' : ''}" style="grid-column: 1 / -1; cursor: pointer;" data-category="${catName}">
+                    <i class="fas fa-chevron-${isCollapsed ? 'right' : 'down'} me-2"></i> ${catName} <span class="badge bg-light text-dark rounded-pill ms-2">${count}</span>
+                </h6>`;
 
                 if (!isCollapsed) {
                     items.forEach(article => {
@@ -395,6 +399,15 @@ document.addEventListener('DOMContentLoaded', function () {
         initializeInteractivity();
     }
 
+    function getColorForCategory(categoryName) {
+        let hash = 0;
+        for (let i = 0; i < categoryName.length; i++) {
+            hash = categoryName.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        return `hsl(${hue}, 60%, 85%)`;
+    }
+
     function generateCardHTML(article) {
         const imagePath = article.image_url ? article.image_url : 'assets/images/keinbild.png';
         const productLink = article.product_url ? `<a href="${article.product_url}" target="_blank" class="btn btn-sm btn-outline-secondary px-1 py-0" title="Produktseite öffnen"><i class="fas fa-external-link-alt"></i></a>` : '';
@@ -413,6 +426,8 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         const metaText = [article.manufacturer_name, article.product_designation].filter(Boolean).join(' - ');
+        const catName = article.category_name || 'Ohne Kat.';
+        const catColor = getColorForCategory(catName);
 
         return `
         <div class="lager-card article-card" title="${article.name}${metaText ? ' (' + metaText + ')' : ''}">
@@ -425,7 +440,7 @@ document.addEventListener('DOMContentLoaded', function () {
             <div class="lager-title">${article.name}</div>
             <div class="lager-meta">${metaText}</div>
             <div class="text-muted d-block mb-1" style="font-size:0.75em;">${new Intl.NumberFormat('de-DE').format(article.weight_grams)} g | ${quantityBadge}</div>
-            <div class="lager-meta"><span class="badge bg-info text-dark border w-100 text-truncate p-1">${article.category_name || 'Ohne Kat.'}</span></div>
+            <div class="lager-meta"><span class="badge border w-100 text-truncate p-1" style="background-color: ${catColor}; color: #333;">${catName}</span></div>
             <div class="lager-controls d-flex justify-content-center gap-1 mt-auto">
                 ${productLink}
                 ${actionButtons}