mirror of
https://github.com/openclaw/openclaw.git
synced 2026-04-21 06:02:13 +00:00
dreaming: pin the diary nav above long entries
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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}">
|
||||
|
||||
Reference in New Issue
Block a user