style: 🎨 Entry Card Mobile UX

- Entry card actions always show on mobile
subhamBharadwaz · Aug 17, 2024 · 765e683 · 765e683
1 parent 96941d2
commit 765e683
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/app/(journal)/_components/entry-operations.tsx b/src/app/(journal)/_components/entry-operations.tsx
@@ -150,15 +150,15 @@ export function EntryOperations({
         <Button
           size="icon"
           onClick={() => setShowDeleteAlert(true)}
-          className="rounded-full opacity-0 transition-all duration-300 hover:-translate-y-0.5 group-hover:opacity-100"
+          className="rounded-full opacity-100 transition-all duration-300 hover:-translate-y-0.5 group-hover:opacity-100 md:opacity-0"
         >
           <Trash className="size-4" />
         </Button>
         <Button
           size="icon"
           onClick={handleBookmarkToggle}
           disabled={isTransitionPending}
-          className="rounded-full opacity-0 transition-all duration-300 hover:-translate-y-0.5 group-hover:opacity-100"
+          className="rounded-full opacity-100 transition-all duration-300 hover:-translate-y-0.5 group-hover:opacity-100 md:opacity-0"
         >
           <BookmarkIcon
             className={cn(

diff --git a/src/app/(journal)/_components/journal-entry-card.tsx b/src/app/(journal)/_components/journal-entry-card.tsx
@@ -61,25 +61,27 @@ export function JournalEntryCard({
         className
       )}
     >
-      <Link
-        href={`/editor/${entry.id}`}
-        className="text-lg font-semibold hover:underline lg:text-xl"
-      >
-        {" "}
-        {entry.title}
-      </Link>
+      <div className="grow">
+        <Link
+          href={`/editor/${entry.id}`}
+          className="text-lg font-semibold hover:underline lg:text-xl"
+        >
+          {" "}
+          {entry.title}
+        </Link>
+        <p className="text-sm text-muted-foreground lg:text-base">
+          {/* @ts-ignore */}
+          {entry.content?.blocks[0]?.data.text}
+        </p>
+      </div>
       {isBookmarked && (
         <div className="absolute right-4 top-0 rounded-full bg-muted p-2">
           <BookmarkIcon className="size-4 fill-foreground text-foreground" />
         </div>
       )}
-      <p className="text-sm text-muted-foreground lg:text-base">
-        {/* @ts-ignore */}
-        {entry.content?.blocks[0]?.data.text}
-      </p>
 
-      <div className="absolute bottom-5 right-4 flex items-center  justify-between transition-all duration-300 group-hover:block">
-        <p className="block text-sm text-muted-foreground transition-all duration-300 group-hover:hidden">
+      <div className="mt-auto flex w-full items-center justify-between self-end transition-all duration-300 group-hover:block">
+        <p className="text-sm text-muted-foreground transition-all duration-300 group-hover:hidden">
           {formatDate(entry.createdAt?.toDateString())}
         </p>
         <EntryOperations