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

thin media bar layout

Browse source
This commit is contained in:
Til Schmitter 2026-04-11 16:44:40 +02:00
parent 49e38ff549
commit 8a00e50ce4
2 changed files with 57 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
copyparty/web/browser.css
View file

@ -1135,18 +1135,33 @@ html.dz #flogout {
font-size: 1.4em;
left: 0;
right: 0;
bottom: -2.5em;
height: 2.5em;
bottom: 0;
z-index: 1;
touch-action: none;
}
#widget.anim {
transition: bottom 0.15s, margin-left 0.15s;
transition: margin-left 0; /* can't set this above 0 due to onwidgetresize */
}
#widget.open {
#widget.anim #widgeti {
transition: transform 0.15s, height 0.15s;
}
#widget.open #widgeti{
/* box-shadow: 0 0 1em rgba(0,48,64,0.2); */
bottom: 0;
height: 100%;
transform: scaleY(1);
}
#pbarthinpos {
display: none;
align-content: center;
padding: .2em .5em;
padding-bottom: 0;
height: 2em;
}
#widget.thin #pbarthinpos{
display: block;
}
html.y #widget.open {
border-top: .2em solid var(--bg-u2);
}
@ -1154,7 +1169,12 @@ html.y #widget.open {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
height: 0;
transform: scaleY(0);
transform-origin: bottom;
}
#np_inf {
height: 0;
}
#fshr,
#wtgrid, #wtgrid2,
@ -1330,7 +1350,6 @@ html.y #widget.open {
#altprogbar {
display: none;
grid-template-columns: max-content auto max-content;
max-width: 40vw;
text-align: center;
}
#altprogbar.vis {
@ -3484,7 +3503,7 @@ html.d #treepar {
}
}
@media (max-width: 35em) {
#ops>a[data-dest="new_md"],
/* #ops>a[data-dest="new_md"], */
#ops>a[data-dest="msg"] {
display: none;
}
@ -4371,7 +4390,7 @@ html.e #detree {
}
#rcm > a {
padding: .2rem .3rem;
padding: .3rem;
}
#rcm > .hide {

31
copyparty/web/browser.js
View file

@ -854,12 +854,13 @@ ebi('widget').innerHTML = (
' href="#" id="wtico">♫</a>' +
'</div>' +
'<div id="widgeti">' +
' <div id="pbarthinpos"></div>' +
' <div id="pctl">' +
' <a href="#" id="bprev" class="icon" tt="' + L.wt_prev + '">' + svg_prev + '</a>' +
' <a href="#" id="bplay" class="icon" tt="' + L.wt_play + '">' + svg_play + '</a>' +
' <a href="#" id="bnext" class="icon" tt="' + L.wt_next + '">' + svg_next + '</a>' +
' <span id="trackname"></span>' +
' <div id="progbar" style="position: relative; height: 100%;">' +
' <div id="progbar" style="position: relative; height: 80%;">' +
' <canvas id="barbuf"></canvas>' +
' <canvas id="barpos"></canvas>' +
' </div>' +
@ -872,7 +873,7 @@ ebi('widget').innerHTML = (
' <a href="#" class="tgl btn" id="au_shuf" tt="' + L.mt_shuf + '">🔀</a>' +
' <div id="pvolbg">' + svg_vol + '<canvas id="pvol"></canvas></div>' +
' </div>' +
'</div>' +
'</div>'+
'<div id="np_inf">' +
' <img id="np_img" />' +
' <span id="np_url"></span>' +
@ -7065,6 +7066,8 @@ function aligngriditems() {
}
if (st.justifyContent != val)
st.justifyContent = val;
onwidgetresize();
}
onresize100.add(aligngriditems);
@ -7085,6 +7088,29 @@ var filecolwidth = (function () {
})();
onresize100.add(filecolwidth, true);
function onwidgetresize(){
var widget = ebi('widget');
var bar = ebi('pctl');
var pbarthinpos = ebi('pbarthinpos');
var width = widget.offsetWidth;
var thin = width < 800; //px
var gtc = `max-content max-content max-content ${thin ? '' : '20%'} auto max-content max-content max-content`;
if(thin && bar.children.length > gtc.split(' ').length){
pbarthinpos.appendChild(ebi('progbar'));
pbarthinpos.appendChild(ebi('altprogbar'));
}
else if(!thin && bar.children.length < gtc.split(' ').length){
ebi('trackname').after(ebi('progbar'));
ebi('trackname').after(ebi('altprogbar'));
}
ebi('altprogbar').maxWidth = thin ? '' : '40vw'
bar.style.gridTemplateColumns = gtc;
clmod(widget, 'thin', thin);
}
window.addEventListener('resize', onwidgetresize);
onwidgetresize();
var treectl = (function () {
var r = {
@ -7350,6 +7376,7 @@ var treectl = (function () {
ebi('tree_footer').style.width = (iw - 2) + 'em';
ebi('wrap').style.marginLeft = w2;
ebi('widget').style.marginLeft = (iw /1.4) + 'em';
onwidgetresize();
onscroll();
}