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

more layout fixes

Browse source
This commit is contained in:
Til Schmitter 2026-05-08 23:21:23 +02:00
parent 87f377cc72
commit 7c56989cf0
2 changed files with 64 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
copyparty/web/browser.css
View file

@ -955,37 +955,30 @@ tr.play td:nth-child(1) a {
border-color: var(--g-f-b1); border-color: var(--g-f-b1);
box-shadow: 0 .1em .3em var(--g-sh); box-shadow: 0 .1em .3em var(--g-sh);
} }
#ggrid>a svg { #ggrid>a.play .thumb {
position: absolute;
max-width: 10em;
max-width: calc(var(--grid-sz) - 4px);
max-height: 8em;
max-height: calc(var(--grid-sz)/1.25);
display: block;
width: 100%;
height: 100%;
height: calc(100% - 8px);
border-radius: calc(var(--radius) / 3 * 2);
}
#ggrid>a.play svg {
background: var(--bg-u2); background: var(--bg-u2);
} }
#ggrid>a .thumb,
#ggrid>a img { #ggrid>a img {
z-index: 1; z-index: 1;
border-radius: 5px; border-radius: 5px;
border-radius: calc(var(--radius) / 3 * 2); border-radius: calc(var(--radius) / 3 * 2);
max-width: 10em; max-width: 10em;
max-width: calc(var(--grid-sz) - 4px); max-width: calc(var(--grid-sz) - 4px);
max-height: 8em;
max-height: calc(var(--grid-sz)/1.25);
margin: 0 auto; margin: 0 auto;
display: block; display: block;
width: 100%; width: 100%;
height: calc(var(--grid-sz) - 2.5em); height: calc(var(--grid-sz) - 2.5em);
object-fit: cover; object-fit: cover;
} }
#ggrid>a img {
position: absolute;
opacity: 0;
}
#ggrid>a.dir .thumb,
#ggrid>a.dir img { #ggrid>a.dir img {
max-height: calc(var(--grid-sz)/1.25 - 10px); max-width: calc(var(--grid-sz) - 20px);
margin: 10px auto 0 auto;
} }
#ggrid.noupscale>a img { #ggrid.noupscale>a img {
width: auto; width: auto;
@ -994,10 +987,6 @@ tr.play td:nth-child(1) a {
#ggrid.noupscale.gallery.nocrop>a img { #ggrid.noupscale.gallery.nocrop>a img {
object-fit: scale-down; object-fit: scale-down;
} }
#ggrid>a.dir img {
max-width: calc(var(--grid-sz) - 20px);
margin: 10px auto 0 auto;
}
#ggrid.nocrop>a img { #ggrid.nocrop>a img {
max-height: 20em; max-height: 20em;
max-height: calc(var(--grid-sz)*2); max-height: calc(var(--grid-sz)*2);
@ -3993,6 +3982,7 @@ html.e #wrap.thin {
span:not(.th_ext) { span:not(.th_ext) {
display: none; display: none;
} }
.thumb,
img { img {
max-height: none; max-height: none;
height: calc(var(--grid-sz) - 8px); height: calc(var(--grid-sz) - 8px);
@ -4009,6 +3999,7 @@ html.e #wrap.thin {
} }
a { a {
margin-bottom: .2em; margin-bottom: .2em;
.thumb,
img { img {
height: calc(var(--grid-sz) - 1.5em); height: calc(var(--grid-sz) - 1.5em);
} }
@ -4016,12 +4007,14 @@ html.e #wrap.thin {
a.img { a.img {
min-width: calc(var(--grid-sz) / 2); min-width: calc(var(--grid-sz) / 2);
width: auto; width: auto;
.thumb,
img { img {
max-width: 100%; max-width: 100%;
height: var(--grid-sz); height: var(--grid-sz);
} }
} }
a.dir { a.dir {
.thumb,
img { img {
height: calc(var(--grid-sz) - 1.5em - 10px); height: calc(var(--grid-sz) - 1.5em - 10px);
margin-left: 10px; margin-left: 10px;

8
copyparty/web/browser.js
View file

@ -6468,7 +6468,7 @@ var thegrid = (function () {
(isdir || ext == 'unk' || ext.startsWith('/') ? '' : (isdir || ext == 'unk' || ext.startsWith('/') ? '' :
'<span class="th_ext" style="font-size: ' + (r.sz / 5) +'em; font-size:calc(var(--grid-sz) / 5 * ' + '<span class="th_ext" style="font-size: ' + (r.sz / 5) +'em; font-size:calc(var(--grid-sz) / 5 * ' +
(ext.length > 3 ? 1 / (3 + ext.length * .4) * 3 : 1) + ')">' + ext + '</span>') + (ext.length > 3 ? 1 / (3 + ext.length * .4) * 3 : 1) + ')">' + ext + '</span>') +
'<img loading="lazy" onload="th_onload(this)" onerror="th_onerror(this)" src="' + '<img loading="lazy" onload="th_onload(this)" src="' +
ihref + '" /></div><span class="' + ac + '">' + ao.innerHTML + '</span></a>'); ihref + '" /></div><span class="' + ac + '">' + ao.innerHTML + '</span></a>');
} }
ggrid.innerHTML = html.join('\n'); ggrid.innerHTML = html.join('\n');
@ -6668,6 +6668,7 @@ var thegrid = (function () {
function th_onload(el) { function th_onload(el) {
el.style.position = 'static'
el.style.opacity = '1' el.style.opacity = '1'
el.style.height = ''; el.style.height = '';
el.previousSibling.style.display = el.previousSibling.style.display =
@ -6675,11 +6676,6 @@ function th_onload(el) {
'none' 'none'
} }
function th_onerror(el) {
el.style.opacity = '0'
el.style.pointerEvents = 'none'
}
function tree_scrollto(e) { function tree_scrollto(e) {
ev(e); ev(e);