ui fixes

CodeChefVIT · Mar 13, 2024 · aca8403 · aca8403
1 parent b4d05a9
commit aca8403
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 57 deletions.
diff --git a/devsoc24-portal-fe/src/app/home/page.tsx b/devsoc24-portal-fe/src/app/home/page.tsx
@@ -267,7 +267,7 @@ export default function HomePage() {
   return (
     <>
       <ToastContainer />
-      <main className="flex h-fit flex-col items-start overflow-x-hidden bg-[#F4F5FA] lg:h-screen">
+      <main className="flex h-fit flex-col items-start overflow-x-hidden bg-[#F4F5FA] lg:h-screen max-w-screen">
         <div className="flex h-[10%] w-full items-center justify-between gap-x-8 bg-background px-6 py-2">
           <div className="flex flex-row gap-8">
             <Logo className="h-9/10 w-auto" />
@@ -303,10 +303,10 @@ export default function HomePage() {
         <div className="flex flex-col">
           {showModal === "leave" && <LeaveTeam />}
           {showModal === "kick" && <Kick />}
-          <div className="mt-5 mb-1 px-4">
+          <div className="mt-4 flex h-fit w-screen flex-col justify-between gap-4 px-4">
             <TimelineComponent count={4} />
           </div>
-          <div className="mt-4 flex h-fit w-full flex-col justify-between gap-4 overflow-y-auto px-4 md:flex-row lg:h-[85%]">
+          <div className="mt-4 flex h-fit w-screen flex-col justify-between gap-4 overflow-y-auto px-4 md:flex-row lg:h-[85%]">
             {team ? (
               <CustomCard
                 title="Your Devsoc Team"

diff --git a/devsoc24-portal-fe/src/components/timeline/timelineComponent.tsx b/devsoc24-portal-fe/src/components/timeline/timelineComponent.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import img1 from "@/assets/images/timeline/completed.svg";
 import img2 from "@/assets/images/timeline/half.svg";
@@ -12,61 +11,73 @@ const timelineData = [
   "label4",
   "label5",
   "label6",
+  "label7",
+  "label8",
+  "label9",
 ];
 
 const TimelineComponent = (props: { count: number }) => {
   return (
-    <div className="flex h-[25vh] w-full rounded-xl bg-white">
-      <div className="flex w-full flex-col items-center justify-between pl-6 pt-4 font-semibold text-[#45464E]">
+    <div className="trackComponent flex h-[25vh] rounded-xl bg-white w-full overflow-auto">
+      <div className="flex flex-col items-center justify-between pl-6 pt-4 font-semibold text-[#45464E] ">
         <p className="self-start">Timeline</p>
-        <div className="trackComponent flex h-full w-full flex-row items-center overflow-x-auto">
-          {timelineData.slice(0, props.count).map((item, index) => {
-            return (
-              <div
-                className="flex h-fit flex-col items-center justify-center"
-                key={index}
-              >
-                <Image
-                  src={img1 as HTMLImageElement}
-                  alt="completed"
-                  height={50}
-                  width={50}
-                  className="h-auto w-fit"
-                />
-                <p className="m-1 w-full text-center">{timelineData[index]}</p>
-              </div>
-            );
-          })}
-
-          <div className="flex h-fit flex-col items-center justify-center">
-            <Image
-              src={img2 as HTMLImageElement}
-              alt="completed"
-              height={50}
-              width={50}
-              className="h-auto w-fit"
-            />
-            <p className="m-1 w-full text-center">
-              {timelineData[props.count]}
-            </p>
-          </div>
-
-          {timelineData.slice(props.count).map((item, index) => {
-            return (
-              <div
-                className="flex h-fit flex-col items-center justify-center"
-                key={index}
-              >
-                <Image
-                  src={img3 as HTMLImageElement}
-                  alt="completed"
-                  height={50}
-                  width={50}
-                  className="h-auto w-fit"
-                />
-                <p className="m-1 w-full text-center">{timelineData[index]}</p>
-              </div>
-            );
+        <div className=" flex h-full flex-row items-center overflow-x-auto">
+          {timelineData.map((item, index) => {
+            if (index < props.count) {
+              return (
+                <div
+                  className="flex h-fit flex-col items-center justify-center"
+                  key={index}
+                >
+                  <Image
+                    src={img1}
+                    alt="completed"
+                    height={50}
+                    width={50}
+                    className="h-auto w-fit min-w-[300px]"
+                  />
+                  <p className="m-1 w-full text-center">
+                    {timelineData[index]}
+                  </p>
+                </div>
+              );
+            } else if (index === props.count) {
+              return (
+                <div
+                  className="flex h-fit flex-col items-center justify-center"
+                  key={index}
+                >
+                  <Image
+                    src={img2}
+                    alt="half"
+                    height={50}
+                    width={50}
+                    className="h-auto w-fit min-w-[320px]"
+                  />
+                  <p className="m-1 w-full text-center">
+                    {timelineData[index]}
+                  </p>
+                </div>
+              );
+            } else {
+              return (
+                <div
+                  className="flex h-fit flex-col items-center justify-center"
+                  key={index}
+                >
+                  <Image
+                    src={img3}
+                    alt="none"
+                    height={50}
+                    width={50}
+                    className="h-auto w-fit min-w-[320px]"
+                  />
+                  <p className="m-1 w-full text-center">
+                    {timelineData[index]}
+                  </p>
+                </div>
+              );
+            }
           })}
         </div>
       </div>

diff --git a/devsoc24-portal-fe/src/components/track/TrackCard.tsx b/devsoc24-portal-fe/src/components/track/TrackCard.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 
 const TrackCard = (props: { name: string; imagesrc: string }) => {
   return (
-    <div className="h-[300px] w-full overflow-hidden rounded-2xl flex flex-col items-center relative border-2 border-black">
+    <div className="md:h-[300px] h-[250px] my-6 md:w-full w-[70vw] overflow-hidden rounded-2xl flex flex-col items-center relative border-2 border-black">
       <Image
         src={props.imagesrc}
         alt="track image"

diff --git a/devsoc24-portal-fe/src/components/track/TrackComponent.tsx b/devsoc24-portal-fe/src/components/track/TrackComponent.tsx
@@ -49,9 +49,9 @@ const tracks = [
 ];
 const TrackComponent = () => {
   return (
-    <div className="trackComponent h-fit w-full rounded-xl bg-white px-6 md:w-[32vw] lg:h-[51vh] lg:overflow-auto">
+    <div className="trackComponent h-full w-full rounded-xl bg-white px-6 md:w-[32vw] lg:h-[51vh] overflow-auto">
       <div className="pt-3 font-semibold text-[#45464E]">Track Details</div>
-      <div className="my-6 flex w-full flex-col items-center gap-y-6 -z-10">
+      <div className="my-6 flex w-full flex-row md:flex-col items-center gap-6  -z-10 overflow-auto trackComponent">
         {tracks.map((item, index) => (
           <Dialog>
             <DialogTrigger key={index} className="w-full">