diff --git a/assets/css/src/collapsable-section.css b/assets/css/src/collapsable-section.css index 5ef15bc..fcc0209 100644 --- a/assets/css/src/collapsable-section.css +++ b/assets/css/src/collapsable-section.css @@ -51,6 +51,7 @@ } .sessions--detailed .session { + scroll-margin-block-start: 7.7rem; grid-template-columns: 1.5fr 2fr 1fr 1fr 2.5fr !important; } @@ -84,6 +85,10 @@ } @media screen and (max-width: 1085px) { + .sessions--detailed .session { + scroll-margin-block-start: 7rem; + } + .collapsable__content .session { grid-template-columns: 1fr 1fr !important; column-gap: 9vw; diff --git a/site/templates/program.php b/site/templates/program.php index dc07bfe..5163fc0 100644 --- a/site/templates/program.php +++ b/site/templates/program.php @@ -27,6 +27,24 @@ } }) }) + }, + scrollToNextClosestDate() { + const nodes = document.querySelectorAll('.sessions [data-date]'); + const today = new Date(); + + const nodesWithDates = Array.from(nodes).map(node => { + const dateStr = node.getAttribute('data-date'); + const date = new Date(dateStr); + return { node, date }; + }).filter(({ date }) => date >= today); + + if (nodesWithDates.length === 0) return; + + const nextClosestNode = nodesWithDates.reduce((closest, current) => { + return current.date < closest.date ? current : closest; + }); + + nextClosestNode.node.scrollIntoView({ behavior: 'smooth' }); } }" > @@ -55,6 +73,7 @@ const url = new URL(window.location.href); url.searchParams.set('tab', tab); window.history.pushState({}, '', url); + setTimeout(scrollToNextClosestDate, 100) " > categories()->split() as $filter): ?> @@ -73,6 +92,7 @@ const url = new URL(window.location.href); url.searchParams.set('tab', tab); window.history.pushState({}, '', url); + setTimeout(scrollToNextClosestDate, 100) " > @@ -110,7 +130,13 @@ 0): ?> $month, 'padding' => false, 'open' => $open], slots: true) ?> -
= $formattedDate ?>
@@ -148,11 +174,6 @@