BERGVOLT/Materialschein
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace horizontal-scroll table with a stacked card layout on mobile
Build and Deploy / version (push) Successful in 2s
Details
Build and Deploy / build (push) Successful in 11s
Details
Build and Deploy / deploy (push) Successful in 2s
Details

Browse Source 
Materialliste war auf schmalen Screens nur per Seitwärts-Scrollen lesbar.
Ab 680px Breite wird jede Zeile jetzt als Karte dargestellt (CSS Grid mit
benannten Areas, Bezeichnung prominent oben, Menge/Einheit/Art.-Nr./Notiz
darunter beschriftet, Position + Löschen-Button in der Kopfzeile der Karte).
Die Grid-Areas ordnen die Felder unabhängig von der DOM-Reihenfolge um, die
Desktop-Tabelle bleibt unverändert in der ursprünglichen Spaltenreihenfolge.

Temporärer test-build-only.yml Workflow zur Verifikation ohne Registry-Push.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fidelis Huber
2026-08-21 19:38:07 +02:00
co-authored by Claude Sonnet 5
parent 43b1900f9a
commit a910d1e399
3 changed files with 65 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/styles.css
+45
View File
@@ -225,3 +225,48 @@ table.pinfo td:last-child{text-align:right;font-weight:600}
.print-bar .btn{flex:1}
.hdr-name,.hdr-role{display:none}
}
/* Materialliste auf schmalen Screens: Karten statt Tabelle mit Horizontal-Scroll */
@media(max-width:680px){
.table-wrap{overflow-x:visible;border:none}
.mat-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
.mat-table thead{display:none}
.mat-table tbody{display:flex;flex-direction:column;gap:10px}
.mat-table tr{
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:
"chk pos del"
"bez bez bez"
"menge menge menge"
"einh einh einh"
"art art art"
"notiz notiz notiz";
column-gap:8px;
background:var(--bg2);border:1px solid var(--bor);border-radius:12px;padding:12px 14px;
}
.mat-table tr.row-selected{background:rgba(255,176,96,.09);border-color:rgba(255,176,96,.4)}
.mat-table td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(34,71,95,.6);font-size:12.5px}
.mat-table td::before{content:attr(data-label);font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.mat-table td.td-chk{grid-area:chk;border-bottom:none;padding:0;align-items:flex-start}
.mat-table td.td-chk::before{content:none}
.mat-table td.td-pos{grid-area:pos;border-bottom:none;padding:0;font-size:10.5px;color:var(--muted);justify-content:flex-start}
.mat-table td.td-pos::before{content:'Pos. '}
.mat-table td.td-del{grid-area:del;border-bottom:none;padding:0;justify-content:flex-end}
.mat-table td.td-del::before{content:none}
.mat-table td.td-bez{
grid-area:bez;border-bottom:1px solid var(--bor);padding:8px 0 10px;margin-bottom:2px;
font-size:15px;font-weight:800;color:#fff;display:block
}
.mat-table td.td-bez::before{content:none}
.mat-table td.td-menge{grid-area:menge}
.mat-table td.td-einh{grid-area:einh}
.mat-table td.td-art{grid-area:art}
.mat-table td.td-notiz{grid-area:notiz;flex-direction:column;align-items:stretch;gap:6px;border-bottom:none}
.mat-table td.td-notiz::before{content:'Notiz'}
}