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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.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 StyledLink from "./StyledLink.tsx";
@ -20,7 +20,7 @@ function clipTagsWhenOverflow(tags: string[], limit: number) {
export function GalleryCard({
doc: x
}: { doc: Document; }) {
const ref = useRef<HTMLDivElement>(null);
const ref = useRef<HTMLUListElement>(null);
const [clipCharCount, setClipCharCount] = useState(200);
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 clippedTags = clipTagsWhenOverflow(originalTags, clipCharCount);
useEffect(() => {
useLayoutEffect(() => {
const listener = () => {
if (ref.current) {
const { width } = ref.current.getBoundingClientRect();
const charWidth = 8; // rough estimate
const charWidth = 7; // rough estimate
const newClipCharCount = Math.floor(width / charWidth) * 3;
setClipCharCount(newClipCharCount);
}
};
listener();
window.addEventListener("resize", listener);
return () => {
window.removeEventListener("resize", listener);
@ -54,7 +55,7 @@ export function GalleryCard({
<div className="flex-1 flex flex-col">
<CardHeader className="flex-none">
<CardTitle>
<StyledLink className="" to={`/doc/${x.id}`}>
<StyledLink className="line-clamp-2" to={`/doc/${x.id}`}>
{x.title}
</StyledLink>
</CardTitle>
@ -71,10 +72,10 @@ export function GalleryCard({
)}
</CardDescription>
</CardHeader>
<CardContent className="flex-1" ref={ref}>
<ul className="flex flex-wrap gap-2 items-baseline content-start">
<CardContent className="flex-1 overflow-hidden">
<ul ref={ref} className="flex flex-wrap gap-2 items-baseline content-start">
{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>
</CardContent>
</div>