From 13ebfb3ad50c80aa331883e77f4e2e314acd45d5 Mon Sep 17 00:00:00 2001
From: Vignesh Udhay <vignesh.uday94@gmail.com>
Date: Thu, 10 Oct 2024 23:08:15 +0530
Subject: [PATCH 1/2] fix(upvote button): make upvote button smaller and not
shrink when description is long.
Fixes #4 #5.
---
app/[slug]/[board]/(main)/[...post]/page.tsx | 24 +++++++++++---------
components/posts/card.tsx | 22 +++++++++---------
components/posts/upvote.tsx | 15 ++++++------
3 files changed, 32 insertions(+), 29 deletions(-)
diff --git a/app/[slug]/[board]/(main)/[...post]/page.tsx b/app/[slug]/[board]/(main)/[...post]/page.tsx
index ef2e6ec..3e4a68d 100644
--- a/app/[slug]/[board]/(main)/[...post]/page.tsx
+++ b/app/[slug]/[board]/(main)/[...post]/page.tsx
@@ -41,7 +41,7 @@ export default async function PostPage({
}
const isUpvoted = post?.upvotes.some(
- (upvote) => upvote.user.id === session?.user?.id,
+ (upvote) => upvote.user.id === session?.user?.id
);
return (
@@ -52,18 +52,20 @@ export default async function PostPage({
Back
</Button>
</Link>
- <header className="flex flex-col items-start rounded-t-lg border-b border-gray-200 bg-gray-100 px-4 py-4 pb-8 dark:border-gray-700 dark:bg-[#0A0A0A] dark:text-gray-200 sm:flex-row sm:items-center sm:px-6">
- <UpvoteButton
- isUpvoted={isUpvoted}
- postId={post.id}
- upvoteCount={post?._count.upvotes}
- userId={session?.user?.id as string}
- />
- <div className="ml-0 mt-4 sm:ml-4 sm:mt-0">
+ <header className="flex gap-4 rounded-t-lg border-b border-gray-200 bg-gray-100 px-4 py-4 pb-8 dark:border-gray-700 dark:bg-[#0A0A0A] dark:text-gray-200 sm:flex-row sm:items-center sm:px-6">
+ <div className="flex-shrink-0">
+ <UpvoteButton
+ isUpvoted={isUpvoted}
+ postId={post.id}
+ upvoteCount={post?._count.upvotes}
+ userId={session?.user?.id as string}
+ />
+ </div>
+ <div className="flex-grow min-w-0 mt-4 sm:mt-0">
<h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 sm:text-2xl">
{post.title}
</h2>
- <p className="mt-1 flex flex-wrap text-sm text-gray-600 dark:text-gray-300">
+ <p className="mt-1 break-words whitespace-pre-wrap text-sm text-gray-600 dark:text-gray-300">
{post?.description
?.split(/(https?:\/\/[^\s]+)/g)
.map((part, index) =>
@@ -73,7 +75,7 @@ export default async function PostPage({
</LinkRenderer>
) : (
part
- ),
+ )
)}
</p>
<p className="mt-1 text-xs text-gray-600 dark:text-gray-300 sm:text-sm">
diff --git a/components/posts/card.tsx b/components/posts/card.tsx
index a14e3be..450e835 100644
--- a/components/posts/card.tsx
+++ b/components/posts/card.tsx
@@ -43,21 +43,20 @@ export const PostsCard: React.FC<PostsCardProps> = ({
}) => {
const upvoteCount = post?.upvoteCount ? post.upvoteCount : 0;
const isUpvoted = post?.upvotes.some(
- (upvote) => upvote.userId === currentUserId,
+ (upvote) => upvote.userId === currentUserId
);
const ListLayout = () => (
<Card className="data-[hover-state-enabled=true]:hover:drop-shadow-card-hover mb-2 w-full rounded-xl border border-gray-200 bg-white transition-[filter] dark:border-gray-800 dark:bg-black">
<CardHeader className="flex flex-row items-center gap-3 p-3">
- <div className="flex w-full items-center justify-start">
- <div className="mr-2 flex-shrink-0">
- <UpvoteButton
- isUpvoted={isUpvoted}
- postId={post?.id}
- upvoteCount={upvoteCount}
- userId={currentUserId}
- />
- </div>
+ <div className="flex w-full items-center justify-start gap-4">
+ <UpvoteButton
+ isUpvoted={isUpvoted}
+ postId={post?.id}
+ upvoteCount={upvoteCount}
+ userId={currentUserId}
+ />
+
<div className="min-w-0 flex-grow">
<CardTitle className="flex items-center gap-2 truncate text-base">
{post.title}
@@ -94,7 +93,8 @@ export const PostsCard: React.FC<PostsCardProps> = ({
</div>
</div>
</div>
- <div className="ml-2 flex-shrink-0">
+
+ <div className="flex-shrink-0">
{hasAccess && (
<Options
currentUserId={currentUserId}
diff --git a/components/posts/upvote.tsx b/components/posts/upvote.tsx
index 4156621..eb37153 100644
--- a/components/posts/upvote.tsx
+++ b/components/posts/upvote.tsx
@@ -80,23 +80,24 @@ export const UpvoteButton = ({
return (
<>
<Button
- className={`h-12 w-12 rounded-xl ${isActive ? "border-blue-200 bg-blue-100" : ""}`}
+ className={`h-12 w-10 flex-col rounded-xl ${isActive ? "border-blue-200 bg-blue-100" : ""}`}
size="icon"
variant={"outline"}
onClick={
session.status === "authenticated" ? handleUpvote : handleLoginDialog
}
>
- <span className="flex flex-col items-center">
- <ChevronUp
- className={`h-4 w-4 ${isActive ? "font-bold text-blue-500" : ""}`}
- />
+ <ChevronUp
+ className={isActive ? "font-bold text-blue-500" : ""}
+ size={16}
+ />
+ {count && (
<span
className={`text-xs ${isActive ? "font-bold text-blue-500" : ""}`}
>
- {count ? numify(count) : null}
+ {numify(count)}
</span>
- </span>
+ )}
</Button>
<LoginDialog open={showLoginDialog} onOpenChange={setShowLoginDialog} />
</>
From fa727243812ecf50648ec76a5829c600e61a9fdf Mon Sep 17 00:00:00 2001
From: Vignesh Udhay <vignesh.uday94@gmail.com>
Date: Sat, 12 Oct 2024 22:25:20 +0530
Subject: [PATCH 2/2] fix(board card): removed empty space below card
---
components/boards/card.tsx | 71 ++++++++++++++++++--------------------
1 file changed, 33 insertions(+), 38 deletions(-)
diff --git a/components/boards/card.tsx b/components/boards/card.tsx
index 67ce6bc..ce85d93 100644
--- a/components/boards/card.tsx
+++ b/components/boards/card.tsx
@@ -1,14 +1,15 @@
-import { numify } from "numify";
import { useSession } from "next-auth/react";
+import { numify } from "numify";
import {
Card,
- CardHeader,
+ CardDescription,
CardFooter,
- CardContent,
+ CardHeader,
+ CardTitle,
} from "@/components/ui/card";
-import { Board } from "@/types/board";
import { formatBoardType } from "@/helpers/common/formatBoardType";
+import { Board } from "@/types/board";
import { Badge } from "../ui/badge";
@@ -60,47 +61,41 @@ export const BoardsCard: React.FC<BoardsCardProps> = ({
);
const GridLayout = () => (
- <Card className="flex h-full flex-col overflow-hidden rounded-xl bg-card">
- <CardHeader className="p-4">
- <h3 className="text-lg font-bold">
- {board.name.substring(0, 28)}
- {board.name.length > 28 ? "..." : ""}
- </h3>
- </CardHeader>
- <CardContent>
- <p>
+ <Card className="h-full flex flex-col">
+ <CardHeader className="grow">
+ <CardTitle className="truncate">{board.name}</CardTitle>
+ <CardDescription>
{board.description.length > 100
? `${board.description.substring(0, 100)}...`
: board.description}
- </p>
- </CardContent>
- <CardFooter className="bg-secondary p-4">
- <div className="flex w-full flex-row justify-between">
- <div className="flex flex-row gap-2">
- {session && !board?.isPrivate && (
- <Badge
- className="bg-green-200 text-xs text-green-900"
- variant="outline"
- >
- Public
- </Badge>
- )}
- {board?.isPrivate && (
- <Badge
- className="bg-red-100 text-xs text-red-700"
- variant="outline"
- >
- Private
- </Badge>
- )}
- <Badge className="text-xs" variant="outline">
- {formatBoardType(board.boardType)}
+ </CardDescription>
+ </CardHeader>
+ <CardFooter className="bg-secondary pt-6 justify-between">
+ <div className="flex gap-2">
+ {session && !board?.isPrivate && (
+ <Badge
+ className="bg-green-200 text-xs text-green-900"
+ variant="outline"
+ >
+ Public
+ </Badge>
+ )}
+ {board?.isPrivate && (
+ <Badge
+ className="bg-red-100 text-xs text-red-700"
+ variant="outline"
+ >
+ Private
</Badge>
- </div>
+ )}
<Badge className="text-xs" variant="outline">
- {board?._count?.posts ? numify(board?._count.posts) : "0"}
+ {formatBoardType(board.boardType)}
</Badge>
</div>
+
+ <Badge className="text-xs" variant="outline">
+ {board?._count?.posts ? numify(board?._count.posts) : "0"}
+ </Badge>
</CardFooter>
</Card>
);