mirror of
https://github.com/9001/copyparty.git
synced 2026-06-19 04:32:26 -06:00
remove behavior that goes to next image when image clicked in outer thirds, make buttons always visible on hover + vertical volume bar on mobile
This commit is contained in:
Til Schmitter
parent
6592e7b347
commit
c78da76754
|
|
@ -1233,9 +1233,7 @@ window.baguetteBox = (function () {
|
|||
}
|
||||
|
||||
function show_buttons(v) {
|
||||
clmod(ebi('bbox-btns'), 'off', v);
|
||||
clmod(btnPrev, 'off', v);
|
||||
clmod(btnNext, 'off', v);
|
||||
clmod(ebi('bbox-overlay'), 'immersive', v);
|
||||
}
|
||||
|
||||
function bounceAnimation(direction) {
|
||||
|
|
@ -1297,11 +1295,11 @@ window.baguetteBox = (function () {
|
|||
x = e.clientX - rc.left,
|
||||
fx = x / (rc.right - rc.left);
|
||||
|
||||
if (fx < 0.3)
|
||||
return showLeftImage();
|
||||
// if (fx < 0.3)
|
||||
// return showLeftImage();
|
||||
|
||||
if (fx > 0.7)
|
||||
return showRightImage();
|
||||
// if (fx > 0.7)
|
||||
// return showRightImage();
|
||||
|
||||
show_buttons('t');
|
||||
|
||||
|
|
|
|||
|
|
@ -1411,6 +1411,9 @@ html.y #widget.open {
|
|||
height: .5em;
|
||||
aspect-ratio: 8;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid var(--bg-u1);
|
||||
margin-left: .3em;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
#pvolbg {
|
||||
height: 100%;
|
||||
|
|
@ -1421,7 +1424,6 @@ html.y #widget.open {
|
|||
}
|
||||
#pvolbg svg {
|
||||
height: 1.3em;
|
||||
margin-right: .3em;
|
||||
}
|
||||
#widget.cmp #wtoggle {
|
||||
font-size: 1.2em;
|
||||
|
|
@ -2286,7 +2288,7 @@ html.noscroll .sbar::-webkit-scrollbar {
|
|||
flex: none;
|
||||
}
|
||||
.full-image figure {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -2298,8 +2300,6 @@ html.noscroll .sbar::-webkit-scrollbar {
|
|||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-height: calc(100% - 1.4em);
|
||||
margin-bottom: 1.4em;
|
||||
vertical-align: middle;
|
||||
transition: transform .23s, left .23s, top .23s, width .23s, height .23s;
|
||||
}
|
||||
|
|
@ -2340,6 +2340,10 @@ html.bb_fsc figcaption {
|
|||
white-space: normal;
|
||||
color: var(--fg);
|
||||
z-index: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
#bbox-overlay.immersive figcaption {
|
||||
opacity: 0;
|
||||
}
|
||||
#bbox-overlay figcaption a {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
|
@ -2393,7 +2397,7 @@ html.y #bbox-overlay figcaption a {
|
|||
top: calc(50% - 30px);
|
||||
width: 44px;
|
||||
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 {
|
||||
transition: background-color .3s ease, color .3s ease;
|
||||
|
|
@ -2404,13 +2408,11 @@ html.y #bbox-overlay figcaption a {
|
|||
.bbox-btn {
|
||||
position: fixed;
|
||||
}
|
||||
#bbox-next.off {
|
||||
right: -2.6em;
|
||||
#bbox-overlay.immersive #bbox-next,
|
||||
#bbox-overlay.immersive #bbox-prev {
|
||||
opacity: 0;
|
||||
}
|
||||
#bbox-prev.off {
|
||||
left: -2.6em;
|
||||
}
|
||||
#bbox-btns.off {
|
||||
#bbox-overlay.immersive #bbox-btns {
|
||||
top: -2.8em;
|
||||
}
|
||||
#bbox-overlay button {
|
||||
|
|
@ -2427,6 +2429,9 @@ html.y #bbox-overlay figcaption a {
|
|||
vertical-align: top;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
#bbox-overlay button:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#bbox-overlay button:focus,
|
||||
#bbox-overlay button:hover {
|
||||
color: rgba(255,255,255,0.9);
|
||||
|
|
@ -3454,6 +3459,22 @@ html.d #treepar {
|
|||
#pctl {
|
||||
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) {
|
||||
#u2conf {
|
||||
|
|
|
|||
|
|
@ -1331,7 +1331,7 @@ function goto(dest) {
|
|||
var modal = ebi(dest);
|
||||
if(modal != null)
|
||||
clmod(modal, 'vis', true);
|
||||
|
||||
|
||||
var page = ebi('op_' + dest) ?? QS('#' + dest + ' .opview')
|
||||
clmod(page, 'act', 1);
|
||||
clmod(lnk, 'act', 1);
|
||||
|
|
@ -2538,8 +2538,15 @@ var vbar = (function () {
|
|||
onresize100.add(r.onresize, true);
|
||||
|
||||
var rect;
|
||||
var cs;
|
||||
var left, top, width, height;
|
||||
function mousedown(e) {
|
||||
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);
|
||||
}
|
||||
function mousemove(e) {
|
||||
|
|
@ -2551,8 +2558,14 @@ var vbar = (function () {
|
|||
return;
|
||||
}
|
||||
|
||||
var x = e.clientX - rect.left,
|
||||
mul = x * 1.0 / rect.width;
|
||||
var x = e.clientX - left,
|
||||
mul = x * 1.0 / width;
|
||||
|
||||
if(height > width) {
|
||||
// vertical
|
||||
var y = e.clientY - top;
|
||||
mul = 1 - y * 1.0 / height;
|
||||
}
|
||||
|
||||
if (mul > 0.98)
|
||||
mul = 1;
|
||||
|
|
|
|||
Loading…
Reference in a new issue