Rubicon/tutu
1
0
Fork 0
Code Issues 13 Pull requests Projects 2 Releases Activity Actions

MediaAttachmentGrid: optimize preview layout (#11)

Browse source
This commit is contained in:
thislight 2024-09-14 20:09:54 +08:00
parent 724eb17391
commit bf7e694e00
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/timelines/MediaAttachmentGrid.tsx
View file

@ -13,12 +13,12 @@ const MediaAttachmentGrid: Component<{
const gridTemplateColumns = () => {
const l = props.attachments.length;
if (l < 2) {
return "1fr";
return "minmax(40px, auto)";
}
if (l < 4) {
return "repeat(2, 1fr)";
return "repeat(2, minmax(40px, auto))";
}
return "repeat(3, 1fr)";
return "repeat(3, minmax(40px, auto))";
};
const openViewerFor = (index: number) => {

15
src/timelines/toot.module.css
View file

@ -140,7 +140,7 @@
max-height: calc(4 * var(--title-line-height) * var(--title-size));
}
> p {
>p {
max-height: calc(8 * var(--body-line-height) * var(--body-size));
}
@ -228,10 +228,19 @@
> :where(img) {
max-height: 35vh;
min-height: 40px;
object-fit: none;
width: 100%;
object-fit: contain;
max-width: 100%;
background-color: var(--tutu-color-surface-d);
border-radius: 2px;
border: 1px solid transparent;
transition: border-color 220ms var(--tutu-anim-curve-std),
box-shadow 220ms var(--tutu-anim-curve-std);
&:hover,
&:focus-visible {
border: 1px solid var(--tutu-color-surface-dd);
box-shadow: var(--tutu-shadow-e1);
}
}
}