mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-21 05:32:25 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

dynamic scroll offset for header bars

Browse source
This commit is contained in:
Til Schmitter 2026-04-25 12:59:06 +02:00
parent 1f342bd26c
commit 40eb6271d5
2 changed files with 51 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
copyparty/web/browser.css
View file

@ -587,6 +587,10 @@ html .ayjump:focus-visible {
position: sticky; position: sticky;
top: .6em; top: .6em;
z-index: 4; z-index: 4;
pointer-events: none;
}
#pathBar *:not(#wfp) {
pointer-events: all;
} }
#wfp.shifted { #wfp.shifted {
margin-left: 2em; margin-left: 2em;
@ -2174,6 +2178,7 @@ html.y #tree.nowrap .ntree a+a:hover {
position: sticky; position: sticky;
top: 3.7em; top: 3.7em;
z-index: 3; z-index: 3;
transition: opacity .15s;
} }
.ghead .btn { .ghead .btn {
position: relative; position: relative;
@ -3618,12 +3623,19 @@ html.d #treepar {
/* basically a mobile / phone layout */ /* basically a mobile / phone layout */
#ghead.inv {
opacity: 0;
pointer-events: none;
}
#pathBar.thin { #pathBar.thin {
display: block; display: block;
#path { #path {
position: relative;
height: 1.8em; height: 1.8em;
margin: .5em 0 0 0; margin: .5em 0 0 0;
top: var(--dyn-scrolloffset);
z-index: -1;
} }
#wfp.shifted { #wfp.shifted {
margin-left: 2.5em; margin-left: 2.5em;
@ -3646,7 +3658,7 @@ html.e #pathBar.thin #path {
} }
html:not(.e) #wrap.thin { html:not(.e) #wrap.thin {
#ghead { #ghead {
top: 7em; top: calc(7.4em + var(--dyn-scrolloffset));
} }
} }
html.e #wrap.thin { html.e #wrap.thin {
@ -4021,6 +4033,7 @@ html.ez {
html.e { html.e {
text-shadow: none; text-shadow: none;
--dyn-scrolloffset: 0 !important;
} }
html.e * { html.e * {
border-radius: 0 !important; border-radius: 0 !important;

37
copyparty/web/browser.js
View file

@ -7393,6 +7393,34 @@ var filecolwidth = (function () {
})(); })();
onresize100.add(filecolwidth, true); onresize100.add(filecolwidth, true);
var ows_active = false;
var lastY = 0;
var trailingY0 = 0;
function onwrapscroll () {
var newY = yscroll();
var down = newY > lastY;
var gh = ebi('ghead');
var pa = ebi('path');
var totalH = gh.offsetHeight + ebi('pathBar').offsetHeight;
if(newY > trailingY0 + totalH){
trailingY0 = newY - totalH;
clmod(gh, 'inv', true);
}
else if(newY < trailingY0)
{
trailingY0 = newY;
clmod(gh, 'inv', false);
}
else{
clmod(gh, 'inv', false);
}
document.documentElement.style.setProperty('--dyn-scrolloffset', (trailingY0 - newY) + 'px');
lastY = newY;
}
function onwidgetresize(){ function onwidgetresize(){
var widget = ebi('widget'); var widget = ebi('widget');
var bar = ebi('pctl'); var bar = ebi('pctl');
@ -7404,6 +7432,15 @@ function onwidgetresize(){
clmod(ebi('pathBar'), 'thin', thin); clmod(ebi('pathBar'), 'thin', thin);
clmod(ebi('wrap'), 'thin', thin); clmod(ebi('wrap'), 'thin', thin);
if(thin && !ows_active){
window.addEventListener('scroll', onwrapscroll);
ows_active = true;
}
else if (!thin && ows_active){
window.removeEventListener('scroll', onwrapscroll);
ows_active = false;
}
thin = thin || IE; thin = thin || IE;
var gtc = 'max-content max-content max-content ' + (thin ? '' : '20%') + ' auto max-content max-content max-content'; var gtc = 'max-content max-content max-content ' + (thin ? '' : '20%') + ' auto max-content max-content max-content';