Web: Artikelseite nutzt volle Breite, Chargen-Tabelle bekommt mehr Platz

Die Bearbeiten-Seite war auf 1400px gedeckelt (viel Rand links/rechts) und teilte
Formular und Chargen 50/50. Jetzt nutzt sie die volle Breite (wie die Listen) und
das Grid ist gespiegelt zu .wide-aside: links das schmale Formular (clamp bis
640px), rechts die Chargen-/Bestandstabelle mit dem Restplatz - so passen
Menge/MHD/Lagerort ohne Seitwaerts-Scrollen. Neuanlage bleibt einspaltig.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-29 18:52:30 +02:00
parent e28b6a5e38
commit 8cf7cef6e1
3 changed files with 10 additions and 2 deletions

View File

@@ -150,7 +150,7 @@ export default function App() {
<Route path="/items" element={<Protected wide><ItemList /></Protected>} /> <Route path="/items" element={<Protected wide><ItemList /></Protected>} />
<Route path="/chargen" element={<Protected wide><Charges /></Protected>} /> <Route path="/chargen" element={<Protected wide><Charges /></Protected>} />
<Route path="/products/new" element={<Protected adminOnly><ProductForm /></Protected>} /> <Route path="/products/new" element={<Protected adminOnly><ProductForm /></Protected>} />
<Route path="/products/:id" element={<Protected><ProductForm /></Protected>} /> <Route path="/products/:id" element={<Protected wide><ProductForm /></Protected>} />
<Route path="/i/:uid" element={<Protected><ItemResolve /></Protected>} /> <Route path="/i/:uid" element={<Protected><ItemResolve /></Protected>} />
<Route path="/l/:id" element={<Protected><LocationResolve /></Protected>} /> <Route path="/l/:id" element={<Protected><LocationResolve /></Protected>} />
<Route path="/groups" element={<Protected adminOnly wide><Groups /></Protected>} /> <Route path="/groups" element={<Protected adminOnly wide><Groups /></Protected>} />

View File

@@ -593,7 +593,7 @@ export default function ProductForm() {
{error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>} {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
<div className="grid-2"> <div className={`grid-2${isNew ? "" : " form-plus-table"}`}>
<form className="card" onSubmit={save}> <form className="card" onSubmit={save}>
{/* Bild steht neben den Kennfeldern, nicht darueber: Der Platz rechts {/* Bild steht neben den Kennfeldern, nicht darueber: Der Platz rechts
von Barcode, Name und Marke ist ohnehin selten ausgenutzt. Fehlt von Barcode, Name und Marke ist ohnehin selten ausgenutzt. Fehlt

View File

@@ -189,6 +189,14 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
@media (max-width: 1000px) { @media (max-width: 1000px) {
.grid-2.wide-aside { grid-template-columns: minmax(0, 1fr); } .grid-2.wide-aside { grid-template-columns: minmax(0, 1fr); }
} }
/* Artikelseite (Bearbeiten): links das Formular - dessen Felder brauchen keine
halbe Seite -, rechts die Chargen-/Bestandstabelle, die den restlichen Platz
bekommt, damit Menge/MHD/Lagerort ohne Seitwaerts-Scrollen nebeneinander
passen. Spiegelbild von .wide-aside (dort steht die Tabelle links). */
.grid-2.form-plus-table { grid-template-columns: clamp(440px, 34%, 640px) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) {
.grid-2.form-plus-table { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Forms ---------- */ /* ---------- Forms ---------- */
label { display: block; margin-bottom: var(--sp-4); font-size: 0.8rem; color: var(--muted); font-weight: 580; } label { display: block; margin-bottom: var(--sp-4); font-size: 0.8rem; color: var(--muted); font-weight: 580; }