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

MediaAttachmentGrid: remove css modules

Browse source
This commit is contained in:
thislight 2024-11-12 19:12:49 +08:00
parent 2aa2cf21da
commit 9bc93cae82
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
3 changed files with 31 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/timelines/MediaAttachmentGrid.css Normal file
View file

@ -0,0 +1,27 @@
.MediaAttachmentGrid {
/* Note: MeidaAttachmentGrid has hard-coded layout calcalation */
margin-top: 1em;
margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
margin-right: var(--card-pad, 0);
gap: 4px;
> :where(img, video) {
max-height: 35vh;
min-height: 40px;
min-width: 40px;
object-fit: contain;
max-width: 100%;
background-color: var(--tutu-color-surface-d);
border-radius: 2px;
border: 1px solid var(--tutu-color-surface-d);
transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
contain: strict;
content-visibility: auto;
&:hover,
&:focus-visible {
outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
border-color: var(--media-color-accent, var(--tutu-color-surface-d));
}
}
}

20
src/timelines/MediaAttachmentGrid.tsx
View file

@ -10,8 +10,6 @@ import {
createSignal,
onCleanup,
} from "solid-js";
import { css } from "solid-styled";
import tootStyle from "./toot.module.css";
import MediaViewer from "./MediaViewer";
import { render } from "solid-js/web";
import {
@ -21,6 +19,8 @@ import {
import { useStore } from "@nanostores/solid";
import { $settings } from "../settings/stores";
import { averageColorHex } from "../platform/blurhash";
import "./MediaAttachmentGrid.css";
import cardStyle from "../material/cards.module.css";
type ElementSize = { width: number; height: number };
@ -114,13 +114,6 @@ const MediaAttachmentGrid: Component<{
itemMaxSize(),
);
// I don't know why mastodon does not return this
// and the condition for it to return this.
// Anyway, It is useless now.
// My hope is the FastAverageColor, but
// we may need better tool to manage the performance impact
// before using this. See #37.
// TODO: use fast average color to extract accent color
const accentColor =
item.meta?.colors?.accent ??
(item.blurhash ? averageColorHex(item.blurhash) : undefined);
@ -134,16 +127,11 @@ const MediaAttachmentGrid: Component<{
accentColor ? { "--media-color-accent": accentColor } : {},
);
};
css`
.attachments {
column-count: ${columnCount().toString()};
}
`;
return (
<section
ref={setRootRef}
class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")}
class={`MediaAttachmentGrid ${cardStyle.cardNoPad}`}
style={{ "column-count": columnCount() }}
onClick={(e) => {
if (e.target !== e.currentTarget) {
e.stopImmediatePropagation();

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

@ -238,35 +238,6 @@
}
}
.tootAttachmentGrp {
/* Note: MeidaAttachmentGrid has hard-coded layout calcalation */
composes: cardNoPad from "../material/cards.module.css";
margin-top: 1em;
margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
margin-right: var(--card-pad, 0);
gap: 4px;
> :where(img, video) {
max-height: 35vh;
min-height: 40px;
min-width: 40px;
object-fit: contain;
max-width: 100%;
background-color: var(--tutu-color-surface-d);
border-radius: 2px;
border: 1px solid var(--tutu-color-surface-d);
transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
contain: strict;
content-visibility: auto;
&:hover,
&:focus-visible {
outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
border: none;
}
}
}
.tootBottomActionGrp {
composes: cardGutSkip from "../material/cards.module.css";
padding-block: calc((var(--card-gut) - 10px) / 2);