mobile styles updated

likeandscribe · Nov 14, 2024 · a7e4b4e · a7e4b4e
1 parent 3379058
commit a7e4b4e
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 104 deletions.
diff --git a/packages/frontpage/app/(app)/_components/post-card.tsx b/packages/frontpage/app/(app)/_components/post-card.tsx
@@ -49,41 +49,66 @@ export async function PostCard({
 
   return (
     // TODO: Make article route to postHref via onClick on card except innser links or buttons
-    <article className="flex items-center gap-4 shadow-sm rounded-lg p-4 bg-white dark:bg-slate-900">
-      <div className="flex flex-col items-center">
-        <VoteButton
-          voteAction={async () => {
-            "use server";
-            await ensureUser();
-            await createVote({
-              subjectAuthorDid: author,
-              subjectCid: cid,
-              subjectRkey: rkey,
-              subjectCollection: PostCollection,
-            });
-          }}
-          unvoteAction={async () => {
-            "use server";
-            await ensureUser();
-            const vote = await getVoteForPost(id);
-            if (!vote) {
-              // TODO: Show error notification
-              console.error("Vote not found for post", id);
-              return;
-            }
-            await deleteVote(vote.rkey);
-          }}
-          initialState={
-            (await getUser())?.did === author
-              ? "authored"
-              : isUpvoted
-                ? "voted"
-                : "unvoted"
-          }
-          votes={votes}
-        />
+    <article className="w-full py-2 px-2 bg-white dark:bg-slate-900 space-y-2">
+      <div className="flex justify-between">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-6">
+            <VoteButton
+              voteAction={async () => {
+                "use server";
+                await ensureUser();
+                await createVote({
+                  subjectAuthorDid: author,
+                  subjectCid: cid,
+                  subjectRkey: rkey,
+                  subjectCollection: PostCollection,
+                });
+              }}
+              unvoteAction={async () => {
+                "use server";
+                await ensureUser();
+                const vote = await getVoteForPost(id);
+                if (!vote) {
+                  // TODO: Show error notification
+                  console.error("Vote not found for post", id);
+                  return;
+                }
+                await deleteVote(vote.rkey);
+              }}
+              initialState={
+                (await getUser())?.did === author
+                  ? "authored"
+                  : isUpvoted
+                    ? "voted"
+                    : "unvoted"
+              }
+              votes={votes}
+            />
+
+            <Link href={postHref} className="hover:underline">
+              {commentCount} comments
+            </Link>
+          </div>
+        </div>
+
+        {user ? (
+          <EllipsisDropdown>
+            <ShareDropdownButton path={postHref} />
+            <ReportDialogDropdownButton
+              reportAction={reportPostAction.bind(null, {
+                rkey,
+                cid,
+                author,
+              })}
+            />
+            {user?.did === author ? (
+              <DeleteButton deleteAction={deletePostAction.bind(null, rkey)} />
+            ) : null}
+          </EllipsisDropdown>
+        ) : null}
       </div>
-      <div className="w-full">
+
+      <div className="px-3">
         <h2 className="mb-1 text-xl">
           <a
             href={url}
@@ -94,51 +119,17 @@ export async function PostCard({
               ({new URL(url).host})
             </span>
           </a>
-        </h2>
-        <div className="flex flex-wrap text-gray-500 dark:text-gray-400 sm:gap-4">
-          <div className="flex gap-2 flex-wrap md:flex-nowrap">
-            <div className="flex gap-2 items-center">
-              <span aria-hidden>•</span>
-              <UserHoverCard did={author} asChild>
-                <Link href={`/profile/${handle}`} className="hover:underline">
-                  by {handle}
-                </Link>
-              </UserHoverCard>
-            </div>
-          </div>
-          <div className="w-full flex items-center justify-between gap-2 md:gap-4 sm:w-auto">
-            <div className="flex gap-2">
-              <span aria-hidden>•</span>
-              <TimeAgo createdAt={createdAt} side="bottom" />
-            </div>
-            <div className="flex gap-2">
-              <span aria-hidden>•</span>
-              <Link href={postHref} className="hover:underline">
-                {commentCount} comments
-              </Link>
-            </div>
-          </div>
+        </h2>{" "}
+      </div>
 
-          {user ? (
-            <div className="ml-auto">
-              <EllipsisDropdown>
-                <ShareDropdownButton path={postHref} />
-                <ReportDialogDropdownButton
-                  reportAction={reportPostAction.bind(null, {
-                    rkey,
-                    cid,
-                    author,
-                  })}
-                />
-                {user?.did === author ? (
-                  <DeleteButton
-                    deleteAction={deletePostAction.bind(null, rkey)}
-                  />
-                ) : null}
-              </EllipsisDropdown>
-            </div>
-          ) : null}
-        </div>
+      <div className="px-3 space-x-2">
+        <UserHoverCard did={author} asChild>
+          <Link href={`/profile/${handle}`} className="text-xs hover:underline">
+            by {handle}
+          </Link>
+        </UserHoverCard>
+        <span aria-hidden>•</span>
+        <TimeAgo createdAt={createdAt} side="bottom" className="text-xs" />
       </div>
     </article>
   );

diff --git a/packages/frontpage/app/(app)/_components/vote-button.tsx b/packages/frontpage/app/(app)/_components/vote-button.tsx
@@ -66,7 +66,7 @@ export function VoteButton({
           setHasOptimisticallyVoted(true);
         }
       }}
-      className="contents"
+      className="flex items-center"
     >
       <Button
         variant="ghost"

diff --git a/packages/frontpage/app/(app)/about/page.tsx b/packages/frontpage/app/(app)/about/page.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function CommunityGuidelinesPage() {
   return (
-    <>
+    <div className="px-4 pt-20">
       <Heading1>About Frontpage</Heading1>
       <Paragraph>
         Frontpage is a decentralised and federated link aggregator that&apos;s
@@ -44,7 +44,7 @@ export default function CommunityGuidelinesPage() {
         reports from users to help us keep the community safe. Please report any
         content that violates our guidelines.
       </Paragraph>
-    </>
+    </div>
   );
 }
 

diff --git a/packages/frontpage/app/(app)/layout.tsx b/packages/frontpage/app/(app)/layout.tsx
@@ -31,8 +31,8 @@ export default async function Layout({
 }) {
   const session = await getSession();
   return (
-    <div className="container mx-auto px-4 md:px-6 pt-4 pb-8 md:py-12 max-w-3xl">
-      <div className="flex place-content-between items-center mb-8">
+    <div className="relative container mx-auto px-0 md:px-6 pb-8 md:py-12 max-w-3xl">
+      <div className="fixed left-0 right-0 bg-background flex items-center justify-between py-1.5 px-4 shadow z-50">
         <Link href="/">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img src="/frontpage-logo.svg" alt="Frontpage" className="h-12" />
@@ -52,7 +52,7 @@ export default async function Layout({
 
       <main className="mb-6">{children}</main>
 
-      <footer className="flex justify-between items-center text-gray-500 dark:text-gray-400">
+      <footer className="px-4 flex justify-between items-center text-gray-500 dark:text-gray-400">
         <p>
           Made by{" "}
           <a
@@ -98,12 +98,12 @@ async function LoginOrLogout() {
               <Link href={`/profile/${handle}`} className="cursor-pointer">
                 Profile
               </Link>
-            </DropdownMenuItem> 
-          <DropdownMenuItem asChild>
-            <Link href="/about" className="cursor-pointer">
-              About
-            </Link>
-          </DropdownMenuItem>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link href="/about" className="cursor-pointer">
+                About
+              </Link>
+            </DropdownMenuItem>
             <Suspense fallback={null}>
               {isAdmin().then((isAdmin) =>
                 isAdmin ? (

diff --git a/packages/frontpage/app/(app)/moderation/page.tsx b/packages/frontpage/app/(app)/moderation/page.tsx
@@ -117,7 +117,7 @@ export default async function Moderation(props: {
   const stats = await getModeratorReportStats();
 
   return (
-    <>
+    <div className="px-4 pt-20">
       <Card className="mb-4">
         <CardHeader className="flex justify-evenly text-center">
           <CardTitle className="text-2xl font-bold text-blue-300">
@@ -190,6 +190,6 @@ export default async function Moderation(props: {
       {reports.map((report) => (
         <ReportCard key={report.id} report={report} />
       ))}
-    </>
+    </div>
   );
 }
diff --git a/packages/frontpage/app/(app)/notifications/page.tsx b/packages/frontpage/app/(app)/notifications/page.tsx
@@ -19,7 +19,7 @@ import { CommentBody } from "../post/[postAuthor]/[postRkey]/_lib/comment";
 
 export default async function NotificationsPage() {
   return (
-    <div className="flex flex-col gap-y-4">
+    <div className="flex flex-col gap-y-4 px-4 pt-20">
       <div className="flex justify-between">
         <h1 className="scroll-m-20 text-xl font-extrabold lg:text-2xl">
           Notifications

diff --git a/packages/frontpage/app/(app)/page.tsx b/packages/frontpage/app/(app)/page.tsx
@@ -25,7 +25,7 @@ async function getMorePostsAction(cursor: number | null) {
 
   return {
     content: (
-      <>
+      <div className="pt-16 divide-y-2 divide-accent">
         {posts.map((post) => (
           <PostCard
             key={post.id}
@@ -41,7 +41,7 @@ async function getMorePostsAction(cursor: number | null) {
             isUpvoted={post.userHasVoted}
           />
         ))}
-      </>
+      </div>
     ),
     pageSize: posts.length,
     nextCursor,

diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/layout.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/layout.tsx
@@ -29,7 +29,7 @@ export default async function Post(props: {
   }
 
   return (
-    <main className="mx-auto max-w-4xl space-y-6">
+    <div className="mx-auto max-w-4xl pt-20 divide-y-2 divide-accent">
       <PostCard
         author={post.authorDid}
         createdAt={post.createdAt}
@@ -51,6 +51,6 @@ export default async function Post(props: {
         </Alert>
       ) : null}
       {children}
-    </main>
+    </div>
   );
 }
diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx
@@ -44,7 +44,7 @@ export default async function Post(props: { params: Promise<PostPageParams> }) {
   const comments = await getCommentsForPost(post.id);
 
   return (
-    <>
+    <div className="pt-2 px-4">
       <LinkAlternateAtUri
         authority={authorDid}
         collection={PostCollection}
@@ -65,6 +65,6 @@ export default async function Post(props: { params: Promise<PostPageParams> }) {
           />
         ))}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/frontpage/app/(app)/post/new/page.tsx b/packages/frontpage/app/(app)/post/new/page.tsx
@@ -11,14 +11,14 @@ export default async function NewPost(props: {
 }) {
   const searchParams = await props.searchParams;
   return (
-    <main className="flex flex-col gap-3">
+    <div className="flex flex-col gap-3 px-4 pt-20">
       <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
         New post
       </h2>
       <NewPostForm
         defaultTitle={searchParams.title}
         defaultUrl={searchParams.url}
       />
-    </main>
+    </div>
   );
 }
diff --git a/packages/frontpage/app/(app)/profile/[user]/page.tsx b/packages/frontpage/app/(app)/profile/[user]/page.tsx
@@ -78,7 +78,7 @@ export default async function Profile(props: { params: Promise<Params> }) {
   });
 
   return (
-    <>
+    <div className="px-4 pt-20">
       <LinkAlternateAtUri authority={did} />
       <div className="flex items-center space-x-4 mb-4">
         <UserAvatar did={did} size="medium" />
@@ -174,6 +174,6 @@ export default async function Profile(props: { params: Promise<Params> }) {
           </Suspense>
         </TabsContent>
       </Tabs>
-    </>
+    </div>
   );
 }
diff --git a/packages/frontpage/lib/components/time-ago.tsx b/packages/frontpage/lib/components/time-ago.tsx
@@ -7,16 +7,20 @@ import {
 export function TimeAgo({
   createdAt,
   side,
+  className,
 }: {
   createdAt: Date;
   side?: TooltipContentProps["side"];
+  className?: string;
 }) {
   return (
     <SimpleTooltip
       content={format(createdAt, "EEEE do MMMM y,  pp")}
       side={side}
     >
-      <span>{formatDistance(createdAt, new Date())} ago</span>
+      <span className={className}>
+        {formatDistance(createdAt, new Date())} ago
+      </span>
     </SimpleTooltip>
   );
 }