dreaming: pin the diary nav above long entries

This commit is contained in:
Dave Morin
2026-04-09 22:03:13 -10:00
committed by Vignesh
parent 68cf8e01d6
commit 7d342374ce
2 changed files with 52 additions and 36 deletions

View File

@@ -686,14 +686,30 @@
/* ---- Diary header ---- */
.dreams-diary__chrome {
position: sticky;
top: 0;
z-index: 3;
width: min(100%, 680px);
max-width: 100%;
min-width: 0;
padding-bottom: 14px;
margin-bottom: 10px;
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--bg) 98%, transparent) 0%,
color-mix(in oklab, var(--bg) 94%, transparent) 72%,
color-mix(in oklab, var(--bg) 0%, transparent) 100%
);
}
.dreams-diary__header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
margin-bottom: 14px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.dreams-diary__title {
@@ -773,7 +789,7 @@
.dreams-diary__daychips {
display: flex;
gap: 6px;
margin: 0 0 24px;
margin: 0;
width: min(100%, 680px);
max-width: 100%;
min-width: 0;
@@ -782,8 +798,6 @@
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 2px;
position: relative;
z-index: 2;
}
.dreams-diary__daychips::-webkit-scrollbar {

View File

@@ -728,37 +728,39 @@ function renderDiarySection(props: DreamingProps) {
return html`
<section class="dreams-diary">
<div class="dreams-diary__header">
<span class="dreams-diary__title">${t("dreaming.diary.title")}</span>
<button
class="btn btn--subtle btn--sm"
?disabled=${props.modeSaving || props.dreamDiaryLoading}
@click=${() => {
_diaryPage = 0;
props.onRefreshDiary();
}}
>
${props.dreamDiaryLoading ? t("dreaming.diary.reloading") : t("dreaming.diary.reload")}
</button>
</div>
<div class="dreams-diary__chrome">
<div class="dreams-diary__header">
<span class="dreams-diary__title">${t("dreaming.diary.title")}</span>
<button
class="btn btn--subtle btn--sm"
?disabled=${props.modeSaving || props.dreamDiaryLoading}
@click=${() => {
_diaryPage = 0;
props.onRefreshDiary();
}}
>
${props.dreamDiaryLoading ? t("dreaming.diary.reloading") : t("dreaming.diary.reload")}
</button>
</div>
<!-- Simple day chips -->
<div class="dreams-diary__daychips">
${reversed.map(
(e) => html`
<button
class="dreams-diary__day-chip ${e.page === page
? "dreams-diary__day-chip--active"
: ""}"
@click=${() => {
setDiaryPage(e.page);
props.onRequestUpdate?.();
}}
>
${formatDiaryChipLabel(e.date)}
</button>
`,
)}
<!-- Simple day chips -->
<div class="dreams-diary__daychips">
${reversed.map(
(e) => html`
<button
class="dreams-diary__day-chip ${e.page === page
? "dreams-diary__day-chip--active"
: ""}"
@click=${() => {
setDiaryPage(e.page);
props.onRequestUpdate?.();
}}
>
${formatDiaryChipLabel(e.date)}
</button>
`,
)}
</div>
</div>
<article class="dreams-diary__entry" key="${page}">