diff --git a/assets/diary/calendar.js b/assets/diary/calendar.js
index fa87767..f4872e0 100644
--- a/assets/diary/calendar.js
+++ b/assets/diary/calendar.js
@@ -3,47 +3,43 @@
if (!cal) return;
cal.querySelectorAll(".dropdown > button").forEach(wireDropdown);
- var displayYear = parseInt(cal.dataset.displayYear, 10);
- var current = parseInt(cal.dataset.displayMonth, 10);
- var monthLabel = cal.querySelector("[data-cal-month-link]");
+ var displayMonth = parseInt(cal.dataset.displayMonth, 10);
var months = {};
cal.querySelectorAll("[data-cal-month]").forEach(function (t) {
months[parseInt(t.dataset.calMonth, 10)] = t;
});
- var jumpLinks = {};
- cal.querySelectorAll("[data-cal-month-jump]").forEach(function (a) {
- jumpLinks[parseInt(a.dataset.calMonthJump, 10)] = a;
- });
- function show(m) {
- if (m === current) return;
- if (!months[m]) return;
- months[current].hidden = true;
- months[m].hidden = false;
- current = m;
- if (monthLabel) {
- var label = jumpLinks[m];
- if (label) monthLabel.textContent = " " + label.textContent + " ";
+ // Centering only applies inside the persistent desktop rail (.sidebar). On
+ // mobile the widget is re-parented into .overlay-body, where we leave the
+ // grids stacked from January and do not scroll (design decision).
+ function railContainer() {
+ var el = cal.parentElement;
+ while (el) {
+ if (el.classList) {
+ if (el.classList.contains("overlay-body")) return null;
+ if (el.classList.contains("sidebar")) return el;
+ }
+ el = el.parentElement;
}
+ return null;
}
- // Dropdown month picks scroll via the href anchor; we also swap the grid
- // so the calendar reflects what the user just navigated to.
- Object.keys(jumpLinks).forEach(function (key) {
- var a = jumpLinks[key];
- a.addEventListener("click", function () { show(parseInt(key, 10)); });
- });
-
- // Any in-page anchor click (#YYYY-MM or #YYYY-MM-DD) updates the calendar
- // so it tracks the user's focus through the year page.
- function syncFromHash() {
- var h = window.location.hash;
- if (!h) return;
- var m = h.match(/^#(\d{4})-(\d{2})(?:-\d{2})?$/);
- if (!m) return;
- if (parseInt(m[1], 10) !== displayYear) return;
- show(parseInt(m[2], 10));
+ // Scroll only the rail so the given month grid sits in its vertical center;
+ // the main document/window position is untouched (priority: don't disturb
+ // the reading position).
+ function centerMonth(m) {
+ var grid = months[m];
+ if (!grid) return;
+ var container = railContainer();
+ if (!container) return;
+ var offset = grid.getBoundingClientRect().top -
+ container.getBoundingClientRect().top + container.scrollTop;
+ container.scrollTop = offset - (container.clientHeight - grid.clientHeight) / 2;
}
- window.addEventListener("hashchange", syncFromHash);
- syncFromHash();
+
+ // Center the current month once, on initial render. Anchor navigation
+ // (#YYYY-MM / #YYYY-MM-DD) deliberately does NOT re-center the rail —
+ // re-scrolling on every hop is disorienting; the today/current cell
+ // highlighting is enough to keep bearings.
+ centerMonth(displayMonth);
})();
diff --git a/assets/style.css b/assets/style.css
index c1ab60f..bf44622 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -757,23 +757,17 @@ aside.tree-sidebar:empty { display: none; }
}
/* === Diary calendar === */
-.diary-cal-nav {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.2rem;
- margin-bottom: 0.4rem;
+/* Header row: "Chronological" on the left, the [year ▾] dropdown pushed to the
+ right. Composes with .row (flex + centering); space-between splits the two. */
+.diary-cal .panel-header { justify-content: space-between; }
+.diary-cal-drop .dropdown-menu { min-width: 0; }
+/* Per-month caption above each grid, linking to that month's anchor. */
+.diary-cal-month {
font-size: var(--font-sm);
+ margin: var(--space-3) 0 0.2rem;
}
-.diary-cal-nav .diary-cal-drop + .diary-cal-heading { margin-left: var(--space-3); }
-/* Anchor the month/year dropdowns to the nav row instead of the ▾ button so
- the menu spans the full panel width rather than overflowing the 14rem
- sidebar with its default min-width: 9rem. */
-.diary-cal-nav { position: relative; }
-.diary-cal-nav .diary-cal-drop { position: static; }
-.diary-cal-nav .dropdown-menu { left: 0; right: 0; min-width: 0; }
-.diary-cal-heading { color: var(--link); }
-.diary-cal-heading:hover { color: var(--link-hover); }
+.diary-cal-month a { color: var(--link); }
+.diary-cal-month a:hover { color: var(--link-hover); }
.diary-cal-grid {
width: 100%;
border-collapse: collapse;
diff --git a/diary.go b/diary.go
index b7921b7..4a63c8a 100644
--- a/diary.go
+++ b/diary.go
@@ -343,8 +343,8 @@ type calYear struct {
}
// calMonthGrid carries everything the template needs to render one month's
-// grid plus the dropdown / heading entry that targets it. The calendar
-// widget ships all 12 in the initial HTML; JS swaps which one is visible.
+// grid plus the caption that links to it. The calendar widget renders all 12
+// stacked vertically; JS centers the current month in the rail on load.
type calMonthGrid struct {
Num int
Name string
@@ -353,13 +353,11 @@ type calMonthGrid struct {
}
type calendarData struct {
- DisplayYear int
- DisplayMonth int
- DisplayMonthName string // pre-resolved so the template doesn't need arithmetic
- DiaryURL string
- YearURL string
- Months []calMonthGrid
- Years []calYear
+ DisplayYear int
+ DisplayMonth int
+ DiaryURL string
+ Months []calMonthGrid
+ Years []calYear
}
var diaryCalTmpl = template.Must(template.ParseFS(assets, "assets/diary/calendar.html"))
@@ -489,13 +487,11 @@ func computeCalendarWidget(diaryRootFS, diaryRootURL, fsPath string, depth int)
sort.Slice(years, func(i, j int) bool { return years[i].Num > years[j].Num })
data := calendarData{
- DisplayYear: displayYear,
- DisplayMonth: displayMonth,
- DisplayMonthName: months[displayMonth-1].Name,
- DiaryURL: diaryRootURL,
- YearURL: yearURL,
- Months: months,
- Years: years,
+ DisplayYear: displayYear,
+ DisplayMonth: displayMonth,
+ DiaryURL: diaryRootURL,
+ Months: months,
+ Years: years,
}
var buf bytes.Buffer