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

show less ui reflows during load

Browse source
This commit is contained in:
Til 2026-05-09 20:12:36 +02:00
parent 56e473c611
commit 66a2c4ba80
3 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
copyparty/web/browser.css
View file

@ -3797,10 +3797,6 @@ html.d #treepar {
top: .6em; top: .6em;
right: .6em; right: .6em;
} }
#ops a {
padding-left: .15em;
padding-right: .15em;
}
#srchfolder_div { #srchfolder_div {
left: 2.8em; left: 2.8em;
} }
@ -3854,6 +3850,14 @@ html.e #wrap.thin {
} }
} }
@media (max-width: 50em){ @media (max-width: 50em){
#path {
position: relative;
height: 2.2em;
margin: .5em 0 0 0;
z-index: -1;
}
html.dy .ghead,
html.b .ghead,
html.dy #wrap.thin .ghead, html.dy #wrap.thin .ghead,
html.b #wrap.thin .ghead { html.b #wrap.thin .ghead {
top: 7.2em; top: 7.2em;
@ -3889,7 +3893,9 @@ html.e #wrap.thin {
margin-left: -1em; margin-left: -1em;
margin-right: -1em; margin-right: -1em;
} }
#actionsArea,
#pathBar.thin #actionsArea { #pathBar.thin #actionsArea {
position: absolute;
top: 1em; top: 1em;
right: 1em; right: 1em;
} }
@ -3952,6 +3958,8 @@ html.e #wrap.thin {
padding: .5em; padding: .5em;
padding-right: 2em; padding-right: 2em;
} }
#wfp,
#wfp.shifted,
#pathBar.thin #wfp, #pathBar.thin #wfp,
#pathBar.thin #wfp.shifted { #pathBar.thin #wfp.shifted {
margin-left: 2em; margin-left: 2em;
@ -3959,10 +3967,13 @@ html.e #wrap.thin {
#wrap.thin .ghead { #wrap.thin .ghead {
top: 7em; top: 7em;
} }
html.cy .ghead,
html.a .ghead,
html.cy #wrap.thin .ghead, html.cy #wrap.thin .ghead,
html.a #wrap.thin .ghead { html.a #wrap.thin .ghead {
top: 7.3em; top: 7.3em;
} }
html.cz .ghead,
html.cz #wrap.thin .ghead { html.cz #wrap.thin .ghead {
top: 7.7em; top: 7.7em;
} }
@ -3973,7 +3984,13 @@ html.e #wrap.thin {
} }
} }
@media (max-width: 32em) { @media (max-width: 40em) {
#ops a {
padding-left: .15em;
padding-right: .15em;
}
}
@media (max-width: 33em) {
#wfp #gon, #wfp #gon,
#wfp #gop { #wfp #gop {
display: none; display: none;

6
copyparty/web/browser.html
View file

@ -55,9 +55,9 @@
<div id="pathBar"> <div id="pathBar">
<h2 id="wfp" class="shifted"> <h2 id="wfp" class="shifted">
<a href="#" id="gop" class="btn">⬅️</a> <a href="#" id="gop" class="btn"></a>
<a href="#" id="gon" class="btn">➡️</a> <a href="#" id="gon" class="btn"></a>
<a href="#" id="gou" class="btn">⬆️</a> <a href="#" id="gou" class="btn"></a>
</h2> </h2>
<h1 id="path"> <h1 id="path">
{%- for n in vpnodes %} {%- for n in vpnodes %}

4
copyparty/web/browser.js
View file

@ -7719,7 +7719,7 @@ function onwidgetresize(){
ebi('path').onresize = keep_right(ebi('path')); ebi('path').onresize = keep_right(ebi('path'));
} }
window.addEventListener('resize', onwidgetresize); window.addEventListener('resize', onwidgetresize);
setTimeout(onwidgetresize, 1); onwidgetresize();
var treectl = (function () { var treectl = (function () {
var r = { var r = {
@ -7984,7 +7984,7 @@ var treectl = (function () {
ebi('tree_footer').style.display = 'block'; ebi('tree_footer').style.display = 'block';
ebi('wrap').style.marginLeft = w; ebi('wrap').style.marginLeft = w;
ebi('widget').style.marginLeft = (iw /1.4) + 'em'; ebi('widget').style.marginLeft = (iw /1.4) + 'em';
setTimeout(onwidgetresize, 1); onwidgetresize();
setTimeout(onscroll, 1); setTimeout(onscroll, 1);
} }