330 lines
9.1 KiB
CSS
330 lines
9.1 KiB
CSS
/**
|
|
* Stundenzettel Mobile CSS
|
|
* Responsive Styles für Touch-Geräte
|
|
*
|
|
* Wird automatisch bei Bildschirmbreite < 768px aktiv
|
|
*/
|
|
|
|
/* ============================================
|
|
MOBILE STYLES (max-width: 768px)
|
|
============================================ */
|
|
@media screen and (max-width: 768px) {
|
|
|
|
/* Allgemeine Anpassungen */
|
|
.mod-stundenzettel .fichecenter {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/* Tabs kompakter */
|
|
.mod-stundenzettel .tabsElem a {
|
|
padding: 8px 10px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Banner kompakter */
|
|
.mod-stundenzettel .arearef {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
LEISTUNGEN TABELLE -> KARTEN
|
|
============================================ */
|
|
.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 */
|
|
.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;
|
|
}
|
|
|
|
/* Textarea volle Breite */
|
|
.mod-stundenzettel textarea {
|
|
width: 100% !important;
|
|
min-height: 80px;
|
|
font-size: 16px !important;
|
|
padding: 10px !important;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ============================================
|
|
MERKZETTEL/NOTIZEN
|
|
============================================ */
|
|
.mod-stundenzettel .fa-check-square,
|
|
.mod-stundenzettel .fa-square {
|
|
font-size: 1.8em !important;
|
|
padding: 10px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BADGES
|
|
============================================ */
|
|
.mod-stundenzettel .badge {
|
|
font-size: 12px !important;
|
|
padding: 4px 8px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
ACTION BUTTONS (Freigeben/Löschen)
|
|
============================================ */
|
|
.mod-stundenzettel .tabsAction {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.mod-stundenzettel .tabsAction a.butAction,
|
|
.mod-stundenzettel .tabsAction a.butActionDelete {
|
|
flex: 1 1 45%;
|
|
text-align: center;
|
|
padding: 15px 10px !important;
|
|
font-size: 14px !important;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ============================================
|
|
HIDE UNNECESSARY ELEMENTS ON MOBILE
|
|
============================================ */
|
|
.mod-stundenzettel .opacitymedium small {
|
|
display: none;
|
|
}
|
|
|
|
/* ============================================
|
|
SELECT2 DROPDOWNS FIX
|
|
============================================ */
|
|
.mod-stundenzettel .select2-container {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.mod-stundenzettel .select2-selection {
|
|
min-height: 44px !important;
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
EXTRA SMALL DEVICES (< 480px)
|
|
============================================ */
|
|
@media screen and (max-width: 480px) {
|
|
|
|
/* Noch kompaktere Tabs */
|
|
.mod-stundenzettel .tabsElem a {
|
|
padding: 6px 8px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* Buttons nebeneinander */
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
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
|
|
============================================ */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.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);
|
|
}
|
|
}
|