diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx index 9373205..5db3cbe 100644 --- a/src/timelines/MediaAttachmentGrid.tsx +++ b/src/timelines/MediaAttachmentGrid.tsx @@ -1,9 +1,8 @@ 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 tootStyle from "./toot.module.css"; import MediaViewer from "./MediaViewer"; -import { render } from "solid-js/web"; const MediaAttachmentGrid: Component<{ attachments: mastodon.v1.MediaAttachment[]; @@ -14,35 +13,16 @@ const MediaAttachmentGrid: Component<{ const gridTemplateColumns = () => { const l = props.attachments.length; if (l < 2) { - return "minmax(40px, auto)"; + return "1fr"; } 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) => { 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` @@ -76,6 +56,13 @@ const MediaAttachmentGrid: Component<{ } }} + setViewerIndex(undefined)} + /> ); }; diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index ba8477b..3a65937 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,19 +228,10 @@ > :where(img) { max-height: 35vh; min-height: 40px; - object-fit: contain; - max-width: 100%; + object-fit: none; + 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); - } } }