✨Added masonry layout for images + fixed small graphql api call

UoaWDCC · Jul 11, 2024 · 14d69a5 · 14d69a5
2 parents 0b9cf27 + 34ff5c2
commit 14d69a5
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/web/src/components/PastEventCard.tsx b/web/src/components/PastEventCard.tsx
@@ -9,15 +9,19 @@ interface PastEventCardProps {
 
 const PastEventCard: React.FC<PastEventCardProps> = ({ pastEvent }) => {
   return (
-    <div className="card h-full w-full rounded-3xl bg-white shadow-lg flex flex-col md:flex-row">
+    <div className="card flex h-full w-full flex-col rounded-3xl bg-white shadow-lg md:flex-row">
       <img
         src={pastEvent.image}
         alt={pastEvent.title}
-        className="h-fit w-full md:w-64 md:h-full object-cover rounded-t-3xl md:rounded-l-3xl md:rounded-t-none"
+        className="h-fit w-full rounded-t-3xl object-cover md:h-full md:w-64 md:rounded-l-3xl md:rounded-t-none"
       />
-      <div className="card-body p-4 flex-grow flex flex-col text-gray-500 gap-4">
-        <h5 className="card-title text-lg font-bold text-black">{pastEvent.title}</h5>
-        <p className="text-wrap h-16 md:h-10 overflow-hidden text-justify">{pastEvent.description}</p>
+      <div className="card-body flex flex-grow flex-col gap-4 p-4 text-gray-500">
+        <h5 className="card-title text-lg font-bold text-black">
+          {pastEvent.title}
+        </h5>
+        <p className="h-16 overflow-hidden text-wrap text-justify md:h-10">
+          {pastEvent.description}
+        </p>
         <div className="text-md">
           <div className="card-text flex flex-row items-center gap-2">
             <FaCalendarAlt />{" "}