open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add more padding and improve layout of post card

Browse Source
This commit is contained in:
James Grugett 2022-10-12 11:59:27 -05:00
parent cee8caa3e8
commit e6a90e18e4
1 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web/components/post-card.tsx
View File

@ -8,6 +8,7 @@ import { fromNow } from 'web/lib/util/time'
import { Avatar } from './avatar'
import { Card } from './card'
import { CardHighlightOptions } from './contract/contracts-grid'
import { Col } from './layout/col'
import { Row } from './layout/row'
import { UserLink } from './user-link'
@ -22,39 +23,39 @@ export function PostCard(props: {
return (
<Card
className={clsx(
'group relative flex gap-3 py-2 px-3',
'group relative flex gap-3 py-4 px-6',
itemIds?.includes(post.id) && highlightClassName
)}
>
<Row className="flex grow justify-between">
<div className="">
<Row className="items-center text-sm ">
<Avatar
className="mx-1 h-7 w-7"
username={post.creatorUsername}
avatarUrl={post.creatorAvatarUrl}
/>
<UserLink
className=" text-gray-400"
name={post.creatorName}
username={post.creatorUsername}
/>
<span className="mx-1 text-gray-400">•</span>
<span className="text-gray-400">{fromNow(post.createdTime)}</span>
<Row className="flex grow justify-between">
<Col className="gap-2">
<Row className="items-center justify-between">
<Row className="items-center text-sm">
<Avatar
className="mx-1 h-7 w-7"
username={post.creatorUsername}
avatarUrl={post.creatorAvatarUrl}
/>
<UserLink
className="text-gray-400"
name={post.creatorName}
username={post.creatorUsername}
/>
<span className="mx-1 text-gray-400">•</span>
<span className="text-gray-400">{fromNow(post.createdTime)}</span>
</Row>
<div className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
<DocumentIcon className={'h3 w-3'} />
Post
</div>
</Row>
<div className=" break-words text-lg font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
<div className="break-words text-lg font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
{post.title}
</div>
<div className="font-small text-md break-words text-gray-500">
<div className="font-small text-md break-words text-gray-500">
{post.subtitle}
</div>
</div>
<div>
<span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
<DocumentIcon className={'h3 w-3'} />
Post
</span>
</div>
</Col>
</Row>
{onPostClick ? (
<a