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

Improve day swipe and sleep handling

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 13:00:10 +02:00
parent 2047cae61c
commit a087eb508b
5 changed files with 206 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+59 -2
View File
@@ -462,6 +462,51 @@ body.page-dashboard .content {
padding-top: 6rem;
}
.dashboard-day-slider {
--day-prev-hint: 0;
--day-next-hint: 0;
position: relative;
overflow: hidden;
border-radius: 1.8rem;
margin-bottom: 2rem;
}
.day-slide-hint {
position: absolute;
top: 50%;
z-index: 0;
display: inline-flex;
align-items: center;
min-height: 3rem;
max-width: min(12rem, 42vw);
padding: 0.8rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
font-size: 0.86rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scale(0.94);
transition: opacity 120ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.day-slide-hint--prev {
left: 0.75rem;
opacity: var(--day-prev-hint);
transform: translateY(-50%) translateX(calc((1 - var(--day-prev-hint)) * -0.7rem)) scale(calc(0.94 + (var(--day-prev-hint) * 0.06)));
}
.day-slide-hint--next {
right: 0.75rem;
opacity: var(--day-next-hint);
text-align: right;
transform: translateY(-50%) translateX(calc((1 - var(--day-next-hint)) * 0.7rem)) scale(calc(0.94 + (var(--day-next-hint) * 0.06)));
}
.dashboard-compare-strip {
position: relative;
width: min(100%, 20rem);
@@ -475,8 +520,11 @@ body.page-dashboard .content {
}
.dashboard-day__hero[data-day-slider] {
transform: translateX(var(--day-slider-offset, 0));
transition: transform 180ms ease;
position: relative;
z-index: 1;
margin-bottom: 0;
transform: translate3d(var(--day-slider-offset, 0), 0, 0) scale(var(--day-slider-scale, 1));
transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
@@ -1028,6 +1076,15 @@ body.page-dashboard .content {
background: linear-gradient(135deg, rgba(54, 147, 173, 0.92), rgba(38, 106, 135, 0.92));
}
.sleep-phase-bar__segment--total {
border-radius: 999px 0 0 999px;
background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9));
}
.sleep-phase-bar__segment--total.is-after-phase {
border-radius: 0;
}
.sleep-phase-bar__segment--rest {
min-width: 0;
padding: 0;