rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sprint 19: Social, UX-Verbesserungen, Nerd2Noob-Hilfe

Browse source
This commit is contained in:
rene 2026-04-17 23:53:50 +02:00
parent 10d30bf565
commit 89d87030a2
18 changed files with 930 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

90
backend/static/css/components.css
View file

@ -5044,3 +5044,93 @@ textarea.form-control {
color: var(--c-text-muted);
margin-top: 2px;
}
/* health chart extras (weight chart) */
.health-chart-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--c-text); margin-bottom: var(--space-2); }
.health-chart-svg { width: 100%; height: auto; display: block; }
.health-chart-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--c-text-secondary); margin-top: var(--space-1); }
.health-chart-empty { font-size: var(--text-sm); color: var(--c-text-muted); text-align: center; padding: var(--space-4) 0; }
/* ============================================================
RSVP — Event-Teilnahme
============================================================ */
.event-rsvp-bar { display:flex; gap:var(--space-2); align-items:center; margin:var(--space-3) 0 var(--space-2); flex-wrap:wrap; }
.event-rsvp-btn { display:inline-flex; align-items:center; gap:var(--space-1); padding:6px 14px; border-radius:var(--radius); border:1.5px solid var(--c-border); background:var(--c-surface); color:var(--c-text-secondary); font-size:var(--text-sm); font-weight:500; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.event-rsvp-btn:hover { border-color:var(--c-primary); color:var(--c-primary); }
.event-rsvp-btn.active { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.event-attendees { font-size:var(--text-sm); color:var(--c-text-secondary); cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-1); }
.event-attendees:hover { color:var(--c-primary); }
.ev-attendees-list { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
.ev-attendee-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--c-surface-2); font-size:var(--text-xs); color:var(--c-text-secondary); }
/* ============================================================
SERVICES / MATCHING (Sitting & Walks Anbieter-Suche)
============================================================ */
.svc-matching-layout { display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-3) 0; }
.svc-own-offer { padding:var(--space-4); }
.svc-own-offer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.svc-own-offer-title { font-weight:var(--weight-semibold); font-size:var(--text-base); }
.svc-login-hint { font-size:var(--text-sm); color:var(--c-text-muted); }
.svc-toggle { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.svc-toggle input { opacity:0; width:0; height:0; }
.svc-toggle-slider { position:absolute; inset:0; background:var(--c-border); border-radius:var(--radius-full); transition:background var(--transition-fast); }
.svc-toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform var(--transition-fast); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.svc-toggle input:checked + .svc-toggle-slider { background:var(--c-primary); }
.svc-toggle input:checked + .svc-toggle-slider::before { transform:translateX(20px); }
.svc-offer-form { display:flex; flex-direction:column; gap:var(--space-3); }
.svc-offer-form--hidden { display:none; }
.svc-hint { color:var(--c-text-secondary); font-size:var(--text-sm); text-align:center; padding:var(--space-6) 0; }
.svc-results-list { display:flex; flex-direction:column; gap:var(--space-3); }
.svc-card { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4); background:var(--c-surface); border-radius:var(--radius-lg); border:1px solid var(--c-border-light); box-shadow:var(--shadow-xs); }
.svc-card-avatar { width:44px; height:44px; border-radius:var(--radius-full); background:var(--c-primary-subtle); color:var(--c-primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.svc-card-body { flex:1; min-width:0; }
.svc-card-name { font-weight:var(--weight-semibold); margin-bottom:var(--space-1); }
.svc-card-dist { font-size:var(--text-xs); color:var(--c-text-muted); margin-bottom:var(--space-1); }
.svc-card-desc { font-size:var(--text-sm); color:var(--c-text-secondary); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.svc-card-side { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2); flex-shrink:0; }
.svc-card-price { font-weight:var(--weight-bold); color:var(--c-primary); font-size:var(--text-sm); }
/* ============================================================
HELP TOOLTIP
============================================================ */
.by-help-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--c-surface-2);
color: var(--c-text-secondary);
border: none;
cursor: pointer;
vertical-align: middle;
margin-left: 4px;
flex-shrink: 0;
transition: background .15s;
}
.by-help-btn:hover { background: var(--c-primary-subtle, #e8f0fe); color: var(--c-primary); }
.by-help-tooltip {
position: absolute;
z-index: 9000;
background: var(--c-text);
color: var(--c-bg);
font-size: var(--text-xs);
line-height: 1.5;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
max-width: 240px;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
pointer-events: none;
}
/* SVG-Icon-Variante (Phosphor) */
.empty-state-icon > svg.ph-icon,
svg.empty-state-icon {
width: 56px;
height: 56px;
color: var(--c-text-muted);
opacity: .5;
}
.empty-state-cta {
margin-top: var(--space-2);
}