From 2e84ecc1f5299fb96b5b4b70b92f8e3b17d0b519 Mon Sep 17 00:00:00 2001
From: Gemini Agent <gemini@example.com>
Date: Tue, 12 May 2026 06:34:22 +0000
Subject: [PATCH] UI Tweaks: Thumbnail added to Phase 2, Grid adjusted in Phase
 1

- Added 30x30 image thumbnail with tooltip to list items in Phase 2 (Table & Backpack).

- Set default Group By to Category and Sort By to Weight (Asc) in Phase 1.

- Reverted Phase 1 Lager cards to a squarish layout but retained the large image sizing.

- Removed the tooltip hover effect from the Phase 1 Lager images.
---
 src/manage_packing_list_items.php | 33 ++++++++++++++++---------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/manage_packing_list_items.php b/src/manage_packing_list_items.php
index a32ee25..cc2b296 100644
--- a/src/manage_packing_list_items.php
+++ b/src/manage_packing_list_items.php
@@ -83,7 +83,7 @@ COALESCE(
     CASE WHEN b.name IS NOT NULL THEN CONCAT('Rucksack: ', b.name) ELSE NULL END,
     pli.name
 ) as name, 
-a.weight_grams, a.product_designation, a.consumable, m.name as manufacturer_name 
+a.weight_grams, a.product_designation, a.consumable, a.image_url, m.name as manufacturer_name 
 FROM packing_list_items pli 
 LEFT JOIN articles a ON pli.article_id = a.id 
 LEFT JOIN manufacturers m ON a.manufacturer_id = m.id 
@@ -151,27 +151,21 @@ $conn->close();
     /* Lager Grid */
     .lager-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
         gap: 12px; padding: 5px;
     }
     .lager-card {
-        border: 1px solid #eee; border-radius: 8px; padding: 12px;
+        border: 1px solid #eee; border-radius: 8px; padding: 8px;
         text-align: center; background: #fff; display: flex; flex-direction: column;
         transition: transform 0.1s, box-shadow 0.1s;
     }
     .lager-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
     .lager-img-wrapper {
-        height: 100px; margin-bottom: 8px; display: flex;
-        align-items: center; justify-content: center;
+        width: 100%; aspect-ratio: 1 / 1; margin-bottom: 8px; display: flex;
+        align-items: center; justify-content: center; overflow: hidden;
     }
-    .lager-img-wrapper img.article-image-trigger {
-        width: auto !important;
-        height: 100% !important;
-        max-width: 100%;
-        max-height: 100px;
-        object-fit: contain;
-        border-radius: 4px;
-        cursor: pointer;
+    .lager-img-wrapper img.lager-card-img {
+        width: 100%; height: 100%; object-fit: contain; border-radius: 4px;
     }
     .lager-title {
         font-size: 0.85em; font-weight: 600; margin-bottom: 4px;
@@ -231,8 +225,8 @@ $conn->close();
                     <div class="col-12"><input type="text" id="filter-text" class="form-control form-control-sm" placeholder="Artikel suchen..."></div>
                     <div class="col-sm-6 col-md-3"><select id="filter-category" class="form-select form-select-sm"><option value="">-- Kategorien --</option><?php foreach($categories as $c) echo '<option>'.htmlspecialchars($c).'</option>'; ?></select></div>
                     <div class="col-sm-6 col-md-3"><select id="filter-manufacturer" class="form-select form-select-sm"><option value="">-- Hersteller --</option><?php foreach($manufacturers as $m) echo '<option>'.htmlspecialchars($m).'</option>'; ?></select></div>
-                    <div class="col-sm-6 col-md-3"><select id="group-by" class="form-select form-select-sm"><option value="">Keine Gruppe</option><option value="category_name">Kategorie</option><option value="manufacturer_name">Hersteller</option><option value="storage_location_name">Lagerort</option></select></div>
-                    <div class="col-sm-6 col-md-3"><select id="sort-by" class="form-select form-select-sm"><option value="name_asc">Alphabet (A-Z)</option><option value="weight_asc">Gewicht (Leicht->Schwer)</option><option value="weight_desc">Gewicht (Schwer->Leicht)</option><option value="quantity_desc">Anzahl (Viele->Wenige)</option></select></div>
+                    <div class="col-sm-6 col-md-3"><select id="group-by" class="form-select form-select-sm"><option value="">Keine Gruppe</option><option value="category_name" selected>Kategorie</option><option value="manufacturer_name">Hersteller</option><option value="storage_location_name">Lagerort</option></select></div>
+                    <div class="col-sm-6 col-md-3"><select id="sort-by" class="form-select form-select-sm"><option value="name_asc">Alphabet (A-Z)</option><option value="weight_asc" selected>Gewicht (Leicht->Schwer)</option><option value="weight_desc">Gewicht (Schwer->Leicht)</option><option value="quantity_desc">Anzahl (Viele->Wenige)</option></select></div>
                 </div>
             </div>
             <div class="card-body pane-content" id="lager-container"></div>
@@ -399,7 +393,7 @@ $conn->close();
                 const cardHtml = `
                 <div class="lager-card">
                     <div class="lager-img-wrapper">
-                        <img src="${imgUrl}" class="article-image-trigger" data-preview-url="${imgUrl}">
+                        <img src="${imgUrl}" class="lager-card-img">
                     </div>
                     <div class="lager-title">${article.name}</div>
                     ${article.product_designation ? `<div class="small text-muted mb-1" style="line-height: 1.1;">${article.product_designation}</div>` : ''}
@@ -584,6 +578,12 @@ $conn->close();
         let iconClass = 'fas fa-grip-vertical handle text-secondary';
         let nameDisplay = item.name;
         
+        let thumbHtml = '';
+        if (!item.backpack_id && !item.backpack_compartment_id) {
+            let imgUrl = item.image_url ? item.image_url : 'assets/images/keinbild.png';
+            thumbHtml = `<img src="${imgUrl}" class="article-image-trigger ms-2 rounded" style="width: 30px; height: 30px; object-fit: contain;" data-preview-url="${imgUrl}">`;
+        }
+        
         let metaDisplayArr = [];
         if (item.manufacturer_name) metaDisplayArr.push(item.manufacturer_name);
         if (item.product_designation) metaDisplayArr.push(item.product_designation);
@@ -609,6 +609,7 @@ $conn->close();
         div.innerHTML = `
             <div class="${contentClass}">
                 <i class="${iconClass}"></i>
+                ${thumbHtml}
                 <span class="item-name ms-2">${nameDisplay} ${metaDisplay}</span>
                 <div class="item-controls ms-auto d-flex align-items-center">
                     ${controls}