Features event page updates (#143)

* add details summary to events page * style plus/minus icon for mobile * fix event link and featured event link * add to do * fix event date format and add description to expanded area * add entry price to event row
Refuge-Worldwide · Oct 8, 2024 · d0b7ad5 · d0b7ad5
1 parent c294588
commit d0b7ad5
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 46 deletions.
diff --git a/components/Prose/Prose.tsx b/components/Prose/Prose.tsx
@@ -2,10 +2,13 @@ import type { ReactNode } from "react";
 
 type ProseProps = {
   children: ReactNode;
+  lg?: boolean;
 };
 
-const Prose = ({ children }: ProseProps) => {
-  return <div className="prose max-w-none sm:prose-lg">{children}</div>;
+const Prose = ({ children, lg = true }: ProseProps) => {
+  return (
+    <div className={`prose max-w-none ${lg && "sm:prose-lg"}`}>{children}</div>
+  );
 };
 
 export default Prose;
diff --git a/components/eventRow.tsx b/components/eventRow.tsx
@@ -4,6 +4,10 @@ import Date from "./date";
 import Link from "next/link";
 import { EventInterface } from "../types/shared";
 import dayjs from "dayjs";
+import { BiPlus, BiMinus } from "react-icons/bi";
+import { useRef } from "react";
+import { RenderRichTextWithImages } from "../lib/rich-text";
+import Prose from "./Prose";
 
 export default function EventRow({
   event,
@@ -12,10 +16,29 @@ export default function EventRow({
   event: EventInterface;
   past?: boolean;
 }) {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+    const details = e.currentTarget;
+    const content = contentRef.current;
+
+    if (details.open) {
+      content!.style.height = `${content!.scrollHeight}px`;
+      setTimeout(() => {
+        content!.style.height = "auto";
+      }, 300);
+    } else {
+      content!.style.height = `${content!.scrollHeight}px`;
+      setTimeout(() => {
+        content!.style.height = "0px";
+      }, 0);
+    }
+  };
+
   return (
-    <li className="block border-b border-black hover:bg-blue transition-all duration-100 px-4 sm:px-8">
-      <EventLink event={event}>
-        <div className="py-5 lg:grid-cols-8 md:flex md:gap-x-6 lg:gap-x-12 xl:gap-x-24 md:items-center">
+    <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] ">
             {EventDate(event)}
           </div>
@@ -26,54 +49,53 @@ export default function EventRow({
           <div className="hidden md:block flex-initial max-w-[106px] w-full lg:col-span-1">
             <EventBadge eventType={event.eventType} text={event.eventType} />
           </div>
-          {/* <div className="h-3 md:hidden" /> */}
           <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>
-          {/* <div className="h-3 md:hidden" /> */}
           <p className="lg:col-span-1 text-small flex-initial md:min-w-[140px] lg:min-w-[206px]">
             {event.location}
           </p>
-          <div className="h-3 md:hidden" />
-          <div className="md:col-span-1 md:justify-self-end flex-initial md:min-w-[106px] text-align-right">
-            {(() => {
-              if (event.article && event.article?.type == "Article") {
-                return (
-                  <p className="inline-flex gap-5 text-small font-medium md:w-full md:justify-end">
-                    More info <Arrow />
-                  </p>
-                );
-              } else if (event.article && event.article?.type == "Workshop") {
-                return (
-                  <p className="inline-flex gap-5 text-small font-medium md:w-full md:justify-end">
-                    {event.linkText ? event.linkText : "Apply"}
-                    <Arrow />
-                  </p>
-                );
-              } else if (event.ticketLink) {
-                return (
-                  <p className="inline-flex gap-5 text-small font-medium md:w-full md:justify-end">
-                    {event.linkText ? event.linkText : "Tickets"}
-                    <Arrow />
-                  </p>
-                );
-              } else if (event.linkText) {
-                return (
-                  <p className="inline-flex gap-5 text-small font-medium md:w-full md:justify-end">
-                    {event.linkText}
-                    <Arrow className="invisible" />
-                  </p>
-                );
-              }
-            })()}
+          <div className="md:col-span-1 md:justify-self-end flex-initial md:min-w-[106px]">
+            <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>
+        </summary>
+        <div
+          ref={contentRef}
+          className="overflow-hidden transition-height duration-200 ease-in-out"
+          style={{ height: "0px" }}
+        >
+          <div className="mt-4 mb-8">
+            <div className="space-y-4 mb-4">
+              <p className="text-small">
+                <span className="font-medium">When:</span>{" "}
+                {EventDate(event, true)}
+              </p>
+              <p className="text-small">
+                <span className="font-medium">Where:</span> {event.location}
+              </p>
+              {event.price && (
+                <p className="text-small">
+                  <span className="font-medium">Entry:</span> {event.price}
+                </p>
+              )}
+              <p className="text-small max-w-prose">
+                {event.description && (
+                  <Prose lg={false}>
+                    {RenderRichTextWithImages(event.description)}
+                  </Prose>
+                )}
+              </p>
+            </div>
+            <EventLink event={event} />
           </div>
         </div>
-      </EventLink>
+      </details>
     </li>
   );
 }
 
-export function EventLink({ event, children }) {
+export function FeaturedEventLink({ event, children }) {
   if (event.article && event.article?.type == "Article")
     return <Link href={`/news/${event.article.slug}`}>{children}</Link>;
   if (event.article && event.article?.type == "Workshop")
@@ -85,12 +107,93 @@ export function EventLink({ event, children }) {
   );
 }
 
-function EventDate(event) {
+function EventLink({ event }) {
+  if (event.article && event.article?.type == "Article")
+    return (
+      <Link
+        href={`/news/${event.article.slug}`}
+        className="inline-flex gap-5 text-small font-medium md:w-full"
+      >
+        More info <Arrow />
+      </Link>
+    );
+  else if (event.article && event.article?.type == "Workshop")
+    return (
+      <Link
+        href={`/workshops/${event.article.slug}`}
+        className="inline-flex gap-5 text-small font-medium md:w-full"
+      >
+        {event.linkText ? event.linkText : "Apply"}
+        <Arrow />
+      </Link>
+    );
+  else if (event.ticketLink)
+    return (
+      <Link
+        href={event.ticketLink}
+        className="inline-flex gap-5 text-small font-medium md:w-full"
+      >
+        {event.linkText ? event.linkText : "Tickets"}
+        <Arrow />
+      </Link>
+    );
+}
+
+function EventDate(event, expanded = false) {
+  const start = dayjs(event.date);
+  const end = dayjs(event.endDate);
+  const isSameDay = start.isSame(end, "day");
+  const isSameMonth = start.isSame(end, "month");
   return (
     <span className="text-small">
       {event.endDate ? (
         <span>
-          {sameMonth(event.date, event.endDate) ? (
+          {isSameDay ? (
+            <span>
+              <Date dateString={event.date} formatString="DD MMM" />
+              {expanded && (
+                <>
+                  {", "}
+                  <Date dateString={event.date} formatString="HH:mm" />-
+                  <Date dateString={event.endDate} formatString="HH:mm" />
+                </>
+              )}
+            </span>
+          ) : isSameMonth ? (
+            <span>
+              <Date dateString={event.date} formatString="DD" />—
+              <Date dateString={event.endDate} />
+            </span>
+          ) : (
+            <span>
+              <Date dateString={event.date} formatString="DD MMM" />
+              —
+              <br className="hidden md:block" />
+              <Date dateString={event.endDate} />
+            </span>
+          )}
+        </span>
+      ) : (
+        <Date dateString={event.date} />
+      )}
+    </span>
+  );
+}
+
+function EventDateExpanded(event) {
+  const start = dayjs(event.date);
+  const end = dayjs(event.endDate);
+  const isSameDay = start.isSame(end, "day");
+  const isSameMonth = start.isSame(end, "month");
+  return (
+    <span className="text-small">
+      {event.endDate ? (
+        <span>
+          {isSameDay ? (
+            <span>
+              <Date dateString={event.date} formatString="DD MMM" />
+            </span>
+          ) : isSameMonth ? (
             <span>
               <Date dateString={event.date} formatString="DD" />—
               <Date dateString={event.endDate} />

diff --git a/lib/contentful/fragments.ts b/lib/contentful/fragments.ts
@@ -112,6 +112,10 @@ export const EventFragment = /* GraphQL */ `
     location
     ticketLink
     linkText
+    description {
+      json
+    }
+    price
     article {
       ... on Article {
         type: __typename

diff --git a/styles/globals.css b/styles/globals.css
@@ -411,3 +411,9 @@
     transform: translatey(0px);
   }
 }
+
+/* events accordion */
+
+.event-accordion > summary::-webkit-details-marker {
+  display: none;
+}
diff --git a/types/shared.d.ts b/types/shared.d.ts
@@ -308,6 +308,8 @@ export interface EventInterface {
   ticketLink: string;
   linkText: string;
   article: Object<{ slug: string }>;
+  description?: Content;
+  price?: string;
 }
 
 export interface WorkshopInterface {

diff --git a/views/events/featuredEvents.tsx b/views/events/featuredEvents.tsx
@@ -6,7 +6,7 @@ import Date from "../../components/date";
 import { EventBadge } from "../../components/badge";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import "@splidejs/react-splide/css/core";
-import { EventLink } from "../../components/eventRow";
+import { FeaturedEventLink } from "../../components/eventRow";
 
 export default function FeaturedEvents({
   events,
@@ -44,7 +44,7 @@ export default function FeaturedEvents({
               }`}
               key={i}
             >
-              <EventLink event={event}>
+              <FeaturedEventLink event={event}>
                 <div className="flex flex-col md:w-auto md:h-auto">
                   <Image
                     key={event.coverImage.sys.id}
@@ -82,7 +82,7 @@ export default function FeaturedEvents({
                   {" "}
                   <Date dateString={event.date} />
                 </p>
-              </EventLink>
+              </FeaturedEventLink>
             </SplideSlide>
           ))}
         </Splide>