Fix dashboard swipe and visual details
This commit is contained in:
+44
-1
@@ -955,7 +955,8 @@ body.page-dashboard .content {
|
|||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex: 0 0 var(--sleep-segment-width, auto);
|
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);
|
color: rgba(255, 255, 255, 0.94);
|
||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -964,6 +965,15 @@ body.page-dashboard .content {
|
|||||||
position: relative;
|
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 {
|
.sleep-phase-bar__segment::after {
|
||||||
content: attr(data-tooltip);
|
content: attr(data-tooltip);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -1962,6 +1972,39 @@ body.page-dashboard .content {
|
|||||||
color: rgba(18, 48, 75, 0.9);
|
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,
|
.range-moment-list__item span span,
|
||||||
.timeline-card__value,
|
.timeline-card__value,
|
||||||
.timeline-card--empty p {
|
.timeline-card--empty p {
|
||||||
|
|||||||
+20
-3
@@ -1450,22 +1450,29 @@
|
|||||||
let pointerStartX = 0;
|
let pointerStartX = 0;
|
||||||
let pointerStartY = 0;
|
let pointerStartY = 0;
|
||||||
let dragging = false;
|
let dragging = false;
|
||||||
let ignoreSwipe = false;
|
let didSwipe = false;
|
||||||
|
|
||||||
const handleSwipe = (deltaX, deltaY) => {
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (deltaX < 0 && swipeContainer.dataset.nextDate) {
|
if (deltaX < 0 && swipeContainer.dataset.nextDate) {
|
||||||
|
didSwipe = true;
|
||||||
window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
|
window.location.href = dashboardDayPath(swipeContainer.dataset.nextDate);
|
||||||
} else if (deltaX > 0 && swipeContainer.dataset.prevDate) {
|
} else if (deltaX > 0 && swipeContainer.dataset.prevDate) {
|
||||||
|
didSwipe = true;
|
||||||
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
|
window.location.href = dashboardDayPath(swipeContainer.dataset.prevDate);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
swipeContainer.addEventListener("pointerdown", event => {
|
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;
|
dragging = true;
|
||||||
pointerStartX = event.clientX;
|
pointerStartX = event.clientX;
|
||||||
pointerStartY = event.clientY;
|
pointerStartY = event.clientY;
|
||||||
@@ -1484,6 +1491,16 @@
|
|||||||
dragging = false;
|
dragging = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
swipeContainer.addEventListener("click", event => {
|
||||||
|
if (!didSwipe) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
didSwipe = false;
|
||||||
|
}, true);
|
||||||
|
|
||||||
window.addEventListener("keydown", event => {
|
window.addEventListener("keydown", event => {
|
||||||
if (document.body.classList.contains("is-dashboard-overlay-open")) {
|
if (document.body.classList.contains("is-dashboard-overlay-open")) {
|
||||||
return;
|
return;
|
||||||
|
|||||||
@@ -121,23 +121,6 @@ $jsVersion = is_file(base_path('assets/js/app.js')) ? (string) filemtime(base_pa
|
|||||||
</footer>
|
</footer>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</main>
|
</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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
|
|||||||
|
|
||||||
<header class="dashboard-topbar">
|
<header class="dashboard-topbar">
|
||||||
<nav class="dashboard-switcher glass-panel" aria-label="Ansicht wechseln">
|
<nav class="dashboard-switcher glass-panel" aria-label="Ansicht wechseln">
|
||||||
<a class="<?= $dashboardView === 'day' ? 'active' : '' ?>" href="/?view=day&date=<?= e(rawurlencode($dashboardDate)) ?>">Tag</a>
|
<a class="<?= $dashboardView === 'day' && $dashboardDate === today() ? 'active' : '' ?>" href="/?view=day&date=<?= e(rawurlencode(today())) ?>">Heute</a>
|
||||||
<a class="<?= $dashboardView === 'week' ? 'active' : '' ?>" href="/?view=week&date=<?= e(rawurlencode(today())) ?>">Woche</a>
|
<a class="<?= $dashboardView === 'week' ? 'active' : '' ?>" href="/?view=week&date=<?= e(rawurlencode(today())) ?>">Woche</a>
|
||||||
<a class="<?= $dashboardView === 'month' ? 'active' : '' ?>" href="/?view=month&date=<?= e(rawurlencode(today())) ?>">Monat</a>
|
<a class="<?= $dashboardView === 'month' ? 'active' : '' ?>" href="/?view=month&date=<?= e(rawurlencode(today())) ?>">Monat</a>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -214,7 +214,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
|
|||||||
<?php $phaseHours = max(0.0, (float) ($sleepPhases[$phase] ?? 0)); ?>
|
<?php $phaseHours = max(0.0, (float) ($sleepPhases[$phase] ?? 0)); ?>
|
||||||
<?php if ($phaseHours <= 0) { continue; } ?>
|
<?php if ($phaseHours <= 0) { continue; } ?>
|
||||||
<?php $phasePercent = $sleepBarTotal > 0 ? max(0.5, min(100, ($phaseHours / $sleepBarTotal) * 100)) : 0; ?>
|
<?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
|
<strong><?= e($label) ?></strong> <?= e(format_points($phaseHours)) ?> h
|
||||||
</span>
|
</span>
|
||||||
<?php endforeach; ?>
|
<?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 foreach (['mood' => 'Stimmung', 'energy' => 'Energie', 'stress' => 'Stress'] as $metric => $label): ?>
|
||||||
<?php $value = normalize_signal_value($item[$metric] ?? 0); ?>
|
<?php $value = normalize_signal_value($item[$metric] ?? 0); ?>
|
||||||
<?php $valueTone = signal_value_class($metric === 'stress' ? -$value : $value); ?>
|
<?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) ?>">
|
<span class="signal-pill signal-pill--<?= e(signal_badge_tone($value, $metric)) ?> signal-pill--<?= e($valueTone) ?>">
|
||||||
<strong><?= e($label) ?></strong>
|
<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) ?>">
|
<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; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</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 !== []): ?>
|
<?php if ($weekDetailDays !== []): ?>
|
||||||
<div class="range-day-list">
|
<div class="range-day-list">
|
||||||
<?php foreach ($weekDetailDays as $day): ?>
|
<?php foreach ($weekDetailDays as $day): ?>
|
||||||
@@ -632,6 +633,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
|
|||||||
|
|
||||||
return !empty($day['has_content']) || $summaryText !== '';
|
return !empty($day['has_content']) || $summaryText !== '';
|
||||||
})); ?>
|
})); ?>
|
||||||
|
<?php $monthDetailDays = array_reverse($monthDetailDays); ?>
|
||||||
<?php if ($monthDetailDays !== []): ?>
|
<?php if ($monthDetailDays !== []): ?>
|
||||||
<div class="range-day-list range-day-list--month">
|
<div class="range-day-list range-day-list--month">
|
||||||
<?php foreach ($monthDetailDays as $day): ?>
|
<?php foreach ($monthDetailDays as $day): ?>
|
||||||
|
|||||||
Reference in New Issue
Block a user