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

Fix: Artikel Grid-Ansicht optimiert (Höhe, Farben, Kategorien ohne Filter)
All checks were successful
Docker Build & Push / build-and-push (push) Successful in 39s
Details

Browse Source
This commit is contained in:
Gemini
2026-05-14 20:02:51 +00:00
parent 7ff740b7ff
commit be847a814d
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/articles.php
View File

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