Mobile event card

components/EventCard.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
-  padding: calc(24rem / 16);
+  padding: calc(20rem / 16) 0;
 }
 
 .card aside {
@@ -12,10 +12,10 @@
 
 .card aside img {
   width: 100%;
-  margin-bottom: 1rem;
 }
 
 .registerButton {
+  margin-top: 1rem;
   font-weight: bold;
 }
 
@@ -44,3 +44,69 @@
   font-size: 1rem;
   margin-bottom: calc(14rem / 16);
 }
+
+.mobileLearnMore {
+  display: none;
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .card {
+    flex-direction: column;
+  }
+
+  .card aside {
+    margin: 0;
+  }
+
+  .card aside img {
+    box-sizing: border-box;
+    border: calc(1rem / 16) solid var(--text);
+  }
+
+  .content {
+    margin-top: 1rem;
+  }
+
+  .content {
+    text-align: center;
+  }
+
+  .content > h1,
+  .content > h2 {
+    font-size: 1rem;
+    line-height: calc(30 / 16);
+  }
+
+  .content > h2 {
+    margin-bottom: 0;
+  }
+
+  .mobileShowDescriptionContent {
+    text-align: unset;
+  }
+
+  .mobileShowDescriptionContent > h1 {
+    font-size: calc(24rem / 16);
+    margin-bottom: calc(8rem / 16);
+  }
+
+  .registerButton {
+    display: block;
+  }
+
+  .mobileLearnMore {
+    display: unset;
+  }
+
+  .mobileShowDescriptionContent .mobileLearnMore {
+    display: none;
+  }
+
+  .children {
+    display: none;
+  }
+
+  .mobileShowDescriptionContent .children {
+    display: unset;
+  }
+}

components/EventCard.tsx

@@ -3,10 +3,11 @@ import React, { ReactNode } from "react";
 import { Button } from "./Button";
 import { EventSetting } from "./EventSetting";
 import { Image } from "./Image";
+import { Link } from "./Link";
 
 import styles from "./EventCard.module.css";
 
-interface EventCardProps {
+interface BaseProps {
   name: string;
   short: string;
   date: Date;
@@ -17,7 +18,12 @@ interface EventCardProps {
   children: ReactNode;
 }
 
+type EventCardProps =
+  | (BaseProps & { showDescription?: false; link: string })
+  | (BaseProps & { showDescription: true; link?: string });
+
 export function EventCard({
+  link,
   name,
   date,
   online,
@@ -25,6 +31,7 @@ export function EventCard({
   poster,
   registerLink,
   children,
+  showDescription = false,
 }: EventCardProps) {
   return (
     <article className={styles.card}>
@@ -43,12 +50,22 @@ export function EventCard({
           )}
         </aside>
       )}
-      <section className={styles.content}>
+      <section
+        className={[
+          styles.content,
+          showDescription ? styles.mobileShowDescriptionContent : "",
+        ].join(" ")}
+      >
         <h1>{name}</h1>
         <h2>
           <EventSetting date={date} online={online} location={location} />
         </h2>
-        <div>{children}</div>
+        {!showDescription && link && (
+          <Link href={link}>
+            <span className={styles.mobileLearnMore}>Learn more</span>
+          </Link>
+        )}
+        <div className={styles.children}>{children}</div>
         {!poster && registerLink && (
           <Button
             isLink={true}

components/playground.tsx

@@ -146,13 +146,23 @@ export function EventDescriptionCardDemo() {
 export function EventCardDemo() {
   return (
     <>
-      {events.map(({ Content, metadata }) => (
+      {events.map(({ Content, metadata }, idx) => (
+        <>
           <EventCard
             {...metadata}
-          key={metadata.name + metadata.date.toDateString()}
+            key={metadata.name + metadata.date.toDateString() + "1"}
+            showDescription
           >
             <Content />
           </EventCard>
+          <EventCard
+            {...metadata}
+            key={metadata.name + metadata.date.toDateString() + "2"}
+            link="#"
+          >
+            <Content />
+          </EventCard>
+        </>
       ))}
     </>
   );

lib/events.ts

@@ -27,7 +27,9 @@ export async function getEventTermsByYear(year: string): Promise<string[]> {
 }
 
 interface Metadata {
+  slug: string;
   name: string;
+  poster?: string;
   short: string;
   date: string;
   online: boolean;
@@ -52,7 +54,7 @@ export async function getEventBySlug(
 
   return {
     content: await serialize(content),
-    metadata: metadata as Metadata,
+    metadata: { ...metadata, slug } as Metadata,
   };
 }
 
@@ -122,12 +124,14 @@ export async function getEventsPageProps({
       new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
   );
 
+  const currentDate = Date.now();
+
   const pastEvents = events
-    .filter((event) => new Date(event.metadata.date).getTime() < Date.now())
+    .filter((event) => new Date(event.metadata.date).getTime() < currentDate)
     .reverse();
 
   const futureEvents = events.filter(
-    (event) => new Date(event.metadata.date).getTime() >= Date.now()
+    (event) => new Date(event.metadata.date).getTime() >= currentDate
   );
 
   const current = getCurrentTerm();

pages/events/[year]/[term]/[event].tsx

@@ -18,6 +18,7 @@ export default function EventInfoPage(props: Props) {
     <EventCard
       {...props.event.metadata}
       date={new Date(props.event.metadata.date)}
+      showDescription
     >
       <MDXRemote {...props.event.content} />
     </EventCard>

pages/events/[year]/[term]/index.module.css

@@ -8,12 +8,6 @@
   border-bottom: 1px solid var(--primary-heading);
 }
 
-@media only screen and (max-width: calc(768rem / 16)) {
-  .main {
-    margin-top: calc(60rem / 16);
-  }
-}
-
 .header a {
   color: var(--text);
   font-size: calc(18rem / 16);
@@ -31,3 +25,7 @@
 .miniEventCards {
   margin-top: calc(30rem / 16);
 }
+
+.main > .miniEventCards {
+  margin-top: 0;
+}

pages/events/[year]/[term]/index.tsx

@@ -72,6 +72,7 @@ export default function Term(props: Props) {
                 {...metadata}
                 date={new Date(metadata.date)}
                 key={metadata.name + metadata.date.toString()}
+                link={`/events/${props.year}/${props.term}/${metadata.slug}`}
               >
                 <MDXRemote {...content} />
               </EventCard>