Responsive main page (#208)

* Fix responsive layout on main page

- responsive mobile view for 'projects', 'learning', 'events' and 'contribute' cards

* Responsive ProjectCard

- add a useEffect hook to `components/ProjectCard.tsx` to use a vertical layout for small screens
- fixes issue on main page where random project is not responsive

* Restrict project image size

- Limit project image size on smaller windows by wrapping each image in a max-height container

* Remove code comments

components/ProjectCard.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/legacy/image';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import ELink from './ELink';
 import { Project, GitHubColors } from '../util/';
 
@@ -18,28 +18,34 @@ interface ProjectCardImageProps {
 
 function ProjectCardImage({ project, preload }: ProjectCardImageProps) {
   const { image, alt, link } = project;
-  return link ? (
-    <ELink link={link}>
-      <Image
-        src={image ?? '/logo.png'}
-        alt={alt}
-        width="1000"
-        height="1000"
-        layout="responsive"
-        priority={preload}
-      />
-    </ELink>
-  ) : (
-    <>
-      <Image
-        src={image}
-        alt={alt}
-        width="1000"
-        height="1000"
-        layout="responsive"
-        priority={preload}
-      />
-    </>
+  return (
+    <div className="card-image-container">
+      {link ? (
+        <ELink link={link}>
+          <Image
+            src={image ?? '/logo.png'}
+            alt={alt}
+            width="1000"
+            height="1000"
+            layout="fill"
+            objectFit="contain"
+            priority={preload}
+          />
+        </ELink>
+      ) : (
+        <>
+          <Image
+            src={image}
+            alt={alt}
+            width="1000"
+            height="1000"
+            layout="fill"
+            objectFit="contain"
+            priority={preload}
+          />
+        </>
+      )}
+    </div>
   );
 }
 
@@ -123,7 +129,16 @@ function ProjectCard({
   githubColors,
   searchQuery = '',
 }: ProjectCardProps): JSX.Element {
-  if (vertical) {
+  // For mobile devices, set project card to be always in `vertical` format
+  const [isVertical, setIsVertical] = useState(vertical);
+  useEffect(() => {
+    const handleResize = () => setIsVertical(vertical || window.innerWidth < 540);
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [vertical]);
+
+  if (isVertical) {
     return (
       <div className="card">
         <ProjectCardImage project={project} preload={preload} />
@@ -138,7 +153,7 @@ function ProjectCard({
   return (
     <div className="card">
       <div className="row">
-        <div className="col-6">
+        <div className="col-6 centered-content">
           <ProjectCardImage project={project} preload={preload} />
         </div>
         <div className="col-6">

pages/index.tsx

@@ -45,8 +45,9 @@ export default function Home({
           maintained by <ELink link="https://uclaacm.com">ACM at UCLA</ELink>,
           the largest computer science community at UCLA
         </p>
+
         <div className="row">
-          <div className="col-6">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <Link href="/projects">
@@ -56,7 +57,7 @@ export default function Home({
               </div>
             </div>
           </div>
-          <div className="col-6">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <ELink link="https://dev-pathways.netlify.app/">
@@ -68,8 +69,8 @@ export default function Home({
           </div>
         </div>
 
-        <div className="row mt-2">
-          <div className="col-6">
+        <div className="row">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <ELink link="https://uclaacm.com/events">
@@ -79,7 +80,7 @@ export default function Home({
               </div>
             </div>
           </div>
-          <div className="col-6">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <Link href="/contribute">
@@ -90,7 +91,7 @@ export default function Home({
             </div>
           </div>
         </div>
-        <hr className="mt-2" />
+        <hr />
 
         <h2>featured project</h2>
         <ProjectCard

styles/globals.css

@@ -24,6 +24,14 @@ body {
   margin-top: 2rem;
 }
 
+.row {
+  margin-bottom: 1rem;
+}
+
+.col-mb-12 {
+  margin-bottom: 0.5rem;
+}
+
 .row.same-height-grid {
   row-gap: 2rem;
   overflow-wrap: break-word;
@@ -34,6 +42,13 @@ body {
   height: 100%;
 }
 
+.card-image-container {
+  width: 100%;
+  height: 20rem;
+  max-height: 40vh;
+  position: relative;
+}
+
 .assignee-image {
   border-radius: 50%;
   overflow: hidden;