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

misc layout fixes for viewmodes

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

27
copyparty/web/browser.css
View file

@ -964,6 +964,11 @@ tr.play td:nth-child(1) a {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
height: calc(100% - 8px);
border-radius: calc(var(--radius) / 3 * 2);
}
#ggrid>a.play svg {
background: var(--bg-u2);
} }
#ggrid>a img { #ggrid>a img {
z-index: 1; z-index: 1;
@ -976,9 +981,12 @@ tr.play td:nth-child(1) a {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: calc(var(--grid-sz) - 2.5em);
object-fit: cover; object-fit: cover;
} }
#ggrid>a.dir img {
max-height: calc(var(--grid-sz)/1.25 - 10px);
}
#ggrid.noupscale>a img { #ggrid.noupscale>a img {
width: auto; width: auto;
height: auto; height: auto;
@ -994,6 +1002,7 @@ tr.play td:nth-child(1) a {
max-height: 20em; max-height: 20em;
max-height: calc(var(--grid-sz)*2); max-height: calc(var(--grid-sz)*2);
object-fit: contain; object-fit: contain;
height: 100%;
} }
.imgcontainer { .imgcontainer {
@ -1005,6 +1014,7 @@ tr.play td:nth-child(1) a {
box-sizing: border-box; box-sizing: border-box;
margin: -3px -2px; margin: -3px -2px;
padding: 4px 3px; padding: 4px 3px;
justify-content: center;
} }
.th_ext { .th_ext {
position: absolute; position: absolute;
@ -3972,7 +3982,7 @@ html.e #wrap.thin {
gap: 1em; gap: 1em;
} }
#ggrid.gallery { #ggrid.gallery {
gap: 1px 2px; gap: 2px 3px;
margin: -.2em -.5em; margin: -.2em -.5em;
a::before { a::before {
padding: .1em 0; padding: .1em 0;
@ -3983,6 +3993,10 @@ html.e #wrap.thin {
span:not(.th_ext) { span:not(.th_ext) {
display: none; display: none;
} }
img {
max-height: none;
height: calc(var(--grid-sz) - 8px);
}
} }
} }
#ggrid.gallery.nocrop { #ggrid.gallery.nocrop {
@ -3995,18 +4009,21 @@ html.e #wrap.thin {
} }
a { a {
margin-bottom: .2em; margin-bottom: .2em;
img {
height: calc(var(--grid-sz) - 1.5em);
}
} }
a.img, a.dir { a.img {
min-width: calc(var(--grid-sz) / 2); min-width: calc(var(--grid-sz) / 2);
width: auto; width: auto;
img { img {
max-width: 100%; max-width: 100%;
height: calc(var(--grid-sz) - 1em); height: var(--grid-sz);
} }
} }
a.dir { a.dir {
img { img {
height: calc(var(--grid-sz) - 1.5em - 10px);
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }

3
copyparty/web/browser.js
View file

@ -6468,8 +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 style="height:' + '<img loading="lazy" onload="th_onload(this)" onerror="th_onerror(this)" src="' +
(r.sz / 1.25) + 'em" loading="lazy" onload="th_onload(this)" onerror="th_onerror(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');