Made Profile page responsive

mrswastik-robot · Mar 13, 2024 · 893e71c · 893e71c
1 parent 8d6ab93
commit 893e71c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
         <body className={cn(GeistSans.className, "antialiased min-h-screen pt-12 bg-[#F1F2F2] dark:bg-[#181818]")}>
           <Providers>
             <Navbar />
-            <div className="md:container md:max-w-7xl md:mx-auto h-full pt-8 ">
+            <div className="md:container md:max-w-7xl md:mx-auto h-full pt-4 ">
             {children}
             </div>
             <Toaster />

diff --git a/app/page.tsx b/app/page.tsx
@@ -261,7 +261,7 @@ export default function Home() {
 
 
         {/* subreddit info */}
-        <div className='col-span-4 lg:col-span-2 lg:sticky lg:top-20 overflow-hidden h-fit rounded-lg  order-first md:order-last space-y-3'>
+        <div className='col-span-4 lg:col-span-2 lg:sticky lg:top-[4.2rem] overflow-hidden h-fit rounded-lg  order-first md:order-last space-y-3'>
           {/* <div className='bg-emerald-100 dark:bg-red-500 px-6 py-4'>
             <p className='font-semibold py-3 flex items-center gap-1.5'>
               <HomeIcon className='h-4 w-4' />

diff --git a/app/profilePage/page.tsx b/app/profilePage/page.tsx
@@ -306,7 +306,6 @@ const ProfilePage = (props: Props) => {
         setLoadingPosts(false);
       }
       };
-
       fetchData();
     }, [user, loading, router, postType, loadMore, reload]);
 
@@ -403,7 +402,7 @@ useEffect(() => {
   <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">{isAnonymous ? 'Anonymous Posts' : 'Normal Posts'}</span>
 </label>
       </div> */}
-      <div className='toggleSwitch mt-5'>
+      <div className='toggleSwitch mt-2 overflow-auto'>
           <Tabs defaultValue="posts" className="w-full">
       <TabsList className="grid gap-2 grid-cols-6 w-[650px]">
         <TabsTrigger value="posts" onClick={handleToggleSwitchNormal} >Posts</TabsTrigger>
@@ -417,10 +416,10 @@ useEffect(() => {
     </div>
     {(postType=='normal'||postType=='anonymous'||postType=='answers')&&
       <div className="border-y-[1px] border-black border-opacity-15 py-2 flex justify-between items-center">
-        <div className="font-[600] opacity-80">
+        <div className="font-[600] opacity-80 ml-2">
         {postType=='normal'?<div>Normal</div>:postType=='anonymous'?<div>Anonymous</div>:postType=='answers'?<div>Answers</div>:<div>Coming Soon</div>}
         </div>
-        <div>
+        <div className="mr-2">
 
         <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -466,7 +465,7 @@ useEffect(() => {
                   : anonymousQuestions &&
                     anonymousQuestions.map((post, index) => (
                       // <Post key={index} post={post} />
-                      <div key={index} className=" my-3">
+                      <div key={index} className=" my-1">
                         <Post post={post} isProfile={true} handleDelete={handleDelete} />
                       </div>
                     ))}
@@ -491,7 +490,7 @@ useEffect(() => {
               questions && postType === "normal" &&
               questions.map((post, index) => (
                 // <Post key={index} post={post} />
-                <div key={index} className=" my-3">
+                <div key={index} className=" my-1">
                   <Post post={post} isProfile={true} handleDelete={handleDelete} />
                 </div>
               ))
@@ -503,7 +502,7 @@ useEffect(() => {
                 postType=='saved'?<div>
                   { savedPosts.length !== 0 ? (
         savedPosts.map((post, index) => (
-          <div key={index} className="my-3">
+          <div key={index} className="my-1">
             <Post post={post} />
           </div>
         ))
@@ -542,7 +541,7 @@ useEffect(() => {
               answers && postType === "answers" &&
               answers.map((post, index) => (
                 // <Post key={index} post={post} />
-                <div key={index} className=" my-3">
+                <div key={index} className=" my-1">
                   <Post post={post} isProfile={true} handleDelete={handleDelete} />
                 </div>
               ))
@@ -579,7 +578,7 @@ useEffect(() => {
             <Loader />
           </div>
         ) : (
-          <div className=" mb-7">
+          <div className="mt-2 mb-5">
             {isAnonymous ? (
               anonymousMorePosts ? (
                 <Button onClick={handleLoadMore}>LoadMore...</Button>

diff --git a/components/profilePage/ProfileCard.tsx b/components/profilePage/ProfileCard.tsx
@@ -11,27 +11,27 @@ const ProfileCard = ({user}: Props) => {
   const otherUser:boolean=false;
   return (
     <div>
-      <div className="flex justify-center mx-auto bg-[#FFFFFF] dark:bg-[#262626] p-5 rounded-lg">
+      <div className="flex lg:justify-center mx-auto bg-[#FFFFFF] dark:bg-[#262626] p-5 rounded-lg">
 
         <div>
         <Image
           src={user?.photoURL || '/nodp.webp'}
           width={300}
           height={300}
-          className=" w-[7rem] h-[7rem] rounded-full"
+          className=" lg:w-[7rem] lg:h-[7rem] w-[5rem] h-[5rem] rounded-full"
           alt="Profile Pic"
         />
         {/* <p className=" mt-4 text-sm">Write a description about yourself ...</p> */}
         </div>
 
 
-        <div className="space-y-5 mx-5">
-          <h1 className="text-4xl font-bold">{user?.displayName}</h1>
-          <div className=" flex gap-x-2 mt-4 text-base">
+        <div className="lg:space-y-5 space-y-2 mx-5">
+          <h1 className="lg:text-4xl text-xl font-bold">{user?.displayName}</h1>
+          <div className=" flex gap-x-2 lg:mt-4 lg:text-base text-xs">
           <p>{0} Followers</p>
             <svg
               viewBox="0 0 48 48"
-              className=" mt-2 w-3 h-3"
+              className="lg:mt-2 lg:w-3 lg:h-3 w-1"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >