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

Fix UI bugs: Phase 2 thumbnails and Phase 1 card layouts
All checks were successful
Docker Build & Push / build-and-push (push) Successful in 13s
Details

Browse Source 
- Fixed missing thumbnails in Phase 2 after drag & drop (SQL query was missing image_url field during sync).

- Removed flex-grow from Phase 1 cards and added align-items: start to grid to prevent empty bottom spaces.

- Forced image wrapper to 120px height to ensure images appear large while keeping cards short.
This commit is contained in:
Gemini Agent
2026-05-12 07:04:12 +00:00
parent 2e84ecc1f5
commit 141edbfd61
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/api_packing_list_handler.php
View File

@@ -297,6 +297,7 @@ function get_all_items($conn, $packing_list_id) {
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

15
src/manage_packing_list_items.php
View File

@@ -153,30 +153,33 @@ $conn->close();
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px; padding: 5px;
align-items: start; /* Prevents cards from stretching vertically */
}
.lager-card {
border: 1px solid #eee; border-radius: 8px; padding: 8px;
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;
}
.lager-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.lager-img-wrapper {
width: 100%; aspect-ratio: 1 / 1; margin-bottom: 8px; display: flex;
width: 100%; height: 120px; margin-bottom: 6px; display: flex;
align-items: center; justify-content: center; overflow: hidden;
}
.lager-img-wrapper img.lager-card-img {
width: 100%; height: 100%; object-fit: contain; border-radius: 4px;
width: 100% !important; height: 100% !important;
max-width: 100% !important; max-height: 120px !important;
object-fit: contain !important; border-radius: 4px;
}
.lager-title {
font-size: 0.85em; font-weight: 600; margin-bottom: 4px;
line-height: 1.2; flex-grow: 1; word-wrap: break-word;
line-height: 1.1; word-wrap: break-word;
}
.lager-controls {
display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px;
display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px;
}
.table-status-text {
font-size: 0.75em; color: #2e7d32; font-weight: 600;
min-height: 1.2em; margin-top: 6px; visibility: hidden;
min-height: 14px; margin-top: 2px; visibility: hidden; line-height: 1;
}
.table-status-text.visible { visibility: visible; }