From 2b3514f762d6c84ae67c0f8ec74f90127305bd07 Mon Sep 17 00:00:00 2001 From: data Date: Sun, 8 Feb 2026 18:48:38 +0100 Subject: [PATCH] =?UTF-8?q?CSS=20Mobile:=20Komplett=20=C3=BCberarbeitet=20?= =?UTF-8?q?-=20weniger=20invasiv?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Tabellen-Layout bleibt erhalten (kein display:block mehr) - Spaltenbreiten werden nur reduziert, nicht versteckt - Horizontales Scrollen in Tabellen-Containern ermöglicht - Touch-Targets für Icons vergrößert - Font-Size 16px für Inputs (verhindert iOS-Zoom) - Pixel 3a kompatibel (393px Viewport) Co-Authored-By: Claude Opus 4.5 --- css/stundenzettel-mobile.css | 426 ++++++++++++++++------------------- 1 file changed, 192 insertions(+), 234 deletions(-) diff --git a/css/stundenzettel-mobile.css b/css/stundenzettel-mobile.css index 0fa0093..6f8664d 100644 --- a/css/stundenzettel-mobile.css +++ b/css/stundenzettel-mobile.css @@ -1,8 +1,7 @@ /** * Stundenzettel Mobile CSS * Responsive Styles für Touch-Geräte - * - * Wird automatisch bei Bildschirmbreite < 768px aktiv + * Version 1.2.0 */ /* ============================================ @@ -10,321 +9,280 @@ ============================================ */ @media screen and (max-width: 768px) { - /* Allgemeine Anpassungen */ + /* Viewport-Fix: Kein horizontales Scrollen */ + .mod-stundenzettel .fiche, .mod-stundenzettel .fichecenter { + max-width: 100vw; + overflow-x: hidden; padding: 0 5px; } - /* Tabs kompakter */ - .mod-stundenzettel .tabsElem a { - padding: 8px 10px !important; - font-size: 12px !important; + /* Tabellen: Horizontal scrollbar wenn nötig */ + .mod-stundenzettel .div-table-responsive-no-min { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin: 0 -5px; + padding: 0 5px; } - /* Banner kompakter */ - .mod-stundenzettel .arearef { - padding: 10px !important; + /* Tabellen kompakter */ + .mod-stundenzettel table.noborder { + font-size: 13px; + } + + .mod-stundenzettel table.noborder th, + .mod-stundenzettel table.noborder td { + padding: 6px 4px !important; + } + + /* Spalten mit fester Breite reduzieren */ + .mod-stundenzettel table.noborder th[style*="width:80px"], + .mod-stundenzettel table.noborder td[style*="width:80px"] { + width: 60px !important; + } + + .mod-stundenzettel table.noborder th[style*="width:200px"], + .mod-stundenzettel table.noborder td[style*="width:200px"] { + width: 120px !important; + } + + .mod-stundenzettel table.noborder th[style*="width:100px"], + .mod-stundenzettel table.noborder td[style*="width:100px"] { + width: 70px !important; + } + + /* Buttons: 40px -> 35px */ + .mod-stundenzettel table.noborder th[style*="width:40px"], + .mod-stundenzettel table.noborder td[style*="width:40px"] { + width: 35px !important; + padding: 4px 2px !important; } /* ============================================ - LEISTUNGEN TABELLE -> KARTEN + EINGABEFELDER - Touch-optimiert ============================================ */ - .mod-stundenzettel table.noborder tr.liste_titre th { - display: none; - } - /* Jede Zeile wird zur Karte */ - .mod-stundenzettel table.noborder tr.oddeven { - display: block; - background: #fff; - border: 1px solid #ddd; - border-radius: 8px; - margin: 10px 0; - padding: 12px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - } - - .mod-stundenzettel table.noborder tr.oddeven td { - display: block; - text-align: left !important; - padding: 4px 0; - border: none !important; - width: 100% !important; - } - - /* Labels vor den Werten (via CSS content) */ - .mod-stundenzettel table.noborder tr.oddeven td:before { - content: attr(data-label); - font-weight: bold; - color: #666; - display: inline-block; - min-width: 80px; - margin-right: 10px; - } - - /* Zeit-Inputs nebeneinander */ + /* Alle Inputs: Mindestgröße für Touch */ + .mod-stundenzettel input[type="text"], + .mod-stundenzettel input[type="number"], .mod-stundenzettel input[type="time"], - .mod-stundenzettel select[name="time_start"], - .mod-stundenzettel select[name="time_end"] { - width: 45% !important; - display: inline-block; - font-size: 16px !important; /* Verhindert Zoom auf iOS */ - padding: 10px !important; + .mod-stundenzettel select, + .mod-stundenzettel textarea { + font-size: 16px !important; /* Verhindert iOS Zoom */ + min-height: 40px; + } + + /* Number-Inputs kompakter aber touchbar */ + .mod-stundenzettel input[type="number"] { + width: 60px !important; + padding: 8px 4px !important; + } + + /* Zeit-Inputs */ + .mod-stundenzettel input[type="time"] { + width: 80px !important; + padding: 8px !important; } /* Textarea volle Breite */ .mod-stundenzettel textarea { width: 100% !important; - min-height: 80px; - font-size: 16px !important; - padding: 10px !important; + min-height: 60px; box-sizing: border-box; } - /* Number Inputs größer */ - .mod-stundenzettel input[type="number"] { - width: 80px !important; - font-size: 18px !important; - padding: 12px 8px !important; - text-align: center !important; + /* Select-Felder */ + .mod-stundenzettel select { + max-width: 100%; } - /* Text Inputs */ - .mod-stundenzettel input[type="text"] { - width: 100% !important; - font-size: 16px !important; - padding: 10px !important; - box-sizing: border-box; - } - - /* ============================================ - BUTTONS - TOUCH-FREUNDLICH - ============================================ */ - .mod-stundenzettel .fas, - .mod-stundenzettel .far { - font-size: 1.5em !important; - padding: 8px !important; - } - - /* Action Buttons (Plus/Minus/Save/Delete) */ - .mod-stundenzettel td .fa-plus-circle, - .mod-stundenzettel td .fa-minus-circle, - .mod-stundenzettel td .fa-save, - .mod-stundenzettel td .fa-trash, - .mod-stundenzettel td .fa-pencil-alt { - font-size: 1.8em !important; - padding: 12px !important; - display: inline-block; - } - - /* Button-Reihe horizontal */ - .mod-stundenzettel .mobile-actions { - display: flex; - justify-content: space-around; - margin-top: 10px; - padding-top: 10px; - border-top: 1px solid #eee; - } - - /* ============================================ - PRODUKTE SECTION - ============================================ */ - - /* Produkt-Karte */ - .mod-stundenzettel table.noborder tr.oddeven td:first-child { - font-weight: bold; - font-size: 14px; - padding-bottom: 8px !important; - border-bottom: 1px solid #eee !important; - margin-bottom: 8px; - } - - /* Mengen-Steuerung als Inline-Block */ - .mod-stundenzettel .qty-controls { - display: flex; - align-items: center; - justify-content: center; - gap: 15px; - margin: 10px 0; - } - - /* Plus/Minus Buttons größer */ - .mod-stundenzettel a[onclick*="plusQty"], - .mod-stundenzettel a[onclick*="Qty"] { - padding: 15px !important; - } - - /* ============================================ - SUMMENZEILEN - ============================================ */ - .mod-stundenzettel tr.liste_total { - display: block; - background: #f8f9fa; - border: 2px solid #28a745; - border-radius: 8px; - padding: 15px; - margin: 10px 0; - text-align: center !important; - } - - .mod-stundenzettel tr.liste_total td { - display: inline-block; - text-align: center !important; - padding: 5px !important; - border: none !important; - } - - /* ============================================ - SECTION HEADER - ============================================ */ - .mod-stundenzettel h3 { - font-size: 18px; - padding: 10px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border-radius: 8px; - margin: 15px 0 10px 0; - } - - .mod-stundenzettel tr.liste_titre th[colspan] { - display: block !important; - font-size: 16px; - padding: 12px !important; - background: #f8f9fa; - border-radius: 8px; - margin: 15px 0 5px 0; - } - - /* ============================================ - FORMULAR-CARDS (Hinzufügen) - ============================================ */ - .mod-stundenzettel tr.oddeven form { - display: block; - } - - .mod-stundenzettel tr.oddeven td[colspan] { - padding: 10px 0 !important; - } - - /* Produkt-Auswahl Dropdown */ .mod-stundenzettel select.minwidth200, .mod-stundenzettel select.minwidth300 { - width: 100% !important; - font-size: 16px !important; - padding: 12px !important; - margin-bottom: 10px; + min-width: 150px !important; + max-width: 100% !important; } /* ============================================ - MERKZETTEL/NOTIZEN + ICONS/BUTTONS - Touch-Targets ============================================ */ - .mod-stundenzettel .fa-check-square, - .mod-stundenzettel .fa-square { - font-size: 1.8em !important; - padding: 10px !important; + + /* Icons größer und mit Padding für Touch */ + .mod-stundenzettel td .fas, + .mod-stundenzettel td .far { + font-size: 1.3em; + padding: 8px; + min-width: 35px; + min-height: 35px; + display: inline-flex; + align-items: center; + justify-content: center; + } + + /* Links in Zellen: größerer Touch-Bereich */ + .mod-stundenzettel td a { + display: inline-block; + padding: 4px; } /* ============================================ - BADGES + TABS - Kompakter ============================================ */ - .mod-stundenzettel .badge { + .mod-stundenzettel .tabsElem a { + padding: 8px 10px !important; font-size: 12px !important; - padding: 4px 8px !important; + } + + /* Tabs umbrechen wenn nötig */ + .mod-stundenzettel .tabs { + flex-wrap: wrap; } /* ============================================ - ACTION BUTTONS (Freigeben/Löschen) + SECTION-TITEL + ============================================ */ + .mod-stundenzettel h3 { + font-size: 16px; + padding: 8px 10px; + margin: 12px 0 8px 0; + } + + /* Abschnitts-Header in Tabellen */ + .mod-stundenzettel tr.liste_titre th[colspan] { + font-size: 14px; + padding: 10px 8px !important; + } + + /* ============================================ + ACTION-BUTTONS (Freigeben/Löschen) ============================================ */ .mod-stundenzettel .tabsAction { display: flex; flex-wrap: wrap; - gap: 10px; - padding: 15px; + gap: 8px; + padding: 10px 5px; } .mod-stundenzettel .tabsAction a.butAction, .mod-stundenzettel .tabsAction a.butActionDelete { - flex: 1 1 45%; + flex: 1 1 calc(50% - 8px); text-align: center; - padding: 15px 10px !important; - font-size: 14px !important; - border-radius: 8px; + padding: 12px 8px !important; + font-size: 13px !important; + white-space: nowrap; } /* ============================================ - HIDE UNNECESSARY ELEMENTS ON MOBILE + BANNER/HEADER - Kompakter ============================================ */ - .mod-stundenzettel .opacitymedium small { - display: none; + .mod-stundenzettel .arearef { + padding: 8px !important; + } + + .mod-stundenzettel .refid { + font-size: 14px; } /* ============================================ - SELECT2 DROPDOWNS FIX + SELECT2 - Touch-optimiert ============================================ */ .mod-stundenzettel .select2-container { - width: 100% !important; + max-width: 100% !important; } .mod-stundenzettel .select2-selection { - min-height: 44px !important; - font-size: 16px !important; + min-height: 40px !important; + } + + .mod-stundenzettel .select2-selection__rendered { + line-height: 38px !important; + } + + /* ============================================ + BADGES - Lesbar + ============================================ */ + .mod-stundenzettel .badge { + font-size: 11px !important; + padding: 3px 6px !important; + white-space: nowrap; + } + + /* ============================================ + PRODUKTNAME - Umbrechen erlauben + ============================================ */ + .mod-stundenzettel td a[href*="product/card"] { + word-break: break-word; + } + + /* ============================================ + FORMS in Tabellen + ============================================ */ + .mod-stundenzettel tr.oddeven form { + display: contents; + } + + /* Freitext-Input unter Produkt-Select */ + .mod-stundenzettel td small.opacitymedium { + display: block; + margin-top: 5px; + } + + /* ============================================ + SUMMENZEILE + ============================================ */ + .mod-stundenzettel tr.liste_total td { + font-size: 13px; + padding: 8px 4px !important; } } /* ============================================ - EXTRA SMALL DEVICES (< 480px) + EXTRA SMALL (< 480px) - Smartphones ============================================ */ @media screen and (max-width: 480px) { - /* Noch kompaktere Tabs */ + /* Tabs noch kompakter */ .mod-stundenzettel .tabsElem a { - padding: 6px 8px !important; + padding: 6px 6px !important; font-size: 11px !important; } - /* Buttons nebeneinander */ + /* Action-Buttons untereinander */ .mod-stundenzettel .tabsAction a.butAction, .mod-stundenzettel .tabsAction a.butActionDelete { flex: 1 1 100%; } - /* Zeit-Inputs untereinander */ - .mod-stundenzettel input[type="time"], - .mod-stundenzettel select[name="time_start"], - .mod-stundenzettel select[name="time_end"] { - width: 100% !important; - margin-bottom: 8px; + /* Tabellen noch kompakter */ + .mod-stundenzettel table.noborder { + font-size: 12px; + } + + .mod-stundenzettel table.noborder th, + .mod-stundenzettel table.noborder td { + padding: 4px 2px !important; + } + + /* Verstecke weniger wichtige Spalten */ + .mod-stundenzettel table.noborder th:nth-child(n+6), + .mod-stundenzettel table.noborder td:nth-child(n+6) { + /* Optional: display: none; */ } } /* ============================================ - LANDSCAPE MODE ADJUSTMENTS - ============================================ */ -@media screen and (max-width: 768px) and (orientation: landscape) { - .mod-stundenzettel table.noborder tr.oddeven { - display: flex; - flex-wrap: wrap; - align-items: center; - } - - .mod-stundenzettel table.noborder tr.oddeven td { - flex: 1 1 auto; - min-width: 120px; - } -} - -/* ============================================ - TOUCH FEEDBACK + TOUCH-FEEDBACK ============================================ */ @media (hover: none) and (pointer: coarse) { + + /* Aktives Element visuell hervorheben */ .mod-stundenzettel a:active, .mod-stundenzettel button:active { opacity: 0.7; - transform: scale(0.98); } - .mod-stundenzettel .fas:active, - .mod-stundenzettel .far:active { - transform: scale(1.1); + /* Icons beim Tippen größer */ + .mod-stundenzettel td .fas:active, + .mod-stundenzettel td .far:active { + transform: scale(1.2); } }