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);
}
.sleep-phase-bar__progress {
.sleep-phase-bar__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
border: 0;
border-radius: inherit;
appearance: none;
-webkit-appearance: none;
background: transparent;
}
.sleep-phase-bar__progress::-webkit-progress-bar {
border-radius: inherit;
background: transparent;
.sleep-phase-bar__track {
fill: rgba(255, 255, 255, 0.16);
}
.sleep-phase-bar__progress::-webkit-progress-value {
border-radius: inherit;
background: linear-gradient(90deg, #64d2ff, #0a84ff);
box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
.sleep-phase-bar__fill {
fill: #64d2ff;
filter: drop-shadow(0 0 5px rgba(10, 132, 255, 0.48));
}
.sleep-phase-bar__progress::-moz-progress-bar {
border-radius: inherit;
background: linear-gradient(90deg, #64d2ff, #0a84ff);
box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
.sleep-phase-bar__target-line {
stroke: rgba(255, 255, 255, 0.95);
stroke-width: 1.25;
vector-effect: non-scaling-stroke;
}
.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);
}
.timeline-card__delete .trash-button span {
position: relative;
display: block;
width: 0.98rem;
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__delete .trash-button img {
width: 1.2rem;
height: 1.2rem;
filter: brightness(0) invert(1);
}
.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): ?>
<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>
</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="date" value="<?= e((string) $dayEntry['date']) ?>">
<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>
</article>
<?php endforeach; ?>