hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Fix dashboard swipe and visual details

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 12:36:53 +02:00
parent abcd35714f
commit 7c9f464686
4 changed files with 69 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+44 -1
View File
@@ -955,7 +955,8 @@ body.page-dashboard .content {
gap: 0.25rem;
min-width: 0;
flex: 0 0 var(--sleep-segment-width, auto);
padding: 0.35rem 0.65rem;
width: var(--sleep-segment-width, auto);
padding: 0.35rem 0.45rem;
color: rgba(255, 255, 255, 0.94);
font-size: 0.82rem;
white-space: nowrap;
@@ -964,6 +965,15 @@ body.page-dashboard .content {
position: relative;
}
.sleep-phase-bar__segment.is-compact {
padding-inline: 0.12rem;
font-size: 0;
}
.sleep-phase-bar__segment.is-compact strong {
display: none;
}
.sleep-phase-bar__segment::after {
content: attr(data-tooltip);
position: fixed;
@@ -1962,6 +1972,39 @@ body.page-dashboard .content {
color: rgba(18, 48, 75, 0.9);
}
.day-summary-card__label,
.day-chip,
.range-day-card__score,
.score-scale,
.signal-scale {
color: rgba(18, 48, 75, 0.72);
}
.day-chip {
background: rgba(18, 48, 75, 0.07);
border-color: rgba(18, 48, 75, 0.14);
}
.signal-pill {
color: rgba(18, 48, 75, 0.92);
}
.signal-pill strong,
.signal-pill span {
color: rgba(18, 48, 75, 0.92);
}
.overlay-signal-card h3,
.overlay-signal-card p,
.overlay-signal-card__ring,
.overlay-signal-card__buttons button {
color: rgba(18, 48, 75, 0.92);
}
.overlay-signal-card__ring {
background: rgba(255, 255, 255, 0.68);
}
.range-moment-list__item span span,
.timeline-card__value,
.timeline-card--empty p {
assets/js/app.js
+20 -3
View File
@@ -1450,22 +1450,29 @@
let pointerStartX = 0;
let pointerStartY = 0;
let dragging = false;
let ignoreSwipe = false;
let didSwipe = false;
const handleSwipe = (deltaX, deltaY) => {
if (ignoreSwipe || document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
if (document.body.classList.contains("is-dashboard-overlay-open") || Math.abs(deltaX) < 70 || Math.abs(deltaY) > 50) {
return;
}
if (deltaX < 0 && swipeContainer.dataset.nextDate) {
didSwipe = true;
window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
} else if (deltaX > 0 && swipeContainer.dataset.prevDate) {
didSwipe = true;
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
}
};
swipeContainer.addEventListener("pointerdown", event => {
ignoreSwipe = Boolean(event.target.closest("a, button, input, textarea, select, label, [data-event-editable]"));
if (event.target.closest("input, textarea, select, label, [data-stepper], .dashboard-overlay")) {
dragging = false;
return;
}
didSwipe = false;
dragging = true;
pointerStartX = event.clientX;
pointerStartY = event.clientY;
@@ -1484,6 +1491,16 @@
dragging = false;
});
swipeContainer.addEventListener("click", event => {
if (!didSwipe) {
return;
}
event.preventDefault();
event.stopPropagation();
didSwipe = false;
}, true);
window.addEventListener("keydown", event => {
if (document.body.classList.contains("is-dashboard-overlay-open")) {
return;
templates/layout.php
-17
View File
@@ -121,23 +121,6 @@ $jsVersion = is_file(base_path('assets/js/app.js')) ? (string) filemtime(base_pa
</footer>
<?php endif; ?>
</main>
<?php if ($authUser !== null && !$immersiveDashboard): ?>
<nav class="mobile-nav glass-panel" aria-label="Mobile Hauptnavigation">
<a class="<?= is_active_path('/') ? 'active' : '' ?>" href="/">
<img class="nav-icon" src="<?= e(icon_path('dashboard')) ?>" alt="">
<span>Start</span>
</a>
<a class="<?= is_active_path('/archive') ? 'active' : '' ?>" href="/archive">
<img class="nav-icon" src="<?= e(icon_path('archive')) ?>" alt="">
<span>Archiv</span>
</a>
<a class="<?= is_active_path('/options') ? 'active' : '' ?>" href="/options">
<img class="nav-icon" src="<?= e(icon_path('options')) ?>" alt="">
<span>Optionen</span>
</a>
</nav>
<?php endif; ?>
</div>
</body>
</html>
templates/pages/dashboard.php
+5 -3
View File
@@ -40,7 +40,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<header class="dashboard-topbar">
<nav class="dashboard-switcher glass-panel" aria-label="Ansicht wechseln">
<a class="<?= $dashboardView === 'day' ? 'active' : '' ?>" href="/?view=day&amp;date=<?= e(rawurlencode($dashboardDate)) ?>">Tag</a>
<a class="<?= $dashboardView === 'day' && $dashboardDate === today() ? 'active' : '' ?>" href="/?view=day&amp;date=<?= e(rawurlencode(today())) ?>">Heute</a>
<a class="<?= $dashboardView === 'week' ? 'active' : '' ?>" href="/?view=week&amp;date=<?= e(rawurlencode(today())) ?>">Woche</a>
<a class="<?= $dashboardView === 'month' ? 'active' : '' ?>" href="/?view=month&amp;date=<?= e(rawurlencode(today())) ?>">Monat</a>
</nav>
@@ -214,7 +214,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php $phaseHours = max(0.0, (float) ($sleepPhases[$phase] ?? 0)); ?>
<?php if ($phaseHours <= 0) { continue; } ?>
<?php $phasePercent = $sleepBarTotal > 0 ? max(0.5, min(100, ($phaseHours / $sleepBarTotal) * 100)) : 0; ?>
<span class="sleep-phase-bar__segment sleep-phase-bar__segment--<?= e($class) ?>" style="--sleep-segment-width: <?= e((string) $phasePercent) ?>%" title="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h" data-tooltip="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h">
<span class="sleep-phase-bar__segment sleep-phase-bar__segment--<?= e($class) ?><?= $phasePercent < 13 ? ' is-compact' : '' ?>" style="--sleep-segment-width: <?= e((string) $phasePercent) ?>%" title="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h" data-tooltip="<?= e($label) ?>: <?= e(format_points($phaseHours)) ?> h">
<strong><?= e($label) ?></strong> <?= e(format_points($phaseHours)) ?> h
</span>
<?php endforeach; ?>
@@ -238,6 +238,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php foreach (['mood' => 'Stimmung', 'energy' => 'Energie', 'stress' => 'Stress'] as $metric => $label): ?>
<?php $value = normalize_signal_value($item[$metric] ?? 0); ?>
<?php $valueTone = signal_value_class($metric === 'stress' ? -$value : $value); ?>
<?php if ($value === 0) { continue; } ?>
<span class="signal-pill signal-pill--<?= e(signal_badge_tone($value, $metric)) ?> signal-pill--<?= e($valueTone) ?>">
<strong><?= e($label) ?></strong>
<img class="signal-pill__icon" src="<?= e(icon_path($metric === 'mood' ? 'signal-mood' : ($metric === 'energy' ? 'signal-energy' : 'signal-stress'))) ?>" alt="<?= e($label) ?>">
@@ -534,7 +535,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php endforeach; ?>
</div>
<?php $weekDetailDays = array_values(array_filter($dashboardWeek['days'], static fn (array $day): bool => !empty($day['has_content']))); ?>
<?php $weekDetailDays = array_values(array_reverse(array_filter($dashboardWeek['days'], static fn (array $day): bool => !empty($day['has_content'])))); ?>
<?php if ($weekDetailDays !== []): ?>
<div class="range-day-list">
<?php foreach ($weekDetailDays as $day): ?>
@@ -632,6 +633,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
return !empty($day['has_content']) || $summaryText !== '';
})); ?>
<?php $monthDetailDays = array_reverse($monthDetailDays); ?>
<?php if ($monthDetailDays !== []): ?>
<div class="range-day-list range-day-list--month">
<?php foreach ($monthDetailDays as $day): ?>