event page progress, date list redesign and details grid

web/src/components/events/DateList.tsx

@@ -20,10 +20,10 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
       <div className={styles.time}>
         <span className={styles.day}>
           {formatExtendedDateTime(occurrence.start, true)}
-        </span>
+        </span>{" "}
         <span className={styles.hour}>
           {formatDate(occurrence.start, timeFormat)}
-        </span>&nbsp;
+        </span>{" "}
         <span className={styles.venue}>
           {occurrence.venue?.preposition + " " ?? ""}
           {occurrence.venue?.url && (
@@ -50,13 +50,19 @@ export const DateList = ({ event }: { event: EventFragment }) => {
   // TODO: end date/time?
   // TODO: past occurrences?
 
+  const [showAllDates, setShowAllDates] = useState(false);
+  function toggleDates() {
+    setShowAllDates(!showAllDates)
+  }
+
   return (
     <div className={styles.dateWrapper}>
-      <h2 className="suphead">
-        Kommende datoer{" "}
-        <span className="number">({futureOccurrences.length})</span>
-      </h2>
-      <ul className={styles.dateList}>
+      <div className={`${styles.header} suphead`}>
+        <span>Dato</span>
+        <span>Tid</span>
+        <span>Sted</span>
+      </div>
+      <ul className={styles.dateList} data-showAll={showAllDates}>
         {futureOccurrences.map((occurrence) => (
           <DateListItem
             key={occurrence.id}
@@ -64,6 +70,11 @@ export const DateList = ({ event }: { event: EventFragment }) => {
           />
         ))}
       </ul>
+      {futureOccurrences.length > 4 && (<div className={styles.showMore}>
+        <button onClick={() => toggleDates()} className="button tertiary">
+          <span>Vis alle kommende datoer ({futureOccurrences.length})</span>
+        </button>
+      </div>)}
       {/* <div onClick={() => setShowPast(!showPast)}>
         {showPast ? "Skjul" : "Vis"} tidligere
       </div>