add days back to upcoming events, tidy up design a little

web/src/components/events/EventItem.tsx

@@ -51,32 +51,39 @@ export const EventItem = ({
           />
         )}
       </div>
-      <div className={styles.time}>
+      <div className={styles.text}>
-        {mode === "list" && nextOccurrence && (
+        {mode === "singular-time-only" &&
-          <div className={styles.dates}>
-            {groupedOccurrences.slice(0, DATE_PILLS_TO_SHOW).map((group) => (
-              <span key={group[0]} className={styles.datePill}>
-                {formatDateRange(group)}
-              </span>
-            ))}
-            {groupedOccurrences.length > DATE_PILLS_TO_SHOW && (
-              <span className={styles.moreDates}>{`+${groupedOccurrences
-                .slice(DATE_PILLS_TO_SHOW)
-                .reduce((sum, group) => sum + group.length, 0)}`}</span>
-            )}
-          </div>
-        )}
-        {(mode === "calendar" || mode === "singular-time-only") &&
           "occurrence" in event &&
           event.occurrence?.start && (
-            <p className={styles.dates}>
+            <p className={styles.day}>
-              {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
+              {formatDate(event.occurrence?.start, "eeee dd.MM.")}
             </p>
           )}
-      </div>
-      <div className={styles.text}>
         <h1 className={styles.title}>{event.title}</h1>
         <p className={styles.details}>Evt. andre detaljer</p>
+        <div className={styles.time}>
+          {mode === "list" && nextOccurrence && (
+            <div className={styles.dates}>
+              {groupedOccurrences.slice(0, DATE_PILLS_TO_SHOW).map((group) => (
+                <span key={group[0]} className={styles.datePill}>
+                  {formatDateRange(group)}
+                </span>
+              ))}
+              {groupedOccurrences.length > DATE_PILLS_TO_SHOW && (
+                <span className={styles.moreDates}>{`+${groupedOccurrences
+                  .slice(DATE_PILLS_TO_SHOW)
+                  .reduce((sum, group) => sum + group.length, 0)}`}</span>
+              )}
+            </div>
+          )}
+          {(mode === "calendar" || mode === "singular-time-only") &&
+            "occurrence" in event &&
+            event.occurrence?.start && (
+              <p className={styles.dates}>
+                {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
+              </p>
+            )}
+        </div>
       </div>
       <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
         Mer om arrangementet {event.title}

web/src/components/events/UpcomingEvents.tsx

@@ -28,12 +28,12 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
           const eventsThisDay = eventsByDate[day];
           return (
             <div key={day}>
-              <h3>
+              {/*<h3>
                 {formatDate(
                   parse(day, "yyyy-MM-dd", new Date()),
                   "eeee dd.MM."
                 )}
-              </h3>
+              </h3>*/}
               <ul>
                 {eventsThisDay.map((event) => (
                   <EventItem

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

@@ -20,7 +20,6 @@
 
   &.medium {
     --size-image-width: 8rem;
-    grid-template-rows: 1fr 2fr;
     grid-template-columns: var(--size-image-width) auto;
     column-gap: .6rem;
     align-items: center;
@@ -28,7 +27,6 @@
 
     .image {
       width: var(--size-image-width);
-      grid-row: span 2;
     }
 
     .dates,
@@ -37,6 +35,18 @@
       font-size: var(--font-size-body);
     }
 
+    .day {
+      &:first-letter {
+        text-transform: uppercase;
+      }
+      font-family: var(--font-serif);
+      font-size: var(--font-size-caption);
+    }
+
+    .title {
+      margin: .2em 0;
+    }
+
     .dates {
       font-size: var(--font-size-caption);
     }

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

@@ -31,12 +31,16 @@
 
 .eventList {
   --size-item-width: 20rem;
-  padding: var(--spacing-s) 0;
+  margin-bottom: var(--spacing-xs);
   list-style: none;
   display: flex;
   width: calc(var(--size-item-width) * 10);
   position: relative;
 
+  ul {
+    display: flex;
+  }
+
   li {
     padding-right: var(--spacing-s);
   }