final touches on css

TritonSE · Feb 29, 2024 · 541bea4 · 541bea4
1 parent a7a25e8
commit 541bea4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/frontend/src/app/components/EventsList.tsx b/frontend/src/app/components/EventsList.tsx
@@ -27,7 +27,9 @@ export default function EventsList() {
       {events.length === 0 ? (
         <p>Loading...</p>
       ) : (
-        events.map((event: EventDetails) => <EventCard key={event._id} event={event} />)
+        events.map((event: EventDetails) => (
+          <EventCard key={event._id} className="w-full" event={event} />
+        ))
       )}
     </div>
   );

diff --git a/frontend/src/app/components/events-card.tsx b/frontend/src/app/components/events-card.tsx
@@ -7,14 +7,16 @@ import styles from "../styles/events-card.module.css";
 
 // TODO: Change props to include className and change to an EventDetails type
 type CardProps = {
+  className?: string;
   event: EventDetails;
 };
 // TODO: Add className prop to the div
 
 // TODO: Make class names responsive
-const Card: React.FC<CardProps> = ({ event }: CardProps) => {
+const Card: React.FC<CardProps> = ({ className, event }: CardProps) => {
+  const propClass: string = className ? className : "";
   return (
-    <div className={styles.card}>
+    <div className={`${styles.card} ${propClass}`}>
       <Image
         className={styles.cardImage}
         src={event.imageURI}

diff --git a/frontend/src/app/events/[eventId]/page.tsx b/frontend/src/app/events/[eventId]/page.tsx
@@ -61,7 +61,7 @@ export default function EventSignup({ params }: Props) {
             <Image src="/eventSignupGraphic.svg" alt="People with Boxes" width={578} height={500} />
           </div>
           <div className="w-1/2">
-            <div className="flex flex-col text-left py-20 h-[500px]">
+            <div className="flex flex-col text-left pt-20 h-[500px]">
               <p style={{ font: "var(--font-title-l)" }} className="mb-8">
                 Details
               </p>
@@ -80,9 +80,11 @@ export default function EventSignup({ params }: Props) {
               <p style={{ font: "var(--font-body-bold)" }} className="mb-2">
                 Guidelines:
               </p>
-              <p style={{ font: "var(--font-body)" }} className="mb-6">
-                {event ? event.guidelines : "Loading..."}
-              </p>
+              <div className="flex-grow w-full h-auto overflow-hidden text-ellipsis">
+                <p style={{ font: "var(--font-body)" }} className="min-w-0">
+                  {event ? event.guidelines : "Loading..."}
+                </p>
+              </div>
             </div>
           </div>
         </div>

diff --git a/frontend/src/app/styles/events-card.module.css b/frontend/src/app/styles/events-card.module.css
@@ -1,5 +1,4 @@
 .card {
-  width: 578px;
   top: 1018px;
   left: 97px;
   padding: 0px, 0px, 24px, 0px;
@@ -27,12 +26,16 @@
 
 .cardDescription {
   font: var(--font-body-reg);
+  width: fit-content;
+  height: 6rem;
   text-align: left;
   padding-bottom: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .cardButton {
-  width: 513px;
+  width: 100%;
   height: 48px;
   padding: 12px, 24px, 12px, 24px;
   border-radius: 4px;