From b00dfd3c9909cf6d1be5868fcf4b56d672b6fd04 Mon Sep 17 00:00:00 2001 From: Matthew Holloway Date: Wed, 17 Jul 2024 12:31:00 +1200 Subject: [PATCH 01/17] feat: Overflow shadows --- ietf/static/css/ietf.scss | 17 +++++++++++++++++ ietf/static/js/ietf.js | 25 ++++++++++++++++++++++++- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss index 062358c0e2..5bd520f041 100644 --- a/ietf/static/css/ietf.scss +++ b/ietf/static/css/ietf.scss @@ -1188,3 +1188,20 @@ blockquote { padding-left: 1rem; border-left: solid 1px var(--bs-body-color); } + +.overflow-shadows { + transition: box-shadow 0.5s; +} + +.overflow-shadows--both { + box-shadow: inset 0px 21px 18px -20px var(--bs-body-color), + inset 0px -21px 18px -20px var(--bs-body-color); +} + +.overflow-shadows--top-only { + box-shadow: inset 0px 21px 18px -20px var(--bs-body-color); +} + +.overflow-shadows--bottom-only { + box-shadow: inset 0px -21px 18px -20px var(--bs-body-color); +} diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js index 74fd39a85f..dde00c6d1e 100644 --- a/ietf/static/js/ietf.js +++ b/ietf/static/js/ietf.js @@ -91,6 +91,27 @@ $(document) // }); }); +function overflowShadows(el) { + function handleScroll(){ + const canScrollUp = el.scrollTop > 0 + const canScrollDown = el.offsetHeight + el.scrollTop < el.scrollHeight + el.classList.toggle("overflow-shadows--both", canScrollUp && canScrollDown) + el.classList.toggle("overflow-shadows--top-only", canScrollUp && !canScrollDown) + el.classList.toggle("overflow-shadows--bottom-only", !canScrollUp && canScrollDown) + } + + el.addEventListener("scroll", handleScroll, {passive: true}) + handleScroll() + + const observer = new IntersectionObserver(handleScroll) + observer.observe(el) // el won't have scrollTop etc when hidden, so we need to recalculate when it's revealed + + return () => { + el.removeEventListener("scroll", handleScroll) + observer.unobserve(el) + } +} + $(document) .ready(function () { // load data for the menu @@ -108,7 +129,7 @@ $(document) } attachTo.find(".dropdown-menu") .remove(); - var menu = ['