From 6ccc6082ecd6bcab4d6dd5019e12a85455886403 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 10 Jun 2024 14:07:48 +0200
Subject: [PATCH] update date list, change news list grid

---
 web/src/app/arrangementer/[slug]/page.tsx     |  3 +-
 web/src/components/events/DateList.tsx        | 59 ++-----------------
 .../components/events/dateList.module.scss    | 16 +++++
 web/src/components/news/newsList.module.scss  |  6 +-
 4 files changed, 28 insertions(+), 56 deletions(-)

diff --git a/web/src/app/arrangementer/[slug]/page.tsx b/web/src/app/arrangementer/[slug]/page.tsx
index 26312a9..9f581fe 100644
--- a/web/src/app/arrangementer/[slug]/page.tsx
+++ b/web/src/app/arrangementer/[slug]/page.tsx
@@ -1,6 +1,6 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
-import { DateList, DateListDemo } from "@/components/events/DateList";
+import { DateList } from "@/components/events/DateList";
 import { DateListOld } from "@/components/events/DateListOld";
 import { EventHeader } from "@/components/events/EventHeader";
 import { BgPig } from "@/components/general/BgPig";
@@ -57,7 +57,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
         <EventHeader event={event} />
         <section className="pageContent">
           <DateList event={event} />
-          <DateListDemo />
           <DateListOld />
           <Blocks blocks={event.body} />
         </section>
diff --git a/web/src/components/events/DateList.tsx b/web/src/components/events/DateList.tsx
index 86cf380..a0dd332 100644
--- a/web/src/components/events/DateList.tsx
+++ b/web/src/components/events/DateList.tsx
@@ -13,8 +13,12 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
   return (
     <li className={styles.date}>
       <div className={styles.time}>
-        <span>{formatDate(occurrence.start, dateFormat)}</span>&nbsp;
-        <span>{formatDate(occurrence.start, timeFormat)}</span>
+        <span className={styles.day}>
+          {formatDate(occurrence.start, dateFormat)}
+        </span>
+        <span className={styles.hour}>
+          {formatDate(occurrence.start, timeFormat)}
+        </span>
       </div>
       <div className={styles.venue}>
         <span>
@@ -82,54 +86,3 @@ export const DateList = ({ event }: { event: EventFragment }) => {
     </div>
   );
 };
-
-export const DateListDemo = () => {
-  return (
-    <div className={styles.dateWrapper}>
-      <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}>
-            <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>
-  );
-};
diff --git a/web/src/components/events/dateList.module.scss b/web/src/components/events/dateList.module.scss
index 6a31489..a54b87f 100644
--- a/web/src/components/events/dateList.module.scss
+++ b/web/src/components/events/dateList.module.scss
@@ -13,12 +13,28 @@
   line-height: 1.2;
   border-right: var(--border);
   padding-right: 1rem;
+
+  &:last-child {
+    border: none;
+  }
 }
 
 .time {
   width: 100%;
 }
 
+.day {
+  display: block;
+
+  &:first-letter {
+    text-transform: capitalize;
+  }
+}
+
+.hour {
+  display: block;
+}
+
 .venue {
   font-style: italic;
 }
\ No newline at end of file
diff --git a/web/src/components/news/newsList.module.scss b/web/src/components/news/newsList.module.scss
index d8a974f..7315977 100644
--- a/web/src/components/news/newsList.module.scss
+++ b/web/src/components/news/newsList.module.scss
@@ -48,7 +48,11 @@
       &:nth-child(3),
       &:nth-child(4),
       &:nth-child(5) {
-        grid-column: span 4;
+        grid-column: span 3;
+
+        h2 {
+          font-size: 1.4rem;
+        }
       }
     }
   }