new date list, event page progress

web/src/app/arrangementer/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import { DateList } from "@/components/events/DateList";
+import { DateListOld } from "@/components/events/DateListOld";
 import { EventHeader } from "@/components/events/EventHeader";
 import { BgPig } from "@/components/general/BgPig";
 import { graphql } from "@/gql";
@@ -54,6 +55,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         <EventHeader event={event} />
         <section className="pageContent">
           <DateList />
+          <DateListOld />
           <Blocks blocks={event.body} />
         </section>
       </main>

web/src/components/events/DateList.tsx

@@ -3,7 +3,12 @@ import styles from "./dateList.module.scss";
 export const DateList = () => {
   return (
     <div className={styles.dateWrapper}>
-      <h2 className="suphead">Kommende datoer</h2>
+      <h2 className="circlehead">
+        <span className="circle"></span>
+        <span className="circle"></span>
+        <span className="circle"></span>Kommende datoer{" "}
+        <span className="number">(4)</span>
+      </h2>
       <ul className={styles.dateList}>
         <li className={styles.date}>
           <div className={styles.time}>

web/src/components/events/DateListOld.tsx

@@ -0,0 +1,47 @@
+import styles from "./dateListOld.module.scss";
+
+export const DateListOld = () => {
+  return (
+    <div className={styles.dateWrapper}>
+      <h2 className="suphead">Kommende datoer (4)</h2>
+      <ul className={styles.dateList}>
+        <li className={styles.date}>
+          <div className={styles.time}>
+            <span>27/05/2024</span>&nbsp;
+            <span>18.00</span>
+          </div>
+          <div className={styles.venue}>
+            <span>Storsalen</span>
+          </div>
+        </li>
+        <li className={styles.date}>
+          <div className={styles.time}>
+            <span>Mandag 27. mai 2024</span>&nbsp;
+            <span>kl. 18.00</span>
+            <div className={styles.venue}>
+              <span>i Storsalen</span>
+            </div>
+          </div>
+        </li>
+        <li className={styles.date}>
+          <div className={styles.time}>
+            <span>27. mai 2024</span>&nbsp;
+            <span>kl. 18.00</span>
+          </div>
+          <div className={styles.venue}>
+            <span>Storsalen</span>
+          </div>
+        </li>
+        <li className={styles.date}>
+          <div className={styles.venue}>
+            <span>Storsalen</span>
+          </div>
+          <div className={styles.time}>
+            <span>27.05.2024</span>&nbsp;
+            <span>18.00</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+};

web/src/components/events/EventHeader.tsx

@@ -15,18 +15,9 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
         </span>
         <h1 className={styles.title}>{event.title}</h1>
         <div className={styles.details}>
-          {event.facebookUrl && (
+          <p>Vise neste dato her?</p>
-            <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>
+            {/*<h2>Pris</h2>*/}
             <ul className={styles.priceList}>
               {!event.priceRegular &&
                 !event.priceStudent &&
@@ -55,6 +46,16 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
               )}
             </ul>
           </div>
+          {event.ticketUrl && (
+            <a href={event.ticketUrl} className="button cta">
+              Kjøp billetter
+            </a>
+          )}
+          {event.facebookUrl && (
+            <a href={event.facebookUrl} className="textLink">
+              Gå til Facebook-event
+            </a>
+          )}
           {event.categories.length > 0 && (
             <div>
               Kategorier: {event.categories.map((x) => x.name).join(", ")}

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

@@ -1,30 +1,18 @@
 .dateList {
   list-style: none;
-  margin: 1rem 0 var(--spacing-sitepadding);
+  margin: 0 calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*2);
+  padding: 0 var(--spacing-sitepadding);
   display: flex;
-  gap: var(--spacing-gap-column);
+  gap: 1rem;
 }
 
 .date {
   font-family: var(--font-serif);
-  font-size: var(--font-size-lead);
+  font-size: var(--font-size-body);
-  margin-bottom: 1rem;
-  padding-left: 4rem;
   position: relative;
-  min-height: 3.2rem;
   line-height: 1.2;
-
+  border-right: var(--border);
-  &:before {
+  padding-right: 1rem;
-    content: "";
-    display: block;
-    width: 3.2rem;
-    height: 3.2rem;
-    border-radius: 100%;
-    background: var(--color-goldenBeige);
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
 }
 
 .time {

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

@@ -0,0 +1,38 @@
+.dateList {
+  list-style: none;
+  background: var(--color-background-secondary);
+  margin: 1rem calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+  display: flex;
+  gap: var(--spacing-gap-column);
+}
+
+.date {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-lead);
+  margin-bottom: 1rem;
+  padding-left: 4rem;
+  position: relative;
+  min-height: 3.2rem;
+  line-height: 1.2;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 3.2rem;
+    height: 3.2rem;
+    border-radius: 100%;
+    background: var(--color-goldenBeige);
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+
+.time {
+  width: 100%;
+}
+
+.venue {
+  font-style: italic;
+}

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

@@ -21,7 +21,49 @@
   }
 }
 
-.details {
+.details {}
-  font-family: var(--font-serif);
+
-  font-size: var(--font-size-lead);
+.prices {
+  margin: 2rem 0 1rem;
+
+  h2 {
+    font-size: 1rem;
+    font-family: var(--font-main);
+  }
+}
+
+.priceList {
+  list-style: none;
+  display: flex;
+}
+
+.priceItem {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-caption);
+  position: relative;
+  padding: 0 1.5rem 0 1rem;
+
+  &:after {
+    content: "/";
+    font-family: var(--font-serif);
+    font-size: 2rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+    line-height: 1.2;
+  }
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.priceLabel {
+  display: block;
 }

web/src/css/base.scss

@@ -166,6 +166,21 @@ input[type="text"] {
   transition: opacity var(--transition-easing);
 }
 
+.number {
+  font-family: var(--font-serif);
+  font-weight: 400;
+}
+
+.textLink {
+  font-family: var(--font-serif);
+  font-style: italic;
+  display: block;
+
+  &:after {
+    content: "→";
+  }
+}
+
 .hiddenLink {
   position: absolute;
   top: 0;