Add iOS mobile polish

Render sleep bar fill directly
2026-05-21 18:30:11 +02:00 · 2026-05-21 17:46:20 +02:00
3 changed files with 203 additions and 30 deletions
@@ -18,7 +18,7 @@
    --radius-md: 18px;
    --radius-sm: 14px;
    --panel-blur: 28px;
-    --font-ui: "SF Pro Display", "Avenir Next", "Segoe UI Variable", "Helvetica Neue", system-ui, sans-serif;
+    --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    --track-accent: rgba(139, 228, 255, 0.34);
    --track-surface: rgba(255, 255, 255, 0.08);
    --track-glow: rgba(139, 228, 255, 0.18);
@@ -1004,16 +1004,26 @@ 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;
-    display: flex;
    width: var(--sleep-actual-width, 0);
    min-width: 0.18rem;
    overflow: hidden;
    border-radius: inherit;
-    background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9));
-    box-shadow: 0 12px 28px rgba(6, 16, 28, 0.2);
+    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 {
@@ -1025,7 +1035,7 @@ body.page-dashboard .content {
    border-left: 2px solid rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    pointer-events: none;
-    z-index: 2;
+    z-index: 3;
 }

 .sleep-phase-bar__target span {
@@ -1137,8 +1147,31 @@ body.page-dashboard .content {
    font-size: 0.68rem;
    transform: translateY(-50%);
    pointer-events: none;
+    z-index: 2;
 }

+.sleep-phase-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+    margin-top: 0.7rem;
+}
+
+.sleep-phase-legend__item {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    padding: 0.32rem 0.62rem;
+    border-radius: 999px;
+    color: rgba(255, 255, 255, 0.92);
+    font-size: 0.78rem;
+    gap: 0.25rem;
+}
+
+.sleep-phase-legend__item--deep { background: rgba(44, 82, 180, 0.48); }
+.sleep-phase-legend__item--rem { background: rgba(120, 83, 210, 0.48); }
+.sleep-phase-legend__item--core { background: rgba(54, 147, 173, 0.48); }
+
 .media-lightbox[hidden] {
    display: none;
 }
@@ -4685,6 +4718,128 @@ input[type="range"] {
    }
 }

+.ios-tabbar {
+    display: none;
+}
+
+@media (max-width: 760px) {
+    body {
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .ios-tabbar {
+        position: fixed;
+        left: 0.75rem;
+        right: 0.75rem;
+        bottom: max(0.65rem, env(safe-area-inset-bottom));
+        z-index: 120;
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 0.25rem;
+        min-height: 4.8rem;
+        padding: 0.48rem;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 1.9rem;
+        background: rgba(20, 31, 46, 0.72);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
+        backdrop-filter: blur(24px) saturate(1.35);
+        -webkit-backdrop-filter: blur(24px) saturate(1.35);
+    }
+
+    .ios-tabbar a {
+        display: grid;
+        place-items: center;
+        align-content: center;
+        gap: 0.24rem;
+        min-height: 3.55rem;
+        border-radius: 1.35rem;
+        color: rgba(239, 247, 255, 0.68);
+        font-size: 0.72rem;
+        font-weight: 650;
+        text-decoration: none;
+        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+    }
+
+    .ios-tabbar a.active {
+        background: rgba(255, 255, 255, 0.14);
+        color: #fff;
+        transform: translateY(-1px);
+    }
+
+    .ios-tabbar__icon {
+        width: 1.35rem;
+        height: 1.35rem;
+        border-radius: 0.45rem;
+        border: 2px solid currentColor;
+        opacity: 0.9;
+    }
+
+    .ios-tabbar a:nth-child(1) .ios-tabbar__icon { border-radius: 50%; }
+    .ios-tabbar a:nth-child(2) .ios-tabbar__icon { border-radius: 0.35rem; box-shadow: inset 0 -0.35rem 0 currentColor; }
+    .ios-tabbar a:nth-child(3) .ios-tabbar__icon { border-radius: 0.3rem; box-shadow: inset 0 0 0 0.22rem rgba(255, 255, 255, 0.18); }
+    .ios-tabbar a:nth-child(4) .ios-tabbar__icon { border-radius: 50%; box-shadow: inset 0 0 0 0.28rem currentColor; }
+
+    body.is-authenticated .content,
+    body.page-dashboard.is-authenticated .content,
+    body.page-options.is-authenticated .content {
+        padding-bottom: calc(6.2rem + env(safe-area-inset-bottom));
+    }
+
+    .dashboard-day,
+    .dashboard-range-view {
+        width: min(100%, 430px);
+        padding-top: calc(4.6rem + env(safe-area-inset-top));
+    }
+
+    .dashboard-day__hero,
+    .dashboard-range-view__hero,
+    .day-summary-card,
+    .timeline-card,
+    .range-card,
+    .range-day-card,
+    .dashboard-composer {
+        border-radius: 1.65rem;
+        box-shadow: 0 14px 40px rgba(4, 18, 31, 0.18);
+    }
+
+    .timeline-card,
+    .range-day-card {
+        padding: 1.05rem;
+    }
+
+    button,
+    input,
+    select,
+    textarea,
+    .ghost-button,
+    .dashboard-switcher a,
+    .range-moment-list__item,
+    .signal-pill {
+        min-height: 44px;
+    }
+}
+
+@media (max-width: 760px) and (prefers-color-scheme: light) {
+    .ios-tabbar {
+        border-color: rgba(120, 146, 172, 0.22);
+        background: rgba(248, 251, 255, 0.78);
+        box-shadow: 0 20px 56px rgba(78, 105, 130, 0.18);
+    }
+
+    .ios-tabbar a {
+        color: rgba(18, 48, 75, 0.58);
+    }
+
+    .ios-tabbar a.active {
+        background: rgba(20, 148, 222, 0.12);
+        color: #12304b;
+    }
+
+    .sleep-phase-legend__item {
+        color: rgba(18, 48, 75, 0.9);
+    }
+}
+
@media (max-width: 640px) {
    .shell {
        padding: 0.8rem;
@@ -125,6 +125,26 @@ $jsVersion = is_file(base_path('assets/js/app.js')) ? (string) filemtime(base_pa
                </footer>
            <?php endif; ?>
        </main>
+        <?php if ($authUser !== null): ?>
+            <nav class="ios-tabbar" aria-label="Mobile Navigation">
+                <a class="<?= $page === 'dashboard' && ($dashboardView ?? 'day') === 'day' ? 'active' : '' ?>" href="/?view=day&amp;date=<?= e(rawurlencode(today())) ?>">
+                    <span class="ios-tabbar__icon" aria-hidden="true"></span>
+                    <span>Heute</span>
+                </a>
+                <a class="<?= $page === 'dashboard' && ($dashboardView ?? '') === 'week' ? 'active' : '' ?>" href="/?view=week&amp;date=<?= e(rawurlencode(today())) ?>">
+                    <span class="ios-tabbar__icon" aria-hidden="true"></span>
+                    <span>Woche</span>
+                </a>
+                <a class="<?= $page === 'dashboard' && ($dashboardView ?? '') === 'month' ? 'active' : '' ?>" href="/?view=month&amp;date=<?= e(rawurlencode(today())) ?>">
+                    <span class="ios-tabbar__icon" aria-hidden="true"></span>
+                    <span>Monat</span>
+                </a>
+                <a class="<?= $page === 'options' ? 'active' : '' ?>" href="/options">
+                    <span class="ios-tabbar__icon" aria-hidden="true"></span>
+                    <span>Optionen</span>
+                </a>
+            </nav>
+        <?php endif; ?>
    </div>
 </body>
 </html>
@@ -112,6 +112,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                    <?php foreach ($dashboardTimeline as $item): ?>
                        <?php $eventType = (string) ($item['type'] ?? 'event'); ?>
                        <?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 $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'); ?>
@@ -220,31 +221,22 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                                <?php endif; ?>

                                <?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__fill" style="width: <?= e((string) $sleepActualPercent) ?>%">
-                                            <?php if ($sleepPhaseTotal > 0): ?>
-                                                <?php foreach (['deep' => ['Tief', 'deep'], 'rem' => ['REM', 'rem'], 'core' => ['Kern', 'core']] as $phase => [$label, $class]): ?>
-                                                    <?php $phaseHours = max(0.0, (float) ($sleepPhases[$phase] ?? 0)); ?>
-                                                    <?php if ($phaseHours <= 0) { continue; } ?>
-                                                    <?php $phasePercent = $sleepActualTotal > 0 ? max(0.5, min(100, ($phaseHours / $sleepActualTotal) * 100)) : 0; ?>
-                                                    <span class="sleep-phase-bar__segment sleep-phase-bar__segment--<?= e($class) ?><?= $phasePercent < 13 ? ' is-compact' : '' ?>" style="width: <?= e((string) $phasePercent) ?>%; flex-basis: <?= e((string) $phasePercent) ?>%" title="<?= e($label) ?>: <?= e(format_duration_hours($phaseHours)) ?>" data-tooltip="<?= e($label) ?>: <?= e(format_duration_hours($phaseHours)) ?>">
-                                                        <strong><?= e($label) ?></strong> <?= e(format_duration_hours($phaseHours)) ?>
-                                                    </span>
-                                                    <?php $sleepPhaseLeft += $phaseHours; ?>
-                                                <?php endforeach; ?>
-                                            <?php endif; ?>
-                                            <?php if ($sleepUnclassified > 0): ?>
-                                                <?php $unclassifiedPercent = $sleepActualTotal > 0 ? max(0.5, min(100, ($sleepUnclassified / $sleepActualTotal) * 100)) : 0; ?>
-                                                <span class="sleep-phase-bar__segment sleep-phase-bar__segment--total<?= $sleepPhaseTotal > 0 ? ' is-after-phase' : '' ?><?= $unclassifiedPercent < 13 ? ' is-compact' : '' ?>" style="width: <?= e((string) $unclassifiedPercent) ?>%; flex-basis: <?= e((string) $unclassifiedPercent) ?>%" title="Schlaf: <?= e(format_duration_hours($sleepUnclassified)) ?>" data-tooltip="Schlaf: <?= e(format_duration_hours($sleepUnclassified)) ?>">
-                                                    <strong>Schlaf</strong> <?= e(format_duration_hours($sleepUnclassified)) ?>
-                                                </span>
-                                            <?php endif; ?>
-                                        </div>
+                                    <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>
                                        <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>
                                        <?php endif; ?>
                                    </div>
+                                    <?php if ($sleepPhaseTotal > 0): ?>
+                                        <div class="sleep-phase-legend" aria-label="Schlafphasen">
+                                            <?php foreach (['deep' => ['Tief', 'deep'], 'rem' => ['REM', 'rem'], 'core' => ['Kern', 'core']] as $phase => [$label, $class]): ?>
+                                                <?php $phaseHours = max(0.0, (float) ($sleepPhases[$phase] ?? 0)); ?>
+                                                <?php if ($phaseHours <= 0) { continue; } ?>
+                                                <span class="sleep-phase-legend__item sleep-phase-legend__item--<?= e($class) ?>"><strong><?= e($label) ?></strong> <?= e(format_duration_hours($phaseHours)) ?></span>
+                                            <?php endforeach; ?>
+                                        </div>
+                                    <?php endif; ?>
                                <?php endif; ?>

                                <?php if ($eventStats !== []): ?>
@@ -588,24 +580,30 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                                            $sportType = $eventType === 'sport' ? find_sport_type($settings, (string) ($event['sport_type_id'] ?? '')) : null;
                                            $eventValue = (float) ($event['value'] ?? 0);
                                            $eventValueText = $eventValue > 0 ? ($eventType === 'sleep' ? format_duration_hours($eventValue) : rtrim(rtrim(number_format($eventValue, 2, ',', '.'), '0'), ',') . ' ' . (string) ($event['unit'] ?? '')) : '';
-                                            $eventTitle = trim((string) ($event['comment'] ?? '')) !== '' ? trim((string) $event['comment']) : day_event_type_label($eventType);
-                                            $eventDetail = $eventValueText;
+                                            $eventComment = trim((string) ($event['comment'] ?? ''));
+                                            if (preg_match('/^\s*-\s*(?:Stimmung|Energie|Stress)\s*:\s*[+-]?\d+\s*$/u', $eventComment) === 1) {
+                                                $eventComment = '';
+                                            }
+                                            $eventTitle = day_event_type_label($eventType);
+                                            $eventDetails = array_values(array_filter([$eventValueText, $eventComment], static fn (string $value): bool => trim($value) !== ''));

                                            if ($eventType === 'sport') {
                                                $eventTitle = (string) ($sportType['label'] ?? 'Sport');
                                            }

-                                            if ($eventType === 'sleep' && trim((string) ($event['comment'] ?? '')) === '') {
+                                            if ($eventType === 'sleep') {
                                                $eventTitle = 'Schlaf';
+                                            } elseif ($eventType === 'walk') {
+                                                $eventTitle = 'Spaziergang';
                                            }
                                        ?>
                                        <li class="range-moment-list__item range-moment-list__item--<?= e($eventTone) ?>">
                                            <span class="range-moment-list__bullet" aria-hidden="true"></span>
                                            <span>
                                                <strong><?= e($eventTitle) ?></strong>
-                                                <?php if ($eventDetail !== ''): ?>
+                                                <?php foreach ($eventDetails as $eventDetail): ?>
                                                    <span><?= e($eventDetail) ?></span>
-                                                <?php endif; ?>
+                                                <?php endforeach; ?>
                                            </span>
                                        </li>
                                    <?php endforeach; ?>
Author	SHA1	Message	Date
hnzio	2932cbb5b2	Add iOS mobile polish	2026-05-21 18:30:11 +02:00
hnzio	9f1bb2c351	Render sleep bar fill directly	2026-05-21 17:46:20 +02:00