CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

post-list <li> a11y improvements

Browse source
This commit is contained in:
Max Leiter 2023-05-20 15:50:57 -07:00
parent 69ca511cc2
commit 504d2742f4
1 changed files with 78 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
src/app/components/post-list/list-item.tsx
View file

@ -66,91 +66,89 @@ const ListItem = ({
} }
return ( return (
<FadeIn key={post.id}> <FadeIn key={post.id} as="li">
<li> <Card style={{ overflowY: "scroll" }}>
<Card style={{ overflowY: "scroll" }}> <>
<> <div className={styles.title}>
<div className={styles.title}> <span className={styles.titleText}>
<span className={styles.titleText}> <h4 style={{ display: "inline-block", margin: 0 }}>
<h4 style={{ display: "inline-block", margin: 0 }}> <Link
<Link colored
colored style={{ marginRight: "var(--gap)" }}
style={{ marginRight: "var(--gap)" }} href={`/post/${post.id}`}
href={`/post/${post.id}`} >
> {post.title}
{post.title} </Link>
</Link> </h4>
</h4> <div className={styles.badges}>
<div className={styles.badges}> <VisibilityBadge visibility={post.visibility} />
<VisibilityBadge visibility={post.visibility} /> <Badge type="secondary">
<Badge type="secondary"> {post.files?.length === 1
{post.files?.length === 1 ? "1 file"
? "1 file" : `${post.files?.length || 0} files`}
: `${post.files?.length || 0} files`} </Badge>
</Badge> <CreatedAgoBadge createdAt={post.createdAt} />
<CreatedAgoBadge createdAt={post.createdAt} /> <ExpirationBadge postExpirationDate={post.expiresAt} />
<ExpirationBadge postExpirationDate={post.expiresAt} /> </div>
</div> </span>
</span> {!hideActions ? (
{!hideActions ? ( <span className={styles.buttons}>
<span className={styles.buttons}> {post.parentId && (
{post.parentId && ( <Tooltip content={"View parent"}>
<Tooltip content={"View parent"}>
<Button
iconRight={<ArrowUpCircle />}
onClick={viewParentClick}
// TODO: not perfect on mobile
height={38}
/>
</Tooltip>
)}
<Tooltip content={"Make a copy"}>
<Button <Button
iconRight={<Edit />} iconRight={<ArrowUpCircle />}
onClick={editACopy} onClick={viewParentClick}
// TODO: not perfect on mobile
height={38} height={38}
/> />
</Tooltip> </Tooltip>
{isOwner && ( )}
<Tooltip content={"Delete"}> <Tooltip content={"Make a copy"}>
<Button <Button
iconRight={<Trash />} iconRight={<Edit />}
onClick={deletePost} onClick={editACopy}
height={38} height={38}
/> />
</Tooltip> </Tooltip>
)} {isOwner && (
</span> <Tooltip content={"Delete"}>
) : null} <Button
</div> iconRight={<Trash />}
onClick={deletePost}
height={38}
/>
</Tooltip>
)}
</span>
) : null}
</div>
{post.description && ( {post.description && (
<p className={styles.oneline}>{post.description}</p> <p className={styles.oneline}>{post.description}</p>
)} )}
</> </>
<ul className={styles.files}> <ul className={styles.files}>
{post?.files?.map( {post?.files?.map(
(file: Pick<PostWithFiles, "files">["files"][0]) => { (file: Pick<PostWithFiles, "files">["files"][0]) => {
return ( return (
<li key={file.id}> <li key={file.id}>
<Link <Link
colored colored
href={`/post/${post.id}#${file.title}`} href={`/post/${post.id}#${file.title}`}
style={{ style={{
display: "flex", display: "flex",
alignItems: "center" alignItems: "center"
}} }}
> >
{getIconFromFilename(file.title)} {getIconFromFilename(file.title)}
{file.title || "Untitled file"} {file.title || "Untitled file"}
</Link> </Link>
</li> </li>
) )
} }
)} )}
</ul> </ul>
</Card> </Card>
</li>
</FadeIn> </FadeIn>
) )
} }