oficina / calendar Public

Keep calendar header fixed while opening working hours

Paul Campbell pushed by paul@keymail.dev 3 weeks ago 78308b954b2402cd821611156403d37daa958bc2 parent fa29a1d

2 files changed, +13 −2

internal/calendar/static/calendar.css +7 −0
internal/calendar/static/calendar.js +6 −2

CI log

=== vet ===
go vet ./...
=== fmt ===
=== test ===
go test ./...
?   	amadan.net/oficina/calendar/cmd/calendar	[no test files]
ok  	amadan.net/oficina/calendar/internal/calendar	4.455s
?   	amadan.net/oficina/calendar/internal/calendar/icons	[no test files]
?   	amadan.net/oficina/calendar/internal/calendar/seal	[no test files]
ok  	amadan.net/oficina/calendar/internal/calendartest	2.018s
ok  	amadan.net/oficina/calendar/internal/guardstest	0.040s
=== migration-check ===
go run github.com/carlosframework/rastrillo/cmd/rastrillo migration check
rastrillo migration check: models and migrations agree

diff --git a/internal/calendar/static/calendar.css b/internal/calendar/static/calendar.css

index bc39c8d..fb52a59 100644

--- a/internal/calendar/static/calendar.css

+++ b/internal/calendar/static/calendar.css

@@ -175,6 +175,8 @@

display: grid;

gap: 0;

grid-template-columns: 3.5rem 1fr;

+ max-block-size: calc(100vh - 20rem);

+ overflow: auto;

}

[cal-week-grid] {

@@ -183,6 +185,11 @@

grid-template-columns: 3.5rem repeat(7, minmax(6rem, 1fr));

}

+[cal-week-scroll] {

+ max-block-size: calc(100vh - 20rem);

+ overflow: auto;

[cal-hours] {

border-inline-end: 1px solid var(--rst-line);

position: relative;

diff --git a/internal/calendar/static/calendar.js b/internal/calendar/static/calendar.js

index 679c5ba..a9395b2 100644

--- a/internal/calendar/static/calendar.js

+++ b/internal/calendar/static/calendar.js

@@ -5,6 +5,10 @@

addEventListener("DOMContentLoaded", () => {

if (performance.getEntriesByType("navigation")[0]?.type === "back_forward") return;

const hour = document.querySelector("[cal-working-hour]");

- if (!hour) return;

- requestAnimationFrame(() => scrollTo(0, Math.max(0, hour.getBoundingClientRect().top + scrollY - 72)));

+ const scroller = hour && hour.closest("[cal-grid], [cal-week-scroll]");

+ if (!scroller) return;

+ requestAnimationFrame(() => {

+ const top = hour.getBoundingClientRect().top - scroller.getBoundingClientRect().top;

+ scroller.scrollTop = Math.max(0, scroller.scrollTop + top - 72);

+ });

});