More ExecProfiles scaling tweaks

langaracpsc · Dec 26, 2023 · e0ee30d · e0ee30d
1 parent e8199c7
commit e0ee30d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/frontend/src/app/ExecProfile.tsx b/frontend/src/app/ExecProfile.tsx
@@ -10,6 +10,8 @@ interface ExecProfileProps
     ImageBuffer: string;
 
     Position: number;
+
+    Description: string;
 }
 
 const PositionStrings: string[] = [
@@ -22,20 +24,26 @@ const PositionStrings: string[] = [
     "Director of Events"
 ];
 
-export default function ExecProfile({ID, Name, ImageBuffer, Position} : ExecProfileProps)
+export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
 { 
     console.log(`Position: ${Position}`);
 
     return (
         <div className={"flex items-start"}>
-            <div className="box-border bg-[#262626] h-32 w-[80vh] p-4 rounded">
-                <div className={"flex flex-row"}>
-                    <div className={"relative border-box bg-lang-orange h-[10vh] w-20 rounded"}>
-                        <Image src={ImageBuffer} width={100} height={100} alt={Name}/>
+            <div className="box-border bg-[#262626]  p-4 rounded">
+                <div className={"flex flex-row gap-3"}>
+                    <div className={"relative border-box h-100 w-10 rounded basis-1/7 max-[600px]:basis-1/4 shrink-0"}>
+                        <Image src={ImageBuffer} width={200} height={200} alt={Name} className={"aspect-square object-contain h-[100px] w-[100px] max-[600px]:w-[200px] max-[600px]:h-[200px]"}/>
                     </div>
-                    <div className="flex flex-row">
-                        <span>{Name} |</span>
-                        <span>{PositionStrings[Position]}</span>
+                    <div className="flex flex-col gap-3 max-[600px]:items-center">
+                        <div className="flex flex-row ">
+                            <span className={"font-bold"}>{Name}</span>
+                            <span>&nbsp;.&nbsp;</span>
+                            <span> {PositionStrings[Position]}</span>
+                        </div>
+                        <div className="flex text-s max-[600px]:text-xs">
+                            {Description} 
+                        </div>
                     </div>
                 </div>
             </div>
@@ -44,3 +52,4 @@ export default function ExecProfile({ID, Name, ImageBuffer, Position} : ExecProf
 }
 
 
+
diff --git a/frontend/src/app/ExecProfiles.tsx b/frontend/src/app/ExecProfiles.tsx
@@ -47,12 +47,16 @@ export default function ExecProfiles({} : ExecProfilesProps)
             setProfiles(response["Payload"]);
        })();
     }, [profiles]);
-// ${profile.Name.FirstName} ${profile.Name.LastName}
     return (
         <>
             {
             profiles.map((profile: any, index: any) => {
-                return <ExecProfile key={index} Position={profile.Position} ID={profile.ID} Name={`placeholder`} ImageBuffer={`data:image/png;base64, ${profile.Image}`}/>;
+                return <ExecProfile key={index} 
+                                    Position={profile.Position} 
+                                    ID={profile.ID} 
+                                    Name={`${profile.Name.FirstName} ${profile.Name.LastName}`} 
+                                    ImageBuffer={`data:image/png;base64, ${profile.Image}`} 
+                                    Description={profile.Description}/>;
                 })
             }
         </>

diff --git a/frontend/src/app/about/AboutPage.tsx b/frontend/src/app/about/AboutPage.tsx
@@ -10,28 +10,28 @@ interface AboutPageState
 
 export function AboutPage({} : AboutPageProps)
 {
-    return (<div className={"flex flex-col gap-5 bg-body-gray"}>
-                <div className={"flex flex-col gap-3 ml-5 items-center"}>
-                    <div className={"text-[36px] mt-0 font-bold flex items-center"}>
+    return (<div className={"flex flex-col gap-5 bg-body-gray grow"}>
+                <div className={"flex flex-col  gap-3 ml-5 mr-5 mt-10 items-center"}>
+                    <div className={"text-[36px] font-bold flex items-center"}>
                         ABOUT US
                     </div>
-                    <div className={"text-[18px] font-light content-start"}>
+                    <div className={"text-s font-light items-center"}>
                         The Langara Computer Science Club is officially back! We are a student-run club dedicated to providing a space for students interested in computer science at Langara to learn, network, help each other out, and have fun! This year, we plan to host workshops, programming competitions, and meetups.                    
                     </div>
                 </div>
-                <div className={"flex flex-col  ml-5 items-center"}>
+                <div className={"flex flex-col m-5 items-center"}>
                     <div className={"text-[36px] font-bold flex max-[500px]:items-end max-[600px]: mt-10"}>
                         OUR EXECS
                     </div>
-                    <div className={"text-[18px] font-light content-start"}>
+                    <div className={"text-s font-light items-center"}>
                         We’re a team of enthusiasts who strive to make this club a fun place.
                     </div>
                 </div>
                 <div className={"profileContainer"}>
-                    <div className={"flex flex-col ml-5 gap-3 items-center"}>
+                    <div className={"flex flex-col ml-5 mr-5 gap-3 items-center"}>
                         <ExecProfiles/> 
                     </div>
                 </div>
             </div>
         );      
-}
+}
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
@@ -5,7 +5,7 @@ import NavBar from "../NavBar";
 export default function Page()
 {
     return (
-        <main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[20vh_100vh] overflow-hidden">
+        <main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[20vh_1fr] overflow-hidden">
             <NavBar></NavBar>
             <AboutPage></AboutPage>
         </main>