Compare commits

..

No commits in common. "e8a4e382ba808367055e8e079cade865150c8feb" and "724eb1739183c11ea7010ad026d0355b93249a99" have entirely different histories.

2 changed files with 14 additions and 36 deletions

View file

@ -1,9 +1,8 @@
import type { mastodon } from "masto"; import type { mastodon } from "masto";
import { type Component, For, createSignal, onMount } from "solid-js"; import { type Component, For, createSignal } from "solid-js";
import { css } from "solid-styled"; import { css } from "solid-styled";
import tootStyle from "./toot.module.css"; import tootStyle from "./toot.module.css";
import MediaViewer from "./MediaViewer"; import MediaViewer from "./MediaViewer";
import { render } from "solid-js/web";
const MediaAttachmentGrid: Component<{ const MediaAttachmentGrid: Component<{
attachments: mastodon.v1.MediaAttachment[]; attachments: mastodon.v1.MediaAttachment[];
@ -14,35 +13,16 @@ const MediaAttachmentGrid: Component<{
const gridTemplateColumns = () => { const gridTemplateColumns = () => {
const l = props.attachments.length; const l = props.attachments.length;
if (l < 2) { if (l < 2) {
return "minmax(40px, auto)"; return "1fr";
} }
if (l < 4) { if (l < 4) {
return "repeat(2, minmax(40px, auto))"; return "repeat(2, 1fr)";
} }
return "repeat(3, minmax(40px, auto))"; return "repeat(3, 1fr)";
}; };
const openViewerFor = (index: number) => { const openViewerFor = (index: number) => {
setViewerIndex(index); setViewerIndex(index);
const container = document.createElement("div");
container.setAttribute("role", "presentation");
document.body.appendChild(container);
let dispose: () => void
dispose = render(() => {
return (
<MediaViewer
show={viewerOpened()}
index={viewerIndex() || 0}
onIndexUpdated={setViewerIndex}
media={props.attachments}
onClose={() => {
setViewerIndex(undefined);
dispose();
document.body.removeChild(container)
}}
/>
);
}, container);
}; };
css` css`
@ -76,6 +56,13 @@ const MediaAttachmentGrid: Component<{
} }
}} }}
</For> </For>
<MediaViewer
show={viewerOpened()}
index={viewerIndex() || 0}
onIndexUpdated={setViewerIndex}
media={props.attachments}
onClose={() => setViewerIndex(undefined)}
/>
</section> </section>
); );
}; };

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,19 +228,10 @@
> :where(img) { > :where(img) {
max-height: 35vh; max-height: 35vh;
min-height: 40px; min-height: 40px;
object-fit: contain; object-fit: none;
max-width: 100%; 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);
}
} }
} }