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

Make sleep fill a normal block

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 18:36:06 +02:00
parent 2932cbb5b2
commit 4eed74b8bb
2 changed files with 6 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+4 -15
View File
@@ -1004,26 +1004,15 @@ body.page-dashboard .content {
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 {
position: absolute;
inset: 0 auto 0 0;
width: var(--sleep-actual-width, 0);
min-width: 0.18rem;
display: block;
height: 100%;
min-width: 0.28rem;
max-width: 100%;
overflow: hidden;
border-radius: inherit;
background: linear-gradient(135deg, rgba(90, 188, 242, 0.92), rgba(44, 126, 190, 0.92));
box-shadow: 0 10px 22px rgba(44, 126, 190, 0.22);
z-index: 1;
}
.sleep-phase-bar__target {
templates/pages/dashboard.php
+2 -2
View File
@@ -221,8 +221,8 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php endif; ?>
<?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
<div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-width: <?= e((string) $sleepActualPercent) ?>%">
<span class="sleep-phase-bar__fill" aria-hidden="true"></span>
<div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%">
<span class="sleep-phase-bar__fill" style="width: <?= e((string) $sleepActualPercent) ?>%" aria-hidden="true"></span>
<span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span>
<?php if ($sleepPhaseRemainder > 0): ?>
<span class="sleep-phase-bar__rest-label">noch <?= e(format_duration_hours($sleepPhaseRemainder)) ?> bis Skalenende</span>