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

remove behavior that goes to next image when image clicked in outer thirds, make buttons always visible on hover + vertical volume bar on mobile

Browse source
This commit is contained in:
Til Schmitter 2026-04-14 21:54:14 +02:00
parent 6592e7b347
commit c78da76754
3 changed files with 53 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
copyparty/web/baguettebox.js
View file

@ -1233,9 +1233,7 @@ window.baguetteBox = (function () {
} }
function show_buttons(v) { function show_buttons(v) {
clmod(ebi('bbox-btns'), 'off', v); clmod(ebi('bbox-overlay'), 'immersive', v);
clmod(btnPrev, 'off', v);
clmod(btnNext, 'off', v);
} }
function bounceAnimation(direction) { function bounceAnimation(direction) {
@ -1297,11 +1295,11 @@ window.baguetteBox = (function () {
x = e.clientX - rc.left, x = e.clientX - rc.left,
fx = x / (rc.right - rc.left); fx = x / (rc.right - rc.left);
if (fx < 0.3) // if (fx < 0.3)
return showLeftImage(); // return showLeftImage();
if (fx > 0.7) // if (fx > 0.7)
return showRightImage(); // return showRightImage();
show_buttons('t'); show_buttons('t');

43
copyparty/web/browser.css
View file

@ -1411,6 +1411,9 @@ html.y #widget.open {
height: .5em; height: .5em;
aspect-ratio: 8; aspect-ratio: 8;
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
border: 1px solid var(--bg-u1);
margin-left: .3em;
transition: opacity .15s;
} }
#pvolbg { #pvolbg {
height: 100%; height: 100%;
@ -1421,7 +1424,6 @@ html.y #widget.open {
} }
#pvolbg svg { #pvolbg svg {
height: 1.3em; height: 1.3em;
margin-right: .3em;
} }
#widget.cmp #wtoggle { #widget.cmp #wtoggle {
font-size: 1.2em; font-size: 1.2em;
@ -2286,7 +2288,7 @@ html.noscroll .sbar::-webkit-scrollbar {
flex: none; flex: none;
} }
.full-image figure { .full-image figure {
display: inline; display: inline-block;
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
@ -2298,8 +2300,6 @@ html.noscroll .sbar::-webkit-scrollbar {
height: auto; height: auto;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
max-height: calc(100% - 1.4em);
margin-bottom: 1.4em;
vertical-align: middle; vertical-align: middle;
transition: transform .23s, left .23s, top .23s, width .23s, height .23s; transition: transform .23s, left .23s, top .23s, width .23s, height .23s;
} }
@ -2340,6 +2340,10 @@ html.bb_fsc figcaption {
white-space: normal; white-space: normal;
color: var(--fg); color: var(--fg);
z-index: 1; z-index: 1;
transition: opacity .15s;
}
#bbox-overlay.immersive figcaption {
opacity: 0;
} }
#bbox-overlay figcaption a { #bbox-overlay figcaption a {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
@ -2393,7 +2397,7 @@ html.y #bbox-overlay figcaption a {
top: calc(50% - 30px); top: calc(50% - 30px);
width: 44px; width: 44px;
height: 60px; height: 60px;
transition: background-color .3s ease, color .3s ease, left .3s ease, right .3s ease; transition: background-color .3s ease, color .3s ease, opacity .3s ease;
} }
#bbox-btns button { #bbox-btns button {
transition: background-color .3s ease, color .3s ease; transition: background-color .3s ease, color .3s ease;
@ -2404,13 +2408,11 @@ html.y #bbox-overlay figcaption a {
.bbox-btn { .bbox-btn {
position: fixed; position: fixed;
} }
#bbox-next.off { #bbox-overlay.immersive #bbox-next,
right: -2.6em; #bbox-overlay.immersive #bbox-prev {
opacity: 0;
} }
#bbox-prev.off { #bbox-overlay.immersive #bbox-btns {
left: -2.6em;
}
#bbox-btns.off {
top: -2.8em; top: -2.8em;
} }
#bbox-overlay button { #bbox-overlay button {
@ -2427,6 +2429,9 @@ html.y #bbox-overlay figcaption a {
vertical-align: top; vertical-align: top;
font-variant: small-caps; font-variant: small-caps;
} }
#bbox-overlay button:hover {
opacity: 1 !important;
}
#bbox-overlay button:focus, #bbox-overlay button:focus,
#bbox-overlay button:hover { #bbox-overlay button:hover {
color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9);
@ -3454,6 +3459,22 @@ html.d #treepar {
#pctl { #pctl {
padding: .2em .5em .5em .5em; padding: .2em .5em .5em .5em;
} }
#pvol {
border: .7em solid var(--bg-u3);
transform: rotate(-90deg);
position: fixed;
bottom: 4.3em;
right: -.7em;
opacity: 0;
pointer-events: none;
box-shadow: 0 0 .5em var(--mp-sh);
}
#pvolbg:hover #pvol {
display: block;
opacity: 1;
pointer-events: all;
}
} }
@media (max-width: 32em) { @media (max-width: 32em) {
#u2conf { #u2conf {

17
copyparty/web/browser.js
View file

@ -2538,8 +2538,15 @@ var vbar = (function () {
onresize100.add(r.onresize, true); onresize100.add(r.onresize, true);
var rect; var rect;
var cs;
var left, top, width, height;
function mousedown(e) { function mousedown(e) {
rect = can.getBoundingClientRect(); rect = can.getBoundingClientRect();
cs = getComputedStyle(ebi('pvol'));
top = rect.top + parseFloat(cs.borderTopWidth);
left = rect.left + parseFloat(cs.borderLeftWidth);
height = rect.height - 2 * parseFloat(cs.borderTopWidth);
width = rect.width - 2 * parseFloat(cs.borderLeftWidth);
mousemove(e); mousemove(e);
} }
function mousemove(e) { function mousemove(e) {
@ -2551,8 +2558,14 @@ var vbar = (function () {
return; return;
} }
var x = e.clientX - rect.left, var x = e.clientX - left,
mul = x * 1.0 / rect.width; mul = x * 1.0 / width;
if(height > width) {
// vertical
var y = e.clientY - top;
mul = 1 - y * 1.0 / height;
}
if (mul > 0.98) if (mul > 0.98)
mul = 1; mul = 1;