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

Render sleep bar fill directly

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 17:46:20 +02:00
parent 3a467aca38
commit 9f1bb2c351
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+14 -2
View File
@@ -1004,6 +1004,16 @@ body.page-dashboard .content {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
} }
.sleep-phase-bar::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--sleep-actual-width, 0);
min-width: 0.2rem;
border-radius: inherit;
background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9));
}
.sleep-phase-bar__fill { .sleep-phase-bar__fill {
position: absolute; position: absolute;
inset: 0 auto 0 0; inset: 0 auto 0 0;
@@ -1012,8 +1022,9 @@ body.page-dashboard .content {
min-width: 0.18rem; min-width: 0.18rem;
overflow: hidden; overflow: hidden;
border-radius: inherit; border-radius: inherit;
background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9)); background: transparent;
box-shadow: 0 12px 28px rgba(6, 16, 28, 0.2); box-shadow: 0 12px 28px rgba(6, 16, 28, 0.2);
z-index: 1;
} }
.sleep-phase-bar__target { .sleep-phase-bar__target {
@@ -1025,7 +1036,7 @@ body.page-dashboard .content {
border-left: 2px solid rgba(255, 255, 255, 0.92); border-left: 2px solid rgba(255, 255, 255, 0.92);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
pointer-events: none; pointer-events: none;
z-index: 2; z-index: 3;
} }
.sleep-phase-bar__target span { .sleep-phase-bar__target span {
@@ -1137,6 +1148,7 @@ body.page-dashboard .content {
font-size: 0.68rem; font-size: 0.68rem;
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; pointer-events: none;
z-index: 2;
} }
.media-lightbox[hidden] { .media-lightbox[hidden] {
templates/pages/dashboard.php
+2 -1
View File
@@ -112,6 +112,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php foreach ($dashboardTimeline as $item): ?> <?php foreach ($dashboardTimeline as $item): ?>
<?php $eventType = (string) ($item['type'] ?? 'event'); ?> <?php $eventType = (string) ($item['type'] ?? 'event'); ?>
<?php $eventComment = trim((string) ($item['comment'] ?? '')); ?> <?php $eventComment = trim((string) ($item['comment'] ?? '')); ?>
<?php if (preg_match('/^\s*-\s*(?:Stimmung|Energie|Stress)\s*:\s*[+-]?\d+\s*$/u', $eventComment) === 1) { $eventComment = ''; } ?>
<?php $isImportedHealth = (string) ($item['source'] ?? '') === 'health_auto_export'; ?> <?php $isImportedHealth = (string) ($item['source'] ?? '') === 'health_auto_export'; ?>
<?php $sportType = $eventType === 'sport' ? find_sport_type($settings, (string) ($item['sport_type_id'] ?? '')) : null; ?> <?php $sportType = $eventType === 'sport' ? find_sport_type($settings, (string) ($item['sport_type_id'] ?? '')) : null; ?>
<?php $isImportedWalkSport = $isImportedHealth && $eventType === 'sport' && str_contains(strtolower((string) ($sportType['label'] ?? $eventComment)), 'spaziergang'); ?> <?php $isImportedWalkSport = $isImportedHealth && $eventType === 'sport' && str_contains(strtolower((string) ($sportType['label'] ?? $eventComment)), 'spaziergang'); ?>
@@ -220,7 +221,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php endif; ?> <?php endif; ?>
<?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?> <?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
<div class="sleep-phase-bar" aria-label="Schlafphasen" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-width: <?= e((string) $sleepActualPercent) ?>%"> <div class="sleep-phase-bar" aria-label="Schlafphasen" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-width: <?= e((string) $sleepActualPercent) ?>%; background: linear-gradient(90deg, rgba(90, 188, 242, 0.88) 0%, rgba(44, 126, 190, 0.88) <?= e((string) $sleepActualPercent) ?>%, rgba(255, 255, 255, 0.08) <?= e((string) $sleepActualPercent) ?>%, rgba(255, 255, 255, 0.08) 100%)">
<div class="sleep-phase-bar__fill" style="width: <?= e((string) $sleepActualPercent) ?>%"> <div class="sleep-phase-bar__fill" style="width: <?= e((string) $sleepActualPercent) ?>%">
<?php if ($sleepPhaseTotal > 0): ?> <?php if ($sleepPhaseTotal > 0): ?>
<?php foreach (['deep' => ['Tief', 'deep'], 'rem' => ['REM', 'rem'], 'core' => ['Kern', 'core']] as $phase => [$label, $class]): ?> <?php foreach (['deep' => ['Tief', 'deep'], 'rem' => ['REM', 'rem'], 'core' => ['Kern', 'core']] as $phase => [$label, $class]): ?>