monoid/ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

feat: improve line clamp

Browse Source
This commit is contained in:
monoid 2024-04-08 00:08:44 +09:00
parent 7598df6018
commit 5d54f6666f
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/client/src/components/gallery/GalleryCard.tsx
View File

@ -1,7 +1,7 @@
import type { Document } from "dbtype/api"; import type { Document } from "dbtype/api";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
import TagBadge from "@/components/gallery/TagBadge.tsx"; import TagBadge from "@/components/gallery/TagBadge.tsx";
import { Fragment, useEffect, useRef, useState } from "react"; import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
import { LazyImage } from "./LazyImage.tsx"; import { LazyImage } from "./LazyImage.tsx";
import StyledLink from "./StyledLink.tsx"; import StyledLink from "./StyledLink.tsx";
@ -20,7 +20,7 @@ function clipTagsWhenOverflow(tags: string[], limit: number) {
export function GalleryCard({ export function GalleryCard({
doc: x doc: x
}: { doc: Document; }) { }: { doc: Document; }) {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLUListElement>(null);
const [clipCharCount, setClipCharCount] = useState(200); const [clipCharCount, setClipCharCount] = useState(200);
const artists = x.tags.filter(x => x.startsWith("artist:")).map(x => x.replace("artist:", "")); const artists = x.tags.filter(x => x.startsWith("artist:")).map(x => x.replace("artist:", ""));
@ -29,15 +29,16 @@ export function GalleryCard({
const originalTags = x.tags.filter(x => !x.startsWith("artist:") && !x.startsWith("group:")); const originalTags = x.tags.filter(x => !x.startsWith("artist:") && !x.startsWith("group:"));
const clippedTags = clipTagsWhenOverflow(originalTags, clipCharCount); const clippedTags = clipTagsWhenOverflow(originalTags, clipCharCount);
useEffect(() => { useLayoutEffect(() => {
const listener = () => { const listener = () => {
if (ref.current) { if (ref.current) {
const { width } = ref.current.getBoundingClientRect(); const { width } = ref.current.getBoundingClientRect();
const charWidth = 8; // rough estimate const charWidth = 7; // rough estimate
const newClipCharCount = Math.floor(width / charWidth) * 3; const newClipCharCount = Math.floor(width / charWidth) * 3;
setClipCharCount(newClipCharCount); setClipCharCount(newClipCharCount);
} }
}; };
listener();
window.addEventListener("resize", listener); window.addEventListener("resize", listener);
return () => { return () => {
window.removeEventListener("resize", listener); window.removeEventListener("resize", listener);
@ -54,7 +55,7 @@ export function GalleryCard({
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
<CardHeader className="flex-none"> <CardHeader className="flex-none">
<CardTitle> <CardTitle>
<StyledLink className="" to={`/doc/${x.id}`}> <StyledLink className="line-clamp-2" to={`/doc/${x.id}`}>
{x.title} {x.title}
</StyledLink> </StyledLink>
</CardTitle> </CardTitle>
@ -71,10 +72,10 @@ export function GalleryCard({
)} )}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex-1" ref={ref}> <CardContent className="flex-1 overflow-hidden">
<ul className="flex flex-wrap gap-2 items-baseline content-start"> <ul ref={ref} className="flex flex-wrap gap-2 items-baseline content-start">
{clippedTags.map(tag => <TagBadge key={tag} tagname={tag} className="" />)} {clippedTags.map(tag => <TagBadge key={tag} tagname={tag} className="" />)}
{clippedTags.length < originalTags.length && <TagBadge key={"..."} tagname="..." className="" disabled />} {clippedTags.length < originalTags.length && <TagBadge key={"..."} tagname="..." className="inline-block" disabled />}
</ul> </ul>
</CardContent> </CardContent>
</div> </div>