UI-Feinschliff: Button-Ausrichtung in Inline-Reihen + Einheit beim Mindestbestand
- .field-inline: Labels ohne eigenen margin-bottom, sonst rutschen daneben stehende Buttons (z.B. "Nachschlagen") optisch nach unten. Abstand traegt jetzt die Reihe selbst; verschachtelt in Label/Tabellenzelle bleibt er aus. - Produkttabelle: Mindestbestand wird in der Produkteinheit mit nachgestellter Einheit angezeigt (zusaetzlich der Packungswert, falls Packungsgroesse gesetzt). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -98,7 +98,15 @@ export default function Products() {
|
|||||||
: `${fmt(p.stock / (p.unit_factor || 1))} ${p.unit_name || unitShort(p.base_unit)}`}
|
: `${fmt(p.stock / (p.unit_factor || 1))} ${p.unit_name || unitShort(p.base_unit)}`}
|
||||||
</td>
|
</td>
|
||||||
<td className="num muted">
|
<td className="num muted">
|
||||||
{p.min_stock != null ? `${fmt(p.min_stock / (p.unit_factor || 1))}` : "–"}
|
{p.min_stock != null ? (
|
||||||
|
<>
|
||||||
|
{fmt(p.min_stock / (p.unit_factor || 1))}{" "}
|
||||||
|
{p.unit_name || unitShort(p.base_unit)}
|
||||||
|
{p.package_size ? (
|
||||||
|
<span className="small"> · {fmt(p.min_stock / p.package_size)} Pkg</span>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
) : "–"}
|
||||||
</td>
|
</td>
|
||||||
<td className="num"><Link to={`/products/${p.id}`}>Details</Link></td>
|
<td className="num"><Link to={`/products/${p.id}`}>Details</Link></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@@ -147,7 +147,14 @@ input:focus, select:focus {
|
|||||||
input::placeholder { color: var(--muted); opacity: 0.7; }
|
input::placeholder { color: var(--muted); opacity: 0.7; }
|
||||||
.row { display: flex; gap: var(--sp-3); align-items: flex-start; }
|
.row { display: flex; gap: var(--sp-3); align-items: flex-start; }
|
||||||
.row .grow { flex: 1; }
|
.row .grow { flex: 1; }
|
||||||
.field-inline { display: flex; gap: var(--sp-2); align-items: flex-end; }
|
.field-inline { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-4); }
|
||||||
|
/* Labels in einer Inline-Reihe duerfen keinen eigenen Abstand haben, sonst
|
||||||
|
rutschen daneben stehende Buttons optisch nach unten. */
|
||||||
|
.field-inline > label { margin-bottom: 0; }
|
||||||
|
/* Verschachtelt in einem Label (z.B. Menge + Einheit) traegt das Label den Abstand. */
|
||||||
|
label .field-inline { margin-bottom: 0; }
|
||||||
|
/* In Tabellenzellen (z.B. Chargen-Aktionen) keinen zusaetzlichen Abstand. */
|
||||||
|
td .field-inline { margin-bottom: 0; }
|
||||||
|
|
||||||
/* ---------- Buttons ---------- */
|
/* ---------- Buttons ---------- */
|
||||||
.btn {
|
.btn {
|
||||||
|
|||||||
Reference in New Issue
Block a user