Feature film screenings (#145)

* add film screening to events page filter * fix film screening breaking event type pill, move event type to end of row * add film screening to event type * adjust event row date width so it fits onto one line
Refuge-Worldwide · Nov 12, 2024 · ed9eccf · ed9eccf
1 parent a734287
commit ed9eccf
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/components/eventRow.tsx b/components/eventRow.tsx
@@ -39,23 +39,23 @@ export default function EventRow({
     <li className="block border-b border-black transition-all duration-100 px-4 sm:px-8">
       <details className="group event-accordion" onToggle={handleToggle}>
         <summary className="py-5 lg:grid-cols-8 md:flex md:gap-x-6 lg:gap-x-12 xl:gap-x-24 md:items-center cursor-pointer list-none">
-          <div className="hidden md:block lg:col-span-1 text-small flex-initial md:max-w-[100px] md:min-w-[100px] lg:min-w-[116px] ">
+          <div className="hidden md:block lg:col-span-1 text-small flex-initial md:max-w-[100px] md:min-w-[135px] ">
             {EventDate(event)}
           </div>
           <div className="flex distance-between md:hidden content-center w-full">
             <div className="flex-grow text-left">{EventDate(event)}</div>
             <EventBadge eventType={event.eventType} text={event.eventType} />
           </div>
-          <div className="hidden md:block flex-initial max-w-[106px] w-full lg:col-span-1">
-            <EventBadge eventType={event.eventType} text={event.eventType} />
-          </div>
           <p className="font-medium text-smedium lg:col-span-4 md:text-small flex-grow mb-1 md:mb-0 mr-28 md:mr-0">
             {event.title}
           </p>
           <p className="lg:col-span-1 text-small flex-initial md:min-w-[140px] lg:min-w-[206px]">
             {event.location}
           </p>
-          <div className="md:col-span-1 md:justify-self-end flex-initial md:min-w-[106px]">
+          <div className="hidden md:block flex-initial max-w-[125px] w-full lg:col-span-1">
+            <EventBadge eventType={event.eventType} text={event.eventType} />
+          </div>
+          <div className="md:col-span-1 md:justify-self-end flex-initial md:min-w-[50px]">
             <BiPlus className="group-open:hidden ml-auto text-medium md:text-base -mt-9 md:mt-0" />
             <BiMinus className="hidden group-open:block ml-auto text-medium md:text-base -mt-9 md:mt-0" />
           </div>

diff --git a/pages/events/index.tsx b/pages/events/index.tsx
@@ -62,20 +62,18 @@ export default function NewsPage({
       label: "Concerts",
       value: "Concert",
     },
+    {
+      label: "Film screenings",
+      value: "Film screening",
+    },
   ];
 
   const updateFilter = (value: string, label) => () => {
     if (value == filter) {
-      // router.push(`/events`, undefined, {
-      //   shallow: true,
-      // });
       setFilter("");
       setTitle("events");
       sortEvents(events);
     } else {
-      // router.push(`/events?type=${encodeURIComponent(value)}`, undefined, {
-      //   shallow: true,
-      // });
       setFilter(value);
       setTitle(label.toLowerCase());
       sortEvents(filterEvents(value));
@@ -187,8 +185,6 @@ export default function NewsPage({
 
       <div className="">
         <div className="max-w-screen-xl mx-auto">
-          {/* <pre>{JSON.stringify(upcomingEvents, null, 2)}</pre> */}
-          {/* <pre>{JSON.stringify(pastEvents, null, 2)}</pre> */}
           {Object.keys(upcomingEvents).length > 0 ? (
             <UpcomingEvents events={upcomingEvents} />
           ) : (

diff --git a/types/shared.d.ts b/types/shared.d.ts
@@ -296,7 +296,8 @@ export type EventType =
   | "Hang out"
   | "Exhibition"
   | "Festival"
-  | "Concert";
+  | "Concert"
+  | "Film screening";
 export interface EventInterface {
   title: string;
   coverImage?: CoverImage;