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

Refine tabbar delete and sleep visuals

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 19:06:15 +02:00
parent fef6c2407d
commit d4d2313b01
2 changed files with 63 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+60 -20
View File
@@ -1010,8 +1010,11 @@ body.page-dashboard .content {
} }
.sleep-phase-bar__fill { .sleep-phase-bar__fill {
position: absolute;
inset: 0 auto 0 0;
display: block; display: block;
height: 100%; height: 100%;
width: var(--sleep-actual-left, 0);
min-width: 0.28rem; min-width: 0.28rem;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
@@ -4740,23 +4743,22 @@ input[type="range"] {
.ios-tabbar { .ios-tabbar {
position: fixed; position: fixed;
left: 0; left: 0.9rem;
right: 0; right: 0.9rem;
bottom: 0; bottom: max(0.8rem, env(safe-area-inset-bottom));
z-index: 120; z-index: 120;
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0; gap: 0.26rem;
min-height: calc(5.05rem + env(safe-area-inset-bottom)); min-height: 4.45rem;
padding: 0.42rem 0.75rem calc(0.42rem + env(safe-area-inset-bottom)); padding: 0.48rem;
border: 0; border: 1px solid rgba(255, 255, 255, 0.32);
border-top: 1px solid rgba(255, 255, 255, 0.24); border-radius: 2.05rem;
border-radius: 1.8rem 1.8rem 0 0;
background: background:
radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.34), transparent 38%), radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.3), transparent 46%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)), linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
rgba(13, 22, 35, 0.5); rgba(35, 45, 60, 0.68);
box-shadow: 0 -18px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.26); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
backdrop-filter: blur(38px) saturate(1.8) contrast(1.06); backdrop-filter: blur(38px) saturate(1.8) contrast(1.06);
-webkit-backdrop-filter: blur(38px) saturate(1.8) contrast(1.06); -webkit-backdrop-filter: blur(38px) saturate(1.8) contrast(1.06);
} }
@@ -4766,8 +4768,8 @@ input[type="range"] {
place-items: center; place-items: center;
align-content: center; align-content: center;
gap: 0.18rem; gap: 0.18rem;
min-height: 3.7rem; min-height: 3.42rem;
border-radius: 1.25rem; border-radius: 1.55rem;
color: rgba(239, 247, 255, 0.68); color: rgba(239, 247, 255, 0.68);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 590; font-weight: 590;
@@ -4776,10 +4778,12 @@ input[type="range"] {
} }
.ios-tabbar a.active { .ios-tabbar a.active {
background: transparent; background:
color: #64d2ff; radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.4), transparent 52%),
linear-gradient(180deg, rgba(100, 210, 255, 0.72), rgba(10, 132, 255, 0.58));
color: #fff;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: none; box-shadow: 0 10px 30px rgba(10, 132, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.38);
} }
.ios-tabbar__icon { .ios-tabbar__icon {
@@ -4951,6 +4955,40 @@ input[type="range"] {
font-weight: 560; font-weight: 560;
} }
.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--with-image .timeline-card__time-chip { .timeline-card--with-image .timeline-card__time-chip {
top: 1.18rem; top: 1.18rem;
right: 4.7rem; right: 4.7rem;
@@ -4999,8 +5037,10 @@ input[type="range"] {
} }
.ios-tabbar a.active { .ios-tabbar a.active {
background: transparent; background:
color: #007aff; radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.78), transparent 52%),
linear-gradient(180deg, rgba(100, 210, 255, 0.68), rgba(0, 122, 255, 0.46));
color: #fff;
} }
.ios-tabbar__icon { .ios-tabbar__icon {
templates/pages/dashboard.php
+3 -3
View File
@@ -221,8 +221,8 @@ $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="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%"> <div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-left: <?= e((string) $sleepActualPercent) ?>%">
<span class="sleep-phase-bar__fill" style="width: <?= e((string) $sleepActualPercent) ?>%" aria-hidden="true"></span> <span class="sleep-phase-bar__fill" aria-hidden="true"></span>
<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 +276,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" type="submit" data-confirm-delete aria-label="Moment löschen">×</button> <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>
</form> </form>
</article> </article>
<?php endforeach; ?> <?php endforeach; ?>