rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Admin-Seite Mobile-kompatibel (Tabellen scrollbar, Filter wrap, Touch-Targets)

Browse source
This commit is contained in:
rene 2026-04-17 23:25:50 +02:00
parent 92620c2c52
commit bfdf6ebfae
4 changed files with 208 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

133
backend/static/css/components.css
View file

@ -4657,3 +4657,136 @@ textarea.form-control {
}
.photo-editor-empty { font-size: 5rem; color: var(--c-text-secondary); }
.photo-editor-controls { width: 100%; }
/* ------------------------------------------------------------
Admin-Seite — Mobile-Responsive Styles
------------------------------------------------------------ */
/* Tab-Leiste mit Abstand nach unten */
.adm-tabs {
margin-bottom: var(--space-5);
}
/* Filter-Zeile (Suche + Select / Suche + Checkbox) */
.adm-filter-row {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.adm-filter-input {
flex: 1 1 160px;
min-width: 0;
padding: var(--space-2) var(--space-3);
border: 1.5px solid var(--c-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: inherit;
background: var(--c-surface);
color: var(--c-text);
}
.adm-filter-select {
flex: 0 0 auto;
padding: var(--space-2) var(--space-3);
border: 1.5px solid var(--c-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: inherit;
background: var(--c-surface);
color: var(--c-text);
max-width: 140px;
}
.adm-filter-label {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--c-text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
/* Forum-Unternavigation scrollbar auf Mobile */
.adm-subnav {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-4);
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.adm-subnav::-webkit-scrollbar { display: none; }
.adm-subnav .btn { flex-shrink: 0; }
/* Tabellen: scrollbarer Container + Card ohne overflow:hidden */
.adm-table-card {
overflow: visible; /* Card-Schatten bleibt, overflow wird im Scroll-Container geregelt */
}
.adm-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg); /* für abgerundete Ecken bei overflow */
}
.adm-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
min-width: 480px; /* verhindert Quetschen unter diesem Wert */
}
.adm-th {
padding: var(--space-3) var(--space-4);
font-weight: var(--weight-semibold);
color: var(--c-text-secondary);
white-space: nowrap;
}
.adm-td {
padding: var(--space-3) var(--space-4);
}
/* Job-ID unter dem Job-Namen: kürzen wenn zu lang */
.adm-job-id {
font-size: var(--text-xs);
color: var(--c-text-muted);
font-weight: normal;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Trigger-Spalte in Jobs-Tabelle */
.adm-td-trigger {
color: var(--c-text-muted);
font-size: var(--text-xs);
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Monospace-Badge (Audit-Log Aktion) */
.adm-badge-mono {
font-size: var(--text-xs);
padding: 2px 7px;
border-radius: 3px;
background: var(--c-surface-2);
color: var(--c-text-secondary);
font-family: monospace;
white-space: nowrap;
}
/* Icon-only Buttons in Tabellen: 44px Touch-Target */
.adm-icon-btn {
min-width: 44px;
min-height: 44px;
padding: 0;
}
/* Auf sehr kleinen Screens: Select volle Breite */
@media (max-width: 360px) {
.adm-filter-select {
max-width: 100%;
flex-basis: 100%;
}
}