Sprint 12: UI-Vereinheitlichung + Läufigkeits-Tracker
- by-tabs/by-tab: einheitliche Tab/Pill-Navigation in allen Seiten - by-section-label, by-toolbar: einheitliche Section-Labels und Toolbars - Design-Tokens: fehlende --c-amber, --c-primary-soft ergänzt, Fallback-Werte entfernt - sitting.js: sitting-layout für konsistentes flush-Layout (wie walks) - Läufigkeits-Tracker: neuer Health-Tab für Hündinnen mit Zyklusvorhersage, Timeline vergangener Läufigkeiten, Erinnerungen und auto-berechnetem Nächst-Datum - emptyState-Bug: icon-Parameter muss SVG sein, nicht Icon-Name (dog/bell/warning gefixt) - SW-Cache: by-v103, APP_VER: 79
This commit is contained in:
parent
32d630d5a1
commit
b58789373c
30 changed files with 4344 additions and 523 deletions
|
|
@ -163,7 +163,69 @@
|
|||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
3. BADGES & STATUS-PILLS
|
||||
3. BY-TABS — Einheitliche Tab/Filter-Navigation (app-weit)
|
||||
------------------------------------------------------------ */
|
||||
.by-tabs {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.by-tabs::-webkit-scrollbar { display: none; }
|
||||
|
||||
.by-tab {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1.5px solid var(--c-border);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.by-tab.active {
|
||||
background: var(--c-primary);
|
||||
border-color: var(--c-primary);
|
||||
color: var(--c-text-inverse);
|
||||
}
|
||||
.by-tab:hover:not(.active) {
|
||||
border-color: var(--c-primary);
|
||||
color: var(--c-primary);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
4. BY-SECTION-LABEL + BY-TOOLBAR — weitere gemeinsame Elemente
|
||||
------------------------------------------------------------ */
|
||||
|
||||
/* Kleines Überschriften-Label über Gruppen ("Aktuelle Medikamente" etc.) */
|
||||
.by-section-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--c-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: var(--space-3) 0 var(--space-1);
|
||||
}
|
||||
|
||||
/* Toolbar-Leiste oben auf einer Seite (Background + Border + Flex) */
|
||||
.by-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--c-surface);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
5. BADGES & STATUS-PILLS
|
||||
------------------------------------------------------------ */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
|
|
@ -863,12 +925,8 @@ textarea.form-control {
|
|||
GESUNDHEIT
|
||||
============================================================ */
|
||||
|
||||
/* Header mit KI-Button */
|
||||
.health-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: var(--space-3) 0 var(--space-2);
|
||||
}
|
||||
/* .health-header → by-toolbar with flex-end override */
|
||||
.health-header { justify-content: flex-end; padding: var(--space-3) 0 var(--space-2); background: none; border-bottom: none; }
|
||||
|
||||
/* Tab-Leiste — Mobile: horizontal scrollbar, Desktop: umbrechen */
|
||||
.health-tabs {
|
||||
|
|
@ -878,36 +936,7 @@ textarea.form-control {
|
|||
padding-bottom: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
/* Auf sehr kleinen Screens: scrollen statt umbrechen */
|
||||
@media (max-width: 480px) {
|
||||
.health-tabs {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
padding-right: var(--space-4);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.health-tabs::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
|
||||
.health-tab {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 2px solid var(--c-border);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.health-tab.active {
|
||||
background: var(--c-primary);
|
||||
border-color: var(--c-primary);
|
||||
color: var(--c-text-inverse);
|
||||
}
|
||||
/* .health-tabs / .health-tab → now use .by-tabs / .by-tab */
|
||||
|
||||
/* Karten-Liste */
|
||||
.health-list {
|
||||
|
|
@ -954,15 +983,7 @@ textarea.form-control {
|
|||
.ampel-text-yellow { color: #d97706; }
|
||||
.ampel-text-red { color: #dc2626; }
|
||||
|
||||
/* Gruppen-Label (z.B. "Aktuelle Medikamente") */
|
||||
.health-group-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--c-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: var(--space-3) 0 var(--space-1);
|
||||
}
|
||||
/* .health-group-label → now uses .by-section-label */
|
||||
|
||||
/* Gewicht-Diagramm-Wrapper */
|
||||
.health-chart-wrap {
|
||||
|
|
@ -1464,10 +1485,10 @@ textarea.form-control {
|
|||
background: var(--c-bg);
|
||||
}
|
||||
.rk-header {
|
||||
background: var(--c-surface);
|
||||
background: var(--c-surface);
|
||||
border-bottom: 1px solid var(--c-border-light);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rk-search-row {
|
||||
display: flex;
|
||||
|
|
@ -2118,15 +2139,18 @@ textarea.form-control {
|
|||
/* ------------------------------------------------------------
|
||||
GASSI-TREFFEN (walks.js)
|
||||
------------------------------------------------------------ */
|
||||
.walks-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--c-surface);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
.walks-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.walks-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/* .walks-toolbar → now uses .by-toolbar */
|
||||
.walks-view-toggle {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
|
|
@ -2158,13 +2182,7 @@ textarea.form-control {
|
|||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.walks-section-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--c-text-secondary);
|
||||
padding: var(--space-1) 0;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
/* .walks-section-label → now uses .by-section-label */
|
||||
.walks-card {
|
||||
background: var(--c-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
|
|
@ -2239,15 +2257,7 @@ textarea.form-control {
|
|||
/* ------------------------------------------------------------
|
||||
EVENTS (events.js)
|
||||
------------------------------------------------------------ */
|
||||
.events-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--c-surface);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* .events-toolbar → now uses .by-toolbar */
|
||||
.events-view-toggle {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
|
|
@ -2272,33 +2282,12 @@ textarea.form-control {
|
|||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
.events-filter-bar {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
overflow-x: auto;
|
||||
background: var(--c-surface);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.events-filter-bar::-webkit-scrollbar { display: none; }
|
||||
.events-filter-btn {
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
border: 1.5px solid var(--c-border);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.events-filter-btn.active {
|
||||
background: var(--c-primary);
|
||||
color: #fff;
|
||||
border-color: var(--c-primary);
|
||||
}
|
||||
/* .events-filter-btn → now uses .by-tab */
|
||||
.events-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
|
@ -2398,42 +2387,12 @@ textarea.form-control {
|
|||
}
|
||||
/* Quelle-Filter-Leiste */
|
||||
.events-source-bar {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
overflow-x: auto;
|
||||
background: var(--c-bg);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.events-source-bar::-webkit-scrollbar { display: none; }
|
||||
.events-source-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
border: 1.5px solid var(--c-border);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||||
}
|
||||
.events-source-btn.active,
|
||||
.events-source-btn:hover {
|
||||
border-color: var(--c-primary);
|
||||
background: var(--c-primary-soft, #e8f0fe);
|
||||
color: var(--c-primary);
|
||||
}
|
||||
.events-source-vdh.active,
|
||||
.events-source-vdh:hover {
|
||||
border-color: #1a4fa0;
|
||||
background: #e8eef8;
|
||||
color: #1a4fa0;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--c-bg);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* .events-source-btn → now uses .by-tab */
|
||||
/* Events-Karten: Aktions-Zeile */
|
||||
.events-card-actions {
|
||||
margin-top: var(--space-1);
|
||||
|
|
@ -2465,28 +2424,19 @@ textarea.form-control {
|
|||
/* ------------------------------------------------------------
|
||||
SITTING (sitting.js)
|
||||
------------------------------------------------------------ */
|
||||
.sitting-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sitting-tabs {
|
||||
display: flex;
|
||||
padding: var(--space-3) var(--space-4) var(--space-2);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
background: var(--c-surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sitting-tab {
|
||||
flex: 1;
|
||||
padding: var(--space-3);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--c-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.sitting-tab.active {
|
||||
color: var(--c-primary);
|
||||
border-bottom-color: var(--c-primary);
|
||||
background: var(--c-surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* .sitting-tab → now uses .by-tab */
|
||||
.sitting-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
|
@ -2566,12 +2516,7 @@ textarea.form-control {
|
|||
gap: var(--space-4);
|
||||
}
|
||||
.sitting-profil-fact { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
||||
.sitting-section-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--c-text-secondary);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
/* .sitting-section-label → now uses .by-section-label */
|
||||
.sitting-request-card {
|
||||
background: var(--c-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
|
|
@ -2707,23 +2652,7 @@ textarea.form-control {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.forum-tab {
|
||||
background: var(--c-surface-2);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius-full);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--c-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.forum-tab:hover { background: var(--c-surface-3); }
|
||||
.forum-tab.active {
|
||||
background: var(--c-primary);
|
||||
border-color: var(--c-primary);
|
||||
color: #fff;
|
||||
}
|
||||
/* .forum-tab → now uses .by-tab */
|
||||
|
||||
.forum-list-inner { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||
|
||||
|
|
@ -2853,16 +2782,10 @@ textarea.form-control {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
/* Category tabs — horizontal scroll */
|
||||
/* Category tabs — extends .by-tabs with extra bottom padding */
|
||||
.forum-category-tabs {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: var(--space-1);
|
||||
}
|
||||
.forum-category-tabs::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* Category badge (colored pill) */
|
||||
.forum-category-badge {
|
||||
|
|
@ -3229,39 +3152,7 @@ textarea.form-control {
|
|||
WIKI
|
||||
============================================================ */
|
||||
|
||||
/* Tab-Bar */
|
||||
.wiki-tab-bar {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
padding: var(--space-3) 0 var(--space-2);
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.wiki-tab-bar::-webkit-scrollbar { display: none; }
|
||||
|
||||
.wiki-tab-btn {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1.5px solid var(--c-border);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--c-surface);
|
||||
color: var(--c-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
||||
}
|
||||
.wiki-tab-btn.active {
|
||||
background: var(--c-primary);
|
||||
border-color: var(--c-primary);
|
||||
color: #fff;
|
||||
}
|
||||
.wiki-tab-btn:hover:not(.active) {
|
||||
border-color: var(--c-primary);
|
||||
color: var(--c-primary);
|
||||
}
|
||||
/* .wiki-tab-bar / .wiki-tab-btn → now use .by-tabs / .by-tab */
|
||||
|
||||
/* Search */
|
||||
.wiki-search-wrap {
|
||||
|
|
@ -4349,7 +4240,7 @@ textarea.form-control {
|
|||
color: #fff;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-bold);
|
||||
border-radius: 99px;
|
||||
border-radius: var(--radius-full);
|
||||
padding: 1px 6px;
|
||||
min-width: 18px;
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue