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
|
* Stundenzettel Mobile CSS
|
||||||
* Responsive Styles für Touch-Geräte
|
* Responsive Styles für Touch-Geräte
|
||||||
*
|
* Version 1.2.0
|
||||||
* Wird automatisch bei Bildschirmbreite < 768px aktiv
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
|
|
@ -10,321 +9,280 @@
|
||||||
============================================ */
|
============================================ */
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
/* Allgemeine Anpassungen */
|
/* Viewport-Fix: Kein horizontales Scrollen */
|
||||||
|
.mod-stundenzettel .fiche,
|
||||||
.mod-stundenzettel .fichecenter {
|
.mod-stundenzettel .fichecenter {
|
||||||
|
max-width: 100vw;
|
||||||
|
overflow-x: hidden;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tabs kompakter */
|
/* Tabellen: Horizontal scrollbar wenn nötig */
|
||||||
.mod-stundenzettel .tabsElem a {
|
.mod-stundenzettel .div-table-responsive-no-min {
|
||||||
padding: 8px 10px !important;
|
overflow-x: auto;
|
||||||
font-size: 12px !important;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
margin: 0 -5px;
|
||||||
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Banner kompakter */
|
/* Tabellen kompakter */
|
||||||
.mod-stundenzettel .arearef {
|
.mod-stundenzettel table.noborder {
|
||||||
padding: 10px !important;
|
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 */
|
/* Alle Inputs: Mindestgröße für Touch */
|
||||||
.mod-stundenzettel table.noborder tr.oddeven {
|
.mod-stundenzettel input[type="text"],
|
||||||
display: block;
|
.mod-stundenzettel input[type="number"],
|
||||||
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 */
|
|
||||||
.mod-stundenzettel input[type="time"],
|
.mod-stundenzettel input[type="time"],
|
||||||
.mod-stundenzettel select[name="time_start"],
|
.mod-stundenzettel select,
|
||||||
.mod-stundenzettel select[name="time_end"] {
|
.mod-stundenzettel textarea {
|
||||||
width: 45% !important;
|
font-size: 16px !important; /* Verhindert iOS Zoom */
|
||||||
display: inline-block;
|
min-height: 40px;
|
||||||
font-size: 16px !important; /* Verhindert Zoom auf iOS */
|
}
|
||||||
padding: 10px !important;
|
|
||||||
|
/* 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 */
|
/* Textarea volle Breite */
|
||||||
.mod-stundenzettel textarea {
|
.mod-stundenzettel textarea {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
min-height: 80px;
|
min-height: 60px;
|
||||||
font-size: 16px !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Number Inputs größer */
|
/* Select-Felder */
|
||||||
.mod-stundenzettel input[type="number"] {
|
.mod-stundenzettel select {
|
||||||
width: 80px !important;
|
max-width: 100%;
|
||||||
font-size: 18px !important;
|
|
||||||
padding: 12px 8px !important;
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 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.minwidth200,
|
||||||
.mod-stundenzettel select.minwidth300 {
|
.mod-stundenzettel select.minwidth300 {
|
||||||
width: 100% !important;
|
min-width: 150px !important;
|
||||||
font-size: 16px !important;
|
max-width: 100% !important;
|
||||||
padding: 12px !important;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
MERKZETTEL/NOTIZEN
|
ICONS/BUTTONS - Touch-Targets
|
||||||
============================================ */
|
============================================ */
|
||||||
.mod-stundenzettel .fa-check-square,
|
|
||||||
.mod-stundenzettel .fa-square {
|
/* Icons größer und mit Padding für Touch */
|
||||||
font-size: 1.8em !important;
|
.mod-stundenzettel td .fas,
|
||||||
padding: 10px !important;
|
.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;
|
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 {
|
.mod-stundenzettel .tabsAction {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
padding: 15px;
|
padding: 10px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mod-stundenzettel .tabsAction a.butAction,
|
.mod-stundenzettel .tabsAction a.butAction,
|
||||||
.mod-stundenzettel .tabsAction a.butActionDelete {
|
.mod-stundenzettel .tabsAction a.butActionDelete {
|
||||||
flex: 1 1 45%;
|
flex: 1 1 calc(50% - 8px);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 15px 10px !important;
|
padding: 12px 8px !important;
|
||||||
font-size: 14px !important;
|
font-size: 13px !important;
|
||||||
border-radius: 8px;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
HIDE UNNECESSARY ELEMENTS ON MOBILE
|
BANNER/HEADER - Kompakter
|
||||||
============================================ */
|
============================================ */
|
||||||
.mod-stundenzettel .opacitymedium small {
|
.mod-stundenzettel .arearef {
|
||||||
display: none;
|
padding: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mod-stundenzettel .refid {
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
SELECT2 DROPDOWNS FIX
|
SELECT2 - Touch-optimiert
|
||||||
============================================ */
|
============================================ */
|
||||||
.mod-stundenzettel .select2-container {
|
.mod-stundenzettel .select2-container {
|
||||||
width: 100% !important;
|
max-width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mod-stundenzettel .select2-selection {
|
.mod-stundenzettel .select2-selection {
|
||||||
min-height: 44px !important;
|
min-height: 40px !important;
|
||||||
font-size: 16px !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) {
|
@media screen and (max-width: 480px) {
|
||||||
|
|
||||||
/* Noch kompaktere Tabs */
|
/* Tabs noch kompakter */
|
||||||
.mod-stundenzettel .tabsElem a {
|
.mod-stundenzettel .tabsElem a {
|
||||||
padding: 6px 8px !important;
|
padding: 6px 6px !important;
|
||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Buttons nebeneinander */
|
/* Action-Buttons untereinander */
|
||||||
.mod-stundenzettel .tabsAction a.butAction,
|
.mod-stundenzettel .tabsAction a.butAction,
|
||||||
.mod-stundenzettel .tabsAction a.butActionDelete {
|
.mod-stundenzettel .tabsAction a.butActionDelete {
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Zeit-Inputs untereinander */
|
/* Tabellen noch kompakter */
|
||||||
.mod-stundenzettel input[type="time"],
|
.mod-stundenzettel table.noborder {
|
||||||
.mod-stundenzettel select[name="time_start"],
|
font-size: 12px;
|
||||||
.mod-stundenzettel select[name="time_end"] {
|
}
|
||||||
width: 100% !important;
|
|
||||||
margin-bottom: 8px;
|
.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
|
TOUCH-FEEDBACK
|
||||||
============================================ */
|
|
||||||
@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
|
|
||||||
============================================ */
|
============================================ */
|
||||||
@media (hover: none) and (pointer: coarse) {
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
|
||||||
|
/* Aktives Element visuell hervorheben */
|
||||||
.mod-stundenzettel a:active,
|
.mod-stundenzettel a:active,
|
||||||
.mod-stundenzettel button:active {
|
.mod-stundenzettel button:active {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mod-stundenzettel .fas:active,
|
/* Icons beim Tippen größer */
|
||||||
.mod-stundenzettel .far:active {
|
.mod-stundenzettel td .fas:active,
|
||||||
transform: scale(1.1);
|
.mod-stundenzettel td .far:active {
|
||||||
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue