Merge pull request #51 from BacPacNet/timeline-responsive

Make Timeline page responsive

src/app/community/[id]/timeline/page.tsx

@@ -79,7 +79,7 @@ const sampleUser = {
   name: 'Kathryn Murphy',
   bio: 'Junior student major at Law, Nagoya University',
   university: '3rd Year, Undergraduate, Law',
-  department: 'Junior student major at Law',
+  department: 'Department of Liberal Arts',
   location: 'London, United Kingdom',
   email: '[email protected]',
   phone: '+44-3028-3239',
@@ -151,12 +151,12 @@ const Timeline = () => {
         {modalContentType && modalContent(modalContentType)}
       </Modal>
       <Navbar activeTab={activeTab} onTabClick={handleTabClick} />
-      <div className="flex justify-center items-start gap-7 mt-16">
+      <div className="flex justify-center items-center lg:items-start gap-7 mt-16 flex-col lg:flex-row xs:px-4 sm:px-0">
         <div className="flex flex-col gap-6">
           <ProfileCard {...sampleUser} setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
           <Recommendations people={recommendations} />
         </div>
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col justify-center items-stretch gap-5 max-w-[696px]">
           <PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
           <Dropdown options={options} defaultOption="Recent" />
           <Post

src/components/Footer/Footer.tsx

@@ -38,7 +38,7 @@ const Footer: React.FC = () => {
   return (
     <div className=" w-[90%] mx-auto relative flex flex-col center-v py-8 lg:pt-8">
       <div className="w-full text-gray-dark text-sm lg:text-lg">
-        <div className="flex justify-between md:justify-start gap-2 md:gap-16 ">
+        <div className="flex justify-between md:justify-start gap-2 md:gap-16">
           <a href="#">Privacy Policy</a>
           <a href="#">Terms and Conditions</a>
           <a href="#">Contact Us</a>

src/components/Timeline/DropDown.tsx

@@ -19,7 +19,7 @@ const Dropdown: React.FC<DropdownProps> = ({ options, defaultOption }) => {
   }
 
   return (
-    <div className="relative inline-block text-left">
+    <div className="relative inline-block text-left xs:pl-5 sm:pl-0">
       <div>
         <button
           type="button"

src/components/Timeline/Modal.tsx

@@ -34,8 +34,8 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
   return (
     <>
       {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto bg-[black] bg-opacity-10">
-          <div className="relative w-auto mx-auto rounded-xl shadow-lg bg-white p-6 my-5">
+        <div className="fixed w-screen inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto bg-[black] bg-opacity-10">
+          <div className="relative xs:max-w-sm sm:max-w-max w-auto mx-auto rounded-xl shadow-lg bg-white p-6 my-5">
             <button
               className="absolute top-2 right-2 p-1 bg-transparent border-0 text-gray-600 text-lg font-bold leading-none outline-none focus:outline-none"
               onClick={handleClose}

src/components/Timeline/Post.tsx

@@ -142,12 +142,16 @@ const Post: React.FC<PostProps> = ({
   saved,
 }) => {
   return (
-    <div className={`${isUserProfile ? '' : 'border-2 border-gray-dark rounded-lg'} mb-4 shadow-sm max-w-[696px]`}>
+    <div
+      className={`${
+        isUserProfile ? '' : 'border-2 border-gray-dark rounded-lg'
+      } mb-4 shadow-sm lg:max-w-[696px] sm:max-w-md xs:max-w-[340px] xs:mx-4 sm:mx-0`}
+    >
       <div className="flex items-start">
         {/* User Post */}
         <div className="pt-10">
           {/* User Info */}
-          <div className="flex justify-between px-10 ">
+          <div className="flex justify-between px-5 sm:px-10 xs:max-w-xs sm:max-w-md lg:max-w-full">
             <div className="flex gap-4 items-center">
               <img src={avatar} alt={`${user}'s avatar`} width={14} height={14} className="rounded-full w-14 h-14" />
               <div>
@@ -170,38 +174,38 @@ const Post: React.FC<PostProps> = ({
             </div>
           )}
           {/* Post Content */}
-          <div className="mt-6 px-10 ">
+          <div className="mt-6 px-5 sm:px-10 sm:max-w-md lg:max-w-full">
             {/* TODO: A MARKDOWN PARSER MAY BE NEEDED FOR POST CONTENT */}
-            <p className="text-sm font-medium break-words whitespace-pre-wrap">
+            <p className="text-sm font-medium break-words whitespace-pre-wrap ">
               {text}{' '}
               <a href={link} className="text-blue-500">
                 {link}
               </a>
             </p>
             <p className="text-xs text-gray mt-4">
-              <span className="text-gray-dark">{date}</span> · Post from {user} at {university}
+              <span className="text-gray-dark break-words">{date}</span> · Post from {user} at {university}
             </p>
           </div>
           {/* Post Actions */}
-          <div className="flex justify-between items-center my-4 border-t-2 border-b-2 px-10 py-2 border-border text-gray-1">
+          <div className="flex justify-between items-center my-4 border-t-2 border-b-2 px-2 lg:px-10 py-2 border-border text-gray-1 xs:max-w-[340px] sm:max-w-md lg:max-w-full">
             <div className="flex items-center">
               <FaArrowUp className="text-gray-dark" />
-              <span className="mx-1 text-sm">{likes}</span>
+              <span className="mx-1 text-sm xs:text-xs sm:text-sm">{likes}</span>
               <FaArrowDown className="text-gray-500" />
             </div>
             <div className="flex items-center">
-              <FaComment className="text-gray-500 ml-6 mr-2" />
-              <span className="text-sm">{comments} Comments</span>
+              <FaComment className="text-gray-500 sm:ml-6 mr-2" />
+              <span className="text-sm xs:text-xs sm:text-sm">{comments} Comments</span>
             </div>
             <div className="flex items-center">
-              <BiRepost className="text-gray-500 ml-6 mr-2 h-6 w-6" />
-              <span className="text-sm">{reposts} Reposts</span>
+              <BiRepost className="text-gray-500 sm:ml-6 mr-2 h-6 w-6" />
+              <span className="text-sm xs:text-xs sm:text-sm">{reposts} Reposts</span>
             </div>
             <Popover>
               <PopoverTrigger>
                 <div className="flex items-center">
-                  <IoPaperPlaneSharp className="text-gray-500 ml-6 mr-2" />
-                  <span className="text-sm">Share</span>
+                  <IoPaperPlaneSharp className="text-gray-500 sm:ml-6 mr-2" />
+                  <span className="text-sm xs:text-xs sm:text-sm">Share</span>
                 </div>
               </PopoverTrigger>
               <PopoverContent className="relative right-40 top-8 w-auto p-5 border-none shadow-lg bg-white shadow-gray-light">
@@ -210,28 +214,34 @@ const Post: React.FC<PostProps> = ({
             </Popover>
           </div>
           {/* Comments Box */}
-          <div className="py-2 px-10">
+          <div className="py-2 px-5 sm:px-10">
             {/* Comments Input Box */}
             <div className="flex items-center gap-4">
-              <img src="/timeline/avatar.png" alt="User Avatar" width={14} height={14} className="rounded-full w-14 h-14" />
+              <img src="/timeline/avatar.png" alt="User Avatar" width={14} height={14} className="rounded-full w-12 h-12 sm:w-14 sm:h-14" />
               <div className="w-auto border border-gray-light rounded-full py-2 pr-3 flex items-center">
                 <input
                   type="text"
                   placeholder="Add a comment..."
-                  className="flex-grow mx-4 p-1 border-none focus:outline-none min-w-[450px] text-sm"
+                  className="flex-grow mx-1 sm:mx-4 p-1 border-none focus:outline-none lg:min-w-[450px] xs:text-xs sm:text-sm"
                 />
                 <MdGifBox size={24} color="#737373" />
                 <MdOutlineImage size={24} color="#737373" />
               </div>
             </div>
             <div className="my-6 text-sm text-gray-500">Most Relevant / Most Recent</div>
             {/* Comments Section */}
-            <div>
+            <div className="xs:max-w-xs sm:max-w-max">
               {userComments.map((comment) => (
-                <div key={comment.id} className="my-4">
+                <div key={comment.id} className="my-4 xs:mr-4 sm:mr-0">
                   {/* Comment Info */}
                   <div className="flex gap-4">
-                    <img src={comment.avatar} alt={`${comment.user}'s avatar`} width={14} height={14} className="rounded-full w-14 h-14" />
+                    <img
+                      src={comment.avatar}
+                      alt={`${comment.user}'s avatar`}
+                      width={14}
+                      height={14}
+                      className="rounded-full w-12 h-12 sm:w-14 sm:h-14"
+                    />
                     <div className="px-4 py-2 border border-gray">
                       <div className="flex justify-between">
                         <div>
@@ -240,7 +250,7 @@ const Post: React.FC<PostProps> = ({
                         </div>
                         <SlOptions color="gray" />
                       </div>
-                      <p className="text-sm pt-1">{comment.text}</p>
+                      <p className="text-xs sm:text-sm pt-1 break-words">{comment.text}</p>
                     </div>
                   </div>
                   {/* Comment Actions */}
@@ -264,7 +274,7 @@ const Post: React.FC<PostProps> = ({
                 </div>
               ))}
             </div>
-            <div className="flex justify-end mt-5 mb-10">
+            <div className="flex justify-end mt-5 mb-10 xs:mr-8 sm:mr-0">
               <button className="text-gray text-sm underline">View More Comments</button>
             </div>
           </div>

src/components/Timeline/PostInput.tsx

@@ -22,19 +22,19 @@ const PostInput: React.FC<PostInputProps> = ({ setIsModalOpen, setModalContentTy
   }
 
   return (
-    <div className="flex flex-col gap-3 border-2 border-gray-dark rounded-lg justify-center items-center py-6 max-w-[696px]">
-      <div className=" flex gap-4">
-        <img src="/timeline/avatar.png" alt="User" className=" w-14 h-14 rounded-full" />
+    <div className="flex flex-col gap-3 border-2 border-gray-dark rounded-lg justify-center items-center py-6 lg:max-w-[696px] sm:max-w-md xs:max-w-sm xs:mx-4 sm:mx-0">
+      <div className="flex gap-4">
+        <img src="/timeline/avatar.png" alt="User" className="w-10 h-10 sm:w-14 sm:h-14 rounded-full" />
         <div className="flex flex-col gap-3">
-          <div className="w-auto border border-gray-light rounded-full py-2 pr-5 flex">
+          <div className="w-auto border border-gray-light rounded-full py-1 sm:py-2 pr-5 flex">
             <input
               type="text"
               placeholder="Post on your timeline..."
-              className="flex-grow mx-4 p-2 border-none focus:outline-none min-w-[450px] text-sm"
+              className="flex-grow mx-1 sm:mx-4 p-2 border-none focus:outline-none lg:min-w-[450px] text-xs sm:text-sm"
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
             />
-            <button className="text-white bg-primary px-3 py-2 rounded-full text-sm">Post</button>
+            <button className="text-white bg-primary px-3 my-[2px] sm:px-3 sm:py-2 rounded-full text-sm">Post</button>
           </div>
           <div className="flex items-center gap-2">
             <MdOutlineImage size={24} color="#737373" />

src/components/Timeline/ProfileCard.tsx

@@ -8,6 +8,7 @@ import { FaBirthdayCake } from 'react-icons/fa'
 import { HiPencilAlt } from 'react-icons/hi'
 import coverImage from '../../../public/timeline/cover.png'
 import { ModalContentType } from '@/types/global'
+import { cn } from '@/lib/utils'
 interface ProfileProps {
   name: string
   bio: string
@@ -24,11 +25,22 @@ interface ProfileProps {
   isUserProfile?: boolean
 }
 
-const ProfileItem = ({ iconName, text }: { iconName: React.ComponentType<{ size: number; color: string }>; text: string }) => {
+const ProfileItem = ({
+  iconName,
+  text,
+  size,
+  textClassName,
+}: {
+  iconName: React.ComponentType<{ size: number; color: string }>
+  text: string
+  size?: number
+  textClassName?: string
+}) => {
+  const iconSize = size ? size : 22
   return (
     <div className="flex flex-row gap-3 items-center">
-      {React.createElement(iconName, { size: 22, color: '#404040' })}
-      <p className="text-gray-600 text-xs font-medium">{text}</p>
+      {React.createElement(iconName, { size: iconSize, color: '#404040' })}
+      <p className={cn('text-gray-600 text-xs font-medium break-words', textClassName)}>{text}</p>
     </div>
   )
 }
@@ -49,10 +61,10 @@ const ProfileCard: React.FC<ProfileProps> = ({
   isUserProfile,
 }) => {
   return (
-    <div className="max-w-[280px] bg-white rounded-lg shadow-md overflow-hidden border-2 border-gray-dark">
-      <div className="relative max-w-xs w-full">
+    <div className="sm:max-w-md lg:max-w-[280px] bg-white rounded-lg shadow-md overflow-hidden border-2 border-gray-dark">
+      <div className="relative lg:max-w-xs w-full">
         {/* Cover Image */}
-        <div className="h-28 bg-cover bg-center" style={{ backgroundImage: `url(${coverImage.src})` }} />
+        <div className="h-28 bg-cover bg-center" style={{ backgroundImage: `url(${coverImage.src})`, objectFit: 'cover' }} />
         {/* Profile Picture and Edit Profile Button */}
         <div className="absolute top-14 flex items-end pb-4 pl-4 w-full">
           <div className="flex">
@@ -74,11 +86,11 @@ const ProfileCard: React.FC<ProfileProps> = ({
         <h2 className="text-lg font-semibold">{name}</h2>
         <p className="text-gray-dark text-xs py-1">{bio}</p>
         {!isUserProfile && <button className="w-full bg-primary text-white py-2 mt-2 rounded-lg text-xs font-medium">Create Avatar</button>}
-        <div className="mt-5 flex flex-col gap-4">
+        <div className="mt-5 flex flex-col gap-4 sm:grid sm:grid-cols-2 sm:gap-x-6 lg:flex">
           <ProfileItem iconName={RiGraduationCapFill} text={university} />
           <ProfileItem iconName={HiLibrary} text={department} />
           <ProfileItem iconName={FaLocationDot} text={location} />
-          <ProfileItem iconName={MdEmail} text={email} />
+          <ProfileItem iconName={MdEmail} text={email} textClassName="break-all" />
           <ProfileItem iconName={MdPhone} text={phone} />
           <ProfileItem iconName={FaBirthdayCake} text={dateOfBirth} />
         </div>