diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx index 5db3cbe..9373205 100644 --- a/src/timelines/MediaAttachmentGrid.tsx +++ b/src/timelines/MediaAttachmentGrid.tsx @@ -1,8 +1,9 @@ import type { mastodon } from "masto"; -import { type Component, For, createSignal } from "solid-js"; +import { type Component, For, createSignal, onMount } from "solid-js"; import { css } from "solid-styled"; import tootStyle from "./toot.module.css"; import MediaViewer from "./MediaViewer"; +import { render } from "solid-js/web"; const MediaAttachmentGrid: Component<{ attachments: mastodon.v1.MediaAttachment[]; @@ -13,16 +14,35 @@ 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) => { setViewerIndex(index); + const container = document.createElement("div"); + container.setAttribute("role", "presentation"); + document.body.appendChild(container); + let dispose: () => void + dispose = render(() => { + return ( + { + setViewerIndex(undefined); + dispose(); + document.body.removeChild(container) + }} + /> + ); + }, container); }; css` @@ -56,13 +76,6 @@ const MediaAttachmentGrid: Component<{ } }} - setViewerIndex(undefined)} - /> ); }; diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index 3a65937..ba8477b 100644 --- a/src/timelines/toot.module.css +++ b/src/timelines/toot.module.css @@ -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); + } } }