admin/packliste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Tweaks: Thumbnail added to Phase 2, Grid adjusted in Phase 1
All checks were successful
Docker Build & Push / build-and-push (push) Successful in 12s
Details

Browse Source 
- 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.
This commit is contained in:
Gemini Agent
2026-05-12 06:34:22 +00:00
parent 1a3a1c2b78
commit 2e84ecc1f5
1 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/manage_packing_list_items.php
View File

@@ -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}