fix mobile layout

shivaydv · Nov 8, 2024 · 8750146 · 8750146
1 parent a92bdfd
commit 8750146
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 52 deletions.
diff --git a/src/app/(blog)/layout.tsx b/src/app/(blog)/layout.tsx
@@ -10,7 +10,7 @@ export default function BlogLayout({
   return (
     <>
       <Navbar heading="Shiva Yadav" url="/" />
-      <main className="mx-auto max-w-7xl flex-1">{children}</main>
+      <main className="mx-auto max-w-7xl">{children}</main>
       <Footer />
     </>
   );

diff --git a/src/app/(blog)/page.tsx b/src/app/(blog)/page.tsx
@@ -22,27 +22,26 @@ export default async function Home() {
     <div className="my-4 px-4 sm:px-6 lg:px-8">
       {/* Featured Post (Latest) */}
       {blogs.length > 0 && blogs[0].bannerImage && (
-        <section className="mb-16">
+        <section className="mb-6 md:mb-16">
           <Link
             href={`/post/${blogs[0].slug}`}
-            className="group relative block overflow-hidden rounded-2xl"
+            className="group relative block overflow-hidden rounded-2xl max-md:border"
           >
-            <div className="relative aspect-[16/9] h-[40rem] w-full">
+            <div className="relative aspect-[16/9] h-fit w-full">
               <Image
                 src={blogs[0].bannerImage}
                 alt={blogs[0].title}
                 fill
-
                 className="object-cover transition-transform duration-500 group-hover:scale-105"
                 priority
               />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent max-md:hidden" />
             </div>
-            <div className="absolute bottom-0 w-full p-6 md:p-8 text-white">
+            <div className="bottom-0 w-full p-3 text-foreground md:absolute md:p-8 md:text-white">
               <span className="mb-2 block text-sm">
                 {FormateDate(blogs[0].createdAt.toString())}
               </span>
-              <h2 className="mb-2 line-clamp-1 text-2xl font-bold md:text-4xl">
+              <h2 className="mb-2 line-clamp-2 text-2xl font-bold md:line-clamp-1 md:text-4xl">
                 {blogs[0].title}
               </h2>
               <p className="mb-2 line-clamp-1 max-w-2xl">
@@ -71,39 +70,15 @@ export default async function Home() {
               <Link
                 href={`/post/${post.slug}`}
                 key={post.slug}
-                className="group flex h-[12rem] w-full justify-between rounded-lg border transition-all hover:shadow-md max-md:flex-col"
+                className="group flex w-full justify-between rounded-xl border transition-all hover:shadow-md max-md:flex-col md:h-[12rem]"
               >
-                <div className="flex flex-col justify-between py-4 pl-6 pr-4">
-                  <div className="flex flex-col gap-2">
-                    <span className="flex items-center gap-1 text-sm text-muted-foreground">
-                      <CalendarDays className="h-4 w-4" />{" "}
-                      {FormateDate(post.createdAt.toString())}
-                    </span>
-                    <h2 className="line-clamp-2 text-2xl font-bold transition-colors group-hover:text-primary">
-                      {post.title}
-                    </h2>
-                    <p className="line-clamp-1 text-muted-foreground">
-                      {post.description}
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-4 text-muted-foreground">
-                    <span className="flex items-center gap-1">
-                      <Heart className="h-4 w-4" /> {post.likes.length}
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <MessageCircle className="h-4 w-4" />{" "}
-                      {post.comments.length}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="relative aspect-[16/9] w-full max-w-[350px] max-md:max-w-full">
+                <div className="relative aspect-video">
                   {post.bannerImage ? (
                     <Image
                       src={post.bannerImage}
                       alt={post.title}
                       fill
-                      className="rounded-r-lg object-cover transition-transform duration-500 group-hover:scale-95"
+                      className="object-cover transition-transform duration-500 group-hover:scale-95 max-md:rounded-t-lg md:rounded-l-lg"
                     />
                   ) : (
                     <div className="flex h-full w-full items-center justify-center bg-muted">
@@ -113,6 +88,26 @@ export default async function Home() {
                     </div>
                   )}
                 </div>
+                <div className="flex flex-grow flex-col justify-between max-md:p-3 md:py-4 md:pl-4 md:pr-2">
+                  <div className="mb-2 flex flex-col gap-2">
+                    <span className="text-sm">
+                      {FormateDate(post.createdAt.toString())}
+                    </span>
+                    <h2 className="line-clamp-2 text-2xl font-bold transition-colors group-hover:text-primary">
+                      {post.title}
+                    </h2>
+                    <p className="line-clamp-1">{post.description}</p>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <span className="flex items-center gap-1">
+                      <Heart className="h-4 w-4" /> {blogs[0].likes.length}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <MessageCircle className="h-4 w-4" />{" "}
+                      {blogs[0].comments.length}
+                    </span>
+                  </div>
+                </div>
               </Link>
             ))}
         </section>

diff --git a/src/app/(blog)/post/[slug]/page.tsx b/src/app/(blog)/post/[slug]/page.tsx
@@ -32,8 +32,8 @@ const page = async ({ params }: { params: { slug: string } }) => {
 
   const content = { __html: post?.content || "" };
   return (
-    <div className="relative max-w-5xl mx-auto py-6">
-      <div className="mb-6">
+    <div className="container py-6 overflow-hidden">
+      <div className="mb-6 ">
         <div className="flex items-center justify-between">
           <span className="text-sm text-muted-foreground">
             {FormateDate(post.createdAt.toString())}
@@ -45,28 +45,27 @@ const page = async ({ params }: { params: { slug: string } }) => {
             isLoggedIn={!!session?.user}
           />
         </div>
-        <h1 className="w-full text-2xl font-extrabold md:text-3xl mt-4">
+        <h1 className="w-full  text-2xl font-extrabold md:text-3xl mt-4">
           {post.title}
         </h1>
-        {post.bannerImage && (
-          <div className="mt-6 aspect-video w-full relative overflow-hidden rounded-lg">
+          {post.bannerImage && (
+        <div className="relative aspect-[16/9] h-fit w-full rounded-lg my-4">
             <Image
-              src={post.bannerImage}
-              alt={post.title}
-              fill
-              className="object-cover"
-              priority
-              sizes="(max-width: 1200px) 100vw, 1200px"
+            src={post.bannerImage}
+            alt={post.title}
+            fill
+            className="object-cover rounded-lg "
+            priority
             />
           </div>
         )}
       </div>
 
-      <article className="prose prose-lg dark:prose-invert prose-headings:text-2xl prose-img:mx-auto prose-img:rounded-lg">
+      <article className="prose prose-lg dark:prose-invert prose-headings:text-2xl prose-img:mx-auto prose-img:rounded-lg md:prose-pre:max-w-none prose-pre:max-w-[90vw] ">
         <div dangerouslySetInnerHTML={content} />
       </article>
 
-      <div className="mt-8 border-t pt-8">
+      <div className=" border-t pt-8">
         <Comments 
           comments={post.comments} 
           postId={post.id}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
     <html lang="en">
       <body
         className={cn(
-          "flex min-h-[100dvh] flex-col font-instrument antialiased",
+          "flex min-h-[100dvh] flex-col overflow-x-hidden font-instrument antialiased",
           Fragment.variable,
           Instrument.variable,
         )}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -11,7 +11,7 @@ const Footer = () => {
       <Separator />
       <footer
         className={
-          "flex flex-row items-center justify-between gap-2 py-6 md:space-y-0"
+          "flex flex-row items-center justify-between gap-2 px-4 py-6 md:space-y-0"
         }
       >
         <span>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -9,10 +9,10 @@ import Search from "./Search";
 
 const Navbar = ({ heading, url }: { heading: string; url?: string }) => {
   return (
-    <header className="sticky top-0 z-50 ">
+    <header className="sticky top-0 z-50">
       <nav
         className={
-          "mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 bg-background px-4 max-md:shadow-sm md:h-20 md:px-0"
+          "mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 bg-background max-md:px-4 max-md:shadow-sm md:h-20"
         }
       >
         <Link href={url || "/"} className="text-nowrap text-xl font-bold">