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:
@@ -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>} />
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
Reference in New Issue
Block a user