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

Use SVG sleep bar and trash icon

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 19:17:30 +02:00
parent fda92eb47b
commit 64f444808b
3 changed files with 27 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+14 -49
View File
@@ -1009,34 +1009,27 @@ body.page-dashboard .content {
background: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.16);
} }
.sleep-phase-bar__progress { .sleep-phase-bar__svg {
position: absolute; position: absolute;
inset: 0; inset: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
border: 0;
border-radius: inherit;
appearance: none;
-webkit-appearance: none;
background: transparent;
} }
.sleep-phase-bar__progress::-webkit-progress-bar { .sleep-phase-bar__track {
border-radius: inherit; fill: rgba(255, 255, 255, 0.16);
background: transparent;
} }
.sleep-phase-bar__progress::-webkit-progress-value { .sleep-phase-bar__fill {
border-radius: inherit; fill: #64d2ff;
background: linear-gradient(90deg, #64d2ff, #0a84ff); filter: drop-shadow(0 0 5px rgba(10, 132, 255, 0.48));
box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
} }
.sleep-phase-bar__progress::-moz-progress-bar { .sleep-phase-bar__target-line {
border-radius: inherit; stroke: rgba(255, 255, 255, 0.95);
background: linear-gradient(90deg, #64d2ff, #0a84ff); stroke-width: 1.25;
box-shadow: 0 0 18px rgba(10, 132, 255, 0.38); vector-effect: non-scaling-stroke;
} }
.sleep-phase-bar__target { .sleep-phase-bar__target {
@@ -4973,38 +4966,10 @@ input[type="range"] {
box-shadow: 0 10px 26px rgba(255, 59, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28); box-shadow: 0 10px 26px rgba(255, 59, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
} }
.timeline-card__delete .trash-button span { .timeline-card__delete .trash-button img {
position: relative; width: 1.2rem;
display: block; height: 1.2rem;
width: 0.98rem; filter: brightness(0) invert(1);
height: 1.08rem;
margin-top: 0.1rem;
border: 2px solid currentColor;
border-top: 0;
border-radius: 0 0 0.18rem 0.18rem;
}
.timeline-card__delete .trash-button span::before {
content: "";
position: absolute;
left: -0.18rem;
right: -0.18rem;
top: -0.34rem;
height: 0.16rem;
border-radius: 999px;
background: currentColor;
}
.timeline-card__delete .trash-button span::after {
content: "";
position: absolute;
left: 50%;
top: -0.55rem;
width: 0.46rem;
height: 0.16rem;
border-radius: 999px;
background: currentColor;
transform: translateX(-50%);
} }
.timeline-card--with-image .timeline-card__time-chip { .timeline-card--with-image .timeline-card__time-chip {
assets/icons/trash.svg
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 7h16"/>
<path d="M9 7V5.8A1.8 1.8 0 0 1 10.8 4h2.4A1.8 1.8 0 0 1 15 5.8V7"/>
<path d="M7 7l.8 12.2A2 2 0 0 0 9.8 21h4.4a2 2 0 0 0 2-1.8L17 7"/>
<path d="M10 11v6"/>
<path d="M14 11v6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 374 B

templates/pages/dashboard.php
+6 -2
View File
@@ -222,7 +222,11 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?> <?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
<div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-left: <?= e((string) $sleepActualPercent) ?>%"> <div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-left: <?= e((string) $sleepActualPercent) ?>%">
<progress class="sleep-phase-bar__progress" value="<?= e((string) $sleepActualTotal) ?>" max="<?= e((string) $sleepBarTotal) ?>"><?= e(format_duration_hours($sleepActualTotal)) ?></progress> <svg class="sleep-phase-bar__svg" viewBox="0 0 100 10" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<rect class="sleep-phase-bar__track" x="0" y="2" width="100" height="6" rx="3"></rect>
<rect class="sleep-phase-bar__fill" x="0" y="2" width="<?= e((string) $sleepActualPercent) ?>" height="6" rx="3"></rect>
<line class="sleep-phase-bar__target-line" x1="<?= e((string) $sleepOptimalPercent) ?>" y1="0" x2="<?= e((string) $sleepOptimalPercent) ?>" y2="10"></line>
</svg>
<span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span> <span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span>
</div> </div>
<div class="sleep-phase-summary"><span><?= e(format_duration_hours($sleepActualTotal)) ?></span><span>Ziel <?= e(format_duration_hours($optimalSleepHours)) ?></span></div> <div class="sleep-phase-summary"><span><?= e(format_duration_hours($sleepActualTotal)) ?></span><span>Ziel <?= e(format_duration_hours($optimalSleepHours)) ?></span></div>
@@ -276,7 +280,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
<input type="hidden" name="form_name" value="delete_event"> <input type="hidden" name="form_name" value="delete_event">
<input type="hidden" name="date" value="<?= e((string) $dayEntry['date']) ?>"> <input type="hidden" name="date" value="<?= e((string) $dayEntry['date']) ?>">
<input type="hidden" name="event_id" value="<?= e((string) $item['id']) ?>"> <input type="hidden" name="event_id" value="<?= e((string) $item['id']) ?>">
<button class="ghost-button ghost-button--small trash-button" type="submit" data-confirm-delete aria-label="Moment löschen"><span aria-hidden="true"></span></button> <button class="ghost-button ghost-button--small trash-button" type="submit" data-confirm-delete aria-label="Moment löschen"><img src="<?= e(icon_path('trash')) ?>" alt="" aria-hidden="true"></button>
</form> </form>
</article> </article>
<?php endforeach; ?> <?php endforeach; ?>