misc design progress and testing

web/src/components/events/EventHeader.tsx

@@ -2,22 +2,62 @@ import { EventCategory, EventFragment } from "@/lib/event";
 import styles from "./eventHeader.module.scss";
 import Image from "@/components/general/Image";
 import { Pig } from "../general/Pig";
+import Link from "next/link";
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
   return (
     <div className={styles.eventHeader}>
       <div className={styles.text}>
+        <span className="suphead breadcrumb">
+          <Link href="/arrangementer">Arrangement</Link>
+        </span>
         <h1 className={styles.title}>{event.title}</h1>
         <div className={styles.details}>
-          <div>Facebook: {event.facebookUrl}</div>
-          <div>Billettlenke: {event.ticketUrl}</div>
-          <div>Ordinær pris: {event.priceRegular}</div>
-          <div>Studentpris: {event.priceStudent}</div>
-          <div>Medlemspris: {event.priceMember}</div>
-          <div>
-            Kategorier:{" "}
-            {event.categories && event.categories.map((x) => x.name).join(", ")}
+          {event.facebookUrl && (
+            <a href={event.facebookUrl} className="button">
+              Gå til Facebook-event
+            </a>
+          )}
+          {event.ticketUrl && (
+            <a href={event.ticketUrl} className="button cta">
+              Kjøp billetter
+            </a>
+          )}
+          <div className={styles.prices}>
+            <h2>Pris</h2>
+            <ul className={styles.priceList}>
+              {!event.priceRegular &&
+                !event.priceStudent &&
+                !event.priceMember && (
+                  <li className={styles.priceItem}>
+                    <span>Gratis</span>
+                  </li>
+                )}
+              {event.priceRegular && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Ordinær:</span>{" "}
+                  {event.priceRegular} kr
+                </li>
+              )}
+              {event.priceStudent && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Student:</span>{" "}
+                  {event.priceStudent} kr
+                </li>
+              )}
+              {event.priceMember && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Medlem:</span>{" "}
+                  {event.priceMember} kr
+                </li>
+              )}
+            </ul>
           </div>
+          {event.categories.length > 0 && (
+            <div>
+              Kategorier: {event.categories.map((x) => x.name).join(", ")}
+            </div>
+          )}
         </div>
       </div>
       <div className={styles.image}>

web/src/components/events/UpcomingEvents.tsx

@@ -8,11 +8,13 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
     <section className={styles.upcomingWrapper}>
       <h2 className="suphead">Denne uka på Chateau Neuf</h2>
       <ul className={styles.eventList}>
-        {events.map((event) => (
+        {events.slice(0, 3).map((event) => (
           <EventItem key={event.id} event={event} mode="list" size="medium" />
         ))}
         <li>
-          <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
+          <div className={styles.calendarLink}>
+            <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
+          </div>
         </li>
       </ul>
     </section>

web/src/components/events/eventItem.module.scss

@@ -14,11 +14,16 @@
     display: grid;
     grid-template-columns: 1fr 2fr;
     column-gap: .6rem;
+    align-items: center;
 
     .title,
     .details {
       font-size: 1rem;
     }
+
+    .image {
+      padding-top: 100%;
+    }
   }
 }
 

web/src/components/events/upcomingEvents.module.scss

@@ -1,6 +1,6 @@
 .upcomingWrapper {
   background: var(--color-deepBrick);
-  color: var(--color-betongGray);
+  color: var(--color-goldenBeige);
   margin: 0 calc(var(--spacing-sitepadding)*-1);
   padding: var(--spacing-sitepadding);
 
@@ -13,9 +13,34 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   list-style: none;
+  align-items: center;
 
   li {
-    border-right: var(--border);
+    //border-right: var(--border);
     margin-right: .6rem;
+    padding-right: 1rem;
+
+    &:last-child {
+      border: none;
+    }
+
+    // testing testing
+    &:first-child {
+
+      >div:first-child {
+        border-radius: 50%;
+      }
+
+      img {
+        display: none;
+      }
+    }
   }
+}
+
+.calendarLink {
+  text-align: center;
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: var(--font-size-lead);
 }