altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #7702 from holloway/feat/overflow-shadows

Browse source 
feat: Groups menu overflow shadows
This commit is contained in:
Robert Sparks 2024-07-17 18:05:31 -05:00 committed by GitHub
parent 3a839ecfe8 b00dfd3c99
commit 6c74980b35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ietf/static/css/ietf.scss
View file

@ -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);
}

25
ietf/static/js/ietf.js
View file

@ -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 = ['<ul class="dropdown-menu ms-n1 mt-n1">'];
var menu = ['<ul class="dropdown-menu ms-n1 mt-n1 overflow-shadows">'];
var groups = data[parentId];
var gtype = "";
for (var i = 0; i < groups.length; ++i) {
@ -127,6 +148,8 @@ $(document)
attachTo.closest(".dropdown-menu");
}
attachTo.append(menu.join(""));
attachTo.find(".overflow-shadows").each(function(){ overflowShadows(this)})
}
}
});