CSS Mobile: Komplett überarbeitet - weniger invasiv
- 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 <noreply@anthropic.com>
This commit is contained in:
parent
15fec1e8df
commit
2b3514f762
1 changed files with 192 additions and 234 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue