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

feat(dashboard): refine moment media experience

Browse Source
This commit is contained in:
Florian Heinz
2026-05-18 23:49:15 +02:00
parent b8a96e96ef
commit bc6e850afb
12 changed files with 624 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+387 -23
View File
@@ -189,6 +189,7 @@ html {
min-height: 100%;
min-height: -webkit-fill-available;
color-scheme: dark;
overflow-x: hidden;
}
body {
@@ -201,6 +202,7 @@ body {
var(--body-radial-two),
var(--body-gradient);
color: var(--text);
overflow-x: hidden;
}
body.page-dashboard {
@@ -211,6 +213,15 @@ body.page-dashboard {
var(--body-gradient);
}
body.page-dashboard,
body.page-dashboard .shell--dashboard,
body.page-dashboard .content,
body.page-dashboard .dashboard-shell {
width: 100%;
max-width: none;
margin: 0;
}
body.is-dashboard-overlay-open {
overflow: hidden;
}
@@ -304,6 +315,7 @@ button:disabled {
.shell--dashboard {
display: block;
padding: 0;
overflow: hidden;
}
.sidebar,
@@ -339,11 +351,15 @@ button:disabled {
body.page-dashboard .content {
min-height: 100vh;
padding: 0;
gap: 0;
}
.dashboard-shell {
position: relative;
width: 100%;
max-width: none;
min-height: 100vh;
min-height: 100dvh;
padding: max(1.1rem, env(safe-area-inset-top)) 1rem calc(4rem + env(safe-area-inset-bottom));
background:
linear-gradient(180deg, rgba(7, 18, 34, 0.12), rgba(7, 18, 34, 0.42)),
@@ -353,8 +369,12 @@ body.page-dashboard .content {
}
.dashboard-shell__background {
position: absolute;
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
transform: none;
z-index: 0;
}
@@ -424,8 +444,10 @@ body.page-dashboard .content {
padding: 0;
width: 3.6rem;
height: 3.6rem;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08);
border-color: var(--surface-border);
background:
var(--panel-gradient-top),
var(--panel-gradient-accent);
}
.dashboard-settings img {
@@ -646,7 +668,7 @@ body.page-dashboard .content {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding-bottom: 8rem;
padding-bottom: 5rem;
}
.dashboard-moments-block {
@@ -654,9 +676,36 @@ body.page-dashboard .content {
padding-left: clamp(0.7rem, 2vw, 1.35rem);
}
.section-head--dashboard {
display: inline-flex;
width: fit-content;
max-width: 100%;
margin: 0 auto 0.8rem;
padding: 0.8rem 1rem;
border-radius: 1.35rem;
background:
linear-gradient(180deg, rgba(7, 18, 30, 0.58), rgba(7, 18, 30, 0.34)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 48%);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.56);
text-align: center;
justify-content: center;
}
.section-head--dashboard > div {
width: 100%;
}
.section-head--dashboard .eyebrow {
color: rgba(255, 255, 255, 0.82);
}
.section-head--dashboard h2 {
margin: 0;
font-size: 1.45rem;
color: rgba(255, 255, 255, 0.96);
}
.timeline-card {
@@ -667,6 +716,19 @@ body.page-dashboard .content {
border-radius: 1.65rem;
}
.timeline-card__image {
grid-column: 1 / -1;
width: 100%;
max-height: 18rem;
object-fit: cover;
border-radius: 1.25rem;
margin-bottom: 0.2rem;
}
.timeline-card__time-chip {
display: none;
}
.timeline-card--empty {
display: block;
}
@@ -763,6 +825,13 @@ body.page-dashboard .content {
border: 1px solid rgba(255, 255, 255, 0.08);
}
.signal-pill__icon {
display: block;
width: 1rem;
height: 1rem;
filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.signal-pill--good {
background: rgba(144, 214, 108, 0.2);
border-color: rgba(180, 255, 120, 0.34);
@@ -778,6 +847,36 @@ body.page-dashboard .content {
border-color: rgba(255, 209, 94, 0.28);
}
.signal-pill--neg2 {
background: rgba(185, 47, 52, 0.72);
border-color: rgba(255, 150, 150, 0.72);
color: #fff;
}
.signal-pill--neg1 {
background: rgba(189, 103, 36, 0.72);
border-color: rgba(255, 188, 130, 0.72);
color: #fff;
}
.signal-pill--zero {
background: rgba(39, 128, 164, 0.7);
border-color: rgba(179, 238, 255, 0.72);
color: #fff;
}
.signal-pill--pos1 {
background: rgba(35, 139, 105, 0.72);
border-color: rgba(180, 255, 224, 0.72);
color: #fff;
}
.signal-pill--pos2 {
background: rgba(28, 151, 93, 0.76);
border-color: rgba(180, 255, 220, 0.78);
color: #fff;
}
.signal-dot {
width: 0.85rem;
height: 0.85rem;
@@ -803,6 +902,52 @@ body.page-dashboard .content {
backdrop-filter: blur(24px) saturate(180%);
box-shadow: 0 16px 44px rgba(8, 18, 34, 0.35);
font-size: 2rem;
transition: transform 180ms ease, background 180ms ease;
}
.dashboard-fab.is-open {
transform: rotate(45deg) scale(0.96);
}
.dashboard-fab-menu[hidden] {
display: none;
}
.dashboard-fab-menu {
position: fixed;
right: max(1rem, env(safe-area-inset-right));
bottom: calc(5.8rem + env(safe-area-inset-bottom));
z-index: 28;
display: grid;
gap: 0.55rem;
width: min(18rem, calc(100vw - 2rem));
padding: 0.7rem;
border-radius: 1.6rem;
animation: fabMenuIn 180ms ease both;
transform-origin: right bottom;
}
.dashboard-fab-menu button {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.85rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.1rem;
background: rgba(255, 255, 255, 0.07);
color: var(--text);
text-align: left;
}
.dashboard-fab-menu img {
width: 1.35rem;
height: 1.35rem;
}
@keyframes fabMenuIn {
from { opacity: 0; transform: translateY(0.6rem) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.dashboard-composer {
@@ -1080,7 +1225,7 @@ body.page-dashboard .content {
}
.dashboard-range-view {
padding-bottom: 3rem;
padding-bottom: 1.5rem;
}
.range-period-rail {
@@ -1089,10 +1234,12 @@ body.page-dashboard .content {
grid-auto-columns: minmax(42%, 42%);
gap: 1rem;
margin-inline: calc(clamp(0rem, (100vw - 920px) / -2, 0rem));
padding: 0.35rem 0.7rem 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
scroll-padding-inline: 0.7rem;
}
.range-period-rail::-webkit-scrollbar {
@@ -1102,17 +1249,17 @@ body.page-dashboard .content {
.range-period-panel {
min-width: 0;
scroll-snap-align: start;
padding: 0.25rem;
border-radius: 1.9rem;
padding: 0.6rem;
border-radius: 2.15rem;
}
.range-period-panel.is-selected {
background: rgba(139, 228, 255, 0.08);
box-shadow: 0 0 0 1px rgba(139, 228, 255, 0.28);
background: rgba(139, 228, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(139, 228, 255, 0.34), 0 18px 48px rgba(0, 0, 0, 0.16);
}
.range-period-panel__head {
padding: 0 0.25rem 0.7rem;
padding: 0.15rem 0.25rem 0.85rem;
}
.range-period-panel__head a {
@@ -1142,9 +1289,9 @@ body.page-dashboard .content {
display: grid;
gap: 0.55rem;
align-items: stretch;
margin-bottom: 1.1rem;
padding: 0.85rem;
border-radius: 1.7rem;
margin-bottom: 0.15rem;
padding: 1rem;
border-radius: 1.85rem;
}
.range-score-strip--week {
@@ -1155,7 +1302,7 @@ body.page-dashboard .content {
display: flex;
gap: 0.18rem;
overflow: visible;
padding-inline: 0.55rem;
padding-inline: 0.8rem;
}
.range-score-day {
@@ -1546,10 +1693,12 @@ body.page-dashboard .content {
display: flex;
flex-direction: column;
gap: 1rem;
min-height: 100vh;
min-height: 100dvh;
}
.options-menu-panel {
padding: 1.2rem;
padding: 0;
border-radius: var(--radius-xl);
}
@@ -1571,12 +1720,15 @@ body.page-dashboard .content {
gap: 0.35rem;
align-items: flex-start;
width: 100%;
padding: 1rem 1.1rem;
border-radius: 1.4rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
padding: 1.15rem 1.25rem;
border-radius: 1.55rem;
border: 1px solid rgba(152, 194, 232, 0.16);
background:
linear-gradient(180deg, rgba(41, 59, 80, 0.72), rgba(25, 42, 63, 0.6)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 48%);
color: var(--text);
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.options-menu-card strong {
@@ -1621,7 +1773,7 @@ body.page-dashboard .content {
.options-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(3, 9, 17, 0.64);
background: rgba(3, 9, 17, 0.78);
backdrop-filter: blur(10px);
}
@@ -1639,6 +1791,9 @@ body.page-dashboard .content {
calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem)
max(1rem, env(safe-area-inset-left));
border-radius: 0;
background:
linear-gradient(180deg, rgba(8, 16, 28, 0.94), rgba(11, 31, 51, 0.9)),
radial-gradient(circle at 50% 0%, rgba(139, 228, 255, 0.12), transparent 42%);
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
@@ -1663,6 +1818,34 @@ body.page-dashboard .content {
font-size: 2rem;
}
.options-modal .settings-section,
.options-modal .band-card,
.options-modal .sport-type-card,
.options-modal .checkbox-row--panel,
.options-modal .push-panel,
.options-modal .detail-card--overlay {
border: 1px solid rgba(152, 194, 232, 0.14);
background:
linear-gradient(180deg, rgba(42, 62, 84, 0.56), rgba(23, 42, 62, 0.48)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 46%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.options-modal .settings-section {
padding: 1rem;
border-radius: 1.5rem;
}
.options-modal input[type="text"],
.options-modal input[type="password"],
.options-modal input[type="number"],
.options-modal input[type="date"],
.options-modal select,
.options-modal textarea {
background: rgba(9, 22, 36, 0.62);
border-color: rgba(152, 194, 232, 0.18);
}
.detail-card--overlay {
padding: 1rem;
border-radius: 1.4rem;
@@ -1690,25 +1873,180 @@ body.page-dashboard .content {
}
@media (max-width: 760px) {
body.page-dashboard .content,
.dashboard-shell {
width: 100%;
max-width: none;
overflow-x: hidden;
}
.dashboard-shell {
padding-inline: 0;
padding-top: max(0.35rem, env(safe-area-inset-top));
padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
}
.dashboard-shell__background {
inset: 0;
width: 100%;
transform: none;
}
.dashboard-day,
.dashboard-range-view {
width: 100%;
padding: 0.6rem 0.75rem 0;
}
.range-period-rail {
grid-auto-columns: minmax(86%, 86%);
margin-inline: -0.75rem;
padding-inline: 0.75rem;
}
.range-period-panel {
padding: 0.55rem;
}
.range-score-strip {
padding: 0.95rem;
}
.dashboard-topbar {
gap: 0.7rem;
align-items: start;
position: relative;
top: auto;
left: auto;
transform: none;
gap: 0.55rem;
align-items: center;
width: calc(100% - 1rem);
margin: 0 auto 0.65rem;
}
.dashboard-switcher {
width: auto;
flex: 1;
padding: 0.18rem;
}
.dashboard-switcher a {
min-width: 0;
flex: 1;
padding-inline: 0.8rem;
min-height: 3rem;
}
.dashboard-settings {
flex: 0 0 3.36rem;
width: 3.36rem;
height: 3.36rem;
min-width: 3.36rem;
min-height: 3.36rem;
margin-left: 0;
}
.timeline-card {
position: relative;
padding-top: 3.65rem;
overflow: hidden;
}
.timeline-card__image {
width: 100%;
max-width: none;
margin: -2.65rem 0 0.7rem;
border-radius: 1.25rem;
}
.timeline-card__time-chip {
position: absolute;
top: 0.75rem;
left: 8.75rem;
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0 0.75rem;
border-radius: 999px;
background: rgba(8, 18, 30, 0.38);
border: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.82);
font-size: 0.86rem;
}
.timeline-card__delete {
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
.timeline-card--with-image .timeline-card__time-chip,
.timeline-card--with-image .timeline-card__delete {
top: 2.05rem;
}
.timeline-card--with-image .timeline-card__time-chip {
left: auto;
right: 5.15rem;
background: rgba(255, 255, 255, 0.86);
border-color: rgba(255, 255, 255, 0.62);
color: rgba(10, 22, 35, 0.92);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.timeline-card--with-image .timeline-card__delete {
right: 1.6rem;
}
.timeline-card__delete .ghost-button {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(255, 255, 255, 0.6);
color: rgba(10, 22, 35, 0.92);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.timeline-card__meta {
display: none;
}
.timeline-card .signal-row {
position: absolute;
top: 0.75rem;
left: 0.75rem;
margin: 0;
gap: 0.35rem;
}
.timeline-card--with-image .signal-row {
top: 2.05rem;
left: 2.05rem;
}
.timeline-card .signal-pill {
width: 2.38rem;
height: 2.38rem;
padding: 0;
justify-content: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.timeline-card .signal-pill strong,
.timeline-card .signal-pill span {
display: none;
}
.timeline-card .signal-pill__icon {
display: block;
width: 1.08rem;
height: 1.08rem;
filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}
.dashboard-moments-block {
padding-left: 0;
}
.timeline-list {
padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
.day-summary-card__head,
@@ -1729,6 +2067,7 @@ body.page-dashboard .content {
border-radius: 0;
padding-top: calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem);
padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem);
padding-inline: max(0.85rem, env(safe-area-inset-left)) max(0.85rem, env(safe-area-inset-right));
}
.dashboard-overlay,
@@ -1740,6 +2079,19 @@ body.page-dashboard .content {
grid-template-columns: 1fr;
}
.dashboard-modal__controls,
.options-modal__controls {
margin-inline: -0.2rem;
padding: 0.15rem 0 0.55rem;
background: linear-gradient(180deg, rgba(26, 26, 29, 0.96), rgba(26, 26, 29, 0.72), transparent);
}
.dashboard-modal__round {
width: 3.4rem;
height: 3.4rem;
font-size: 1.65rem;
}
.overlay-signal-card {
grid-template-columns: 1fr;
}
@@ -1758,8 +2110,9 @@ body.page-dashboard .content {
max-height: 100%;
min-height: 0;
border-radius: 0;
padding-top: calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem);
padding-top: calc(max(1rem, env(safe-area-inset-top)) + 0.25rem);
padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem);
padding-inline: max(0.85rem, env(safe-area-inset-left)) max(0.85rem, env(safe-area-inset-right));
}
}
@@ -3507,6 +3860,11 @@ input[type="range"] {
padding-bottom: calc(6.8rem + env(safe-area-inset-bottom));
}
body.page-dashboard.is-authenticated .content,
body.page-options.is-authenticated .content {
padding-bottom: 0;
}
.site-footer {
margin-bottom: 0.5rem;
}
@@ -3620,6 +3978,12 @@ input[type="range"] {
gap: 0.8rem;
}
body.page-dashboard .shell,
body.page-options .shell {
padding: 0;
gap: 0;
}
.sidebar,
.hero-card,
.metric-card,