Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

MediaAttachmentGrid: optimize preview layout (#11)

Browse source
This commit is contained in:
thislight 2024-09-14 20:09:54 +08:00
parent a7b0f480ac
commit 06e2460b04
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 gridTemplateColumns = () => {
const l = props.attachments.length; const l = props.attachments.length;
if (l < 2) { if (l < 2) {
return "1fr"; return "minmax(40px, auto)";
} }
if (l < 4) { 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) => { 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)); max-height: calc(4 * var(--title-line-height) * var(--title-size));
} }
> p { >p {
max-height: calc(8 * var(--body-line-height) * var(--body-size)); max-height: calc(8 * var(--body-line-height) * var(--body-size));
} }
@ -228,10 +228,19 @@
> :where(img) { > :where(img) {
max-height: 35vh; max-height: 35vh;
min-height: 40px; min-height: 40px;
object-fit: none; object-fit: contain;
width: 100%; max-width: 100%;
background-color: var(--tutu-color-surface-d); background-color: var(--tutu-color-surface-d);
border-radius: 2px; 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);
}
} }
} }