From 0b280144c00bca88f29c35376571c19e75badcfd Mon Sep 17 00:00:00 2001
From: data <data@data-it-solution.de>
Date: Tue, 24 Feb 2026 10:52:37 +0100
Subject: [PATCH] style: Kabel-Liste als Flexbox, sortiert nach Querschnitt

- Sortierung: kleinster Querschnitt zuerst (dann Aderanzahl, dann Ref)
- Flexbox-Layout statt Tabelle (3 Spalten, links buendig)
- Responsives Layout mit min-width

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 class/metallzuschlagapi.class.php |  4 ++--
 metallzuschlagindex.php           | 34 +++++++------------------------
 2 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/class/metallzuschlagapi.class.php b/class/metallzuschlagapi.class.php
index fde52ab..64d8e36 100755
--- a/class/metallzuschlagapi.class.php
+++ b/class/metallzuschlagapi.class.php
@@ -499,11 +499,11 @@ class MetallzuschlagApi
 	{
 		$results = array();
 
-		$sql = "SELECT p.rowid, p.ref, p.label, pe.kupfergehalt";
+		$sql = "SELECT p.rowid, p.ref, p.label, pe.kupfergehalt, pe.querschnitt, pe.aderanzahl";
 		$sql .= " FROM ".$this->db->prefix()."product p";
 		$sql .= " INNER JOIN ".$this->db->prefix()."product_extrafields pe ON pe.fk_object = p.rowid";
 		$sql .= " WHERE pe.kupfergehalt IS NOT NULL AND pe.kupfergehalt > 0";
-		$sql .= " ORDER BY p.ref ASC";
+		$sql .= " ORDER BY pe.querschnitt ASC, pe.aderanzahl ASC, p.ref ASC";
 
 		$resql = $this->db->query($sql);
 		if ($resql) {
diff --git a/metallzuschlagindex.php b/metallzuschlagindex.php
index f1c499e..bd4066e 100755
--- a/metallzuschlagindex.php
+++ b/metallzuschlagindex.php
@@ -317,46 +317,26 @@ if (!empty($cablesWithKupfer) && !empty($chartData['labels'])) {
 	print '<input type="hidden" name="cable_mode" value="'.$cableMode.'">';
 	print '<input type="hidden" name="cable_filter" value="1">';
 
-	print '<table class="noborder centpercent">';
-	print '<tr class="liste_titre">';
-	print '<td colspan="4">'.$langs->trans("MetallzuschlagSelectCables").'</td>';
-	print '</tr>';
-	print '<tr class="oddeven">';
+	print '<div class="titre inline-block">'.$langs->trans("MetallzuschlagSelectCables").'</div>';
+	print '<div style="display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 10px 0; align-items: flex-start;">';
 
-	$colCount = 0;
 	foreach ($cablesWithKupfer as $cable) {
 		// Beim ersten Laden alle auswaehlen, danach nur die ausgewaehlten
 		$checked = (!$cableFilterSubmitted || in_array($cable->rowid, $cableIds)) ? ' checked' : '';
-		print '<td style="width: 25%;">';
-		print '<label>';
+		print '<label style="flex: 0 0 calc(33.33% - 20px); min-width: 200px; white-space: nowrap;">';
 		print '<input type="checkbox" name="cable_ids[]" value="'.$cable->rowid.'"'.$checked.'> ';
 		print dol_escape_htmltag($cable->ref);
 		if (!empty($cable->label)) {
-			print ' <span class="opacitymedium">('.dol_trunc($cable->label, 30).')</span>';
+			print ' <span class="opacitymedium">('.dol_trunc($cable->label, 25).')</span>';
 		}
 		print '</label>';
-		print '</td>';
-
-		$colCount++;
-		if ($colCount % 4 == 0) {
-			print '</tr><tr class="oddeven">';
-		}
 	}
 
-	// Leere Zellen auffuellen
-	while ($colCount % 4 != 0) {
-		print '<td></td>';
-		$colCount++;
-	}
-
-	print '</tr>';
-	print '<tr class="oddeven">';
-	print '<td colspan="4">';
+	print '</div>';
+	print '<div style="margin-top: 10px;">';
 	print '<button type="submit" class="butAction small">'.$langs->trans("Refresh").'</button> ';
 	print '<a class="butAction small" href="#" onclick="metallzuschlagToggleAllCables(); return false;">'.$langs->trans("MetallzuschlagAllCables").'</a>';
-	print '</td>';
-	print '</tr>';
-	print '</table>';
+	print '</div>';
 	print '</form>';
 	print '</div>';