From ab2bc3c7efe6a09eba70d66c66dff3af7bae4208 Mon Sep 17 00:00:00 2001
From: Noe Terrier <noeterrier@proton.me>
Date: Mon, 20 Jan 2025 20:41:54 +0100
Subject: [PATCH] style: styling ICBD timetable and page for mobile

---
 directus                             |   2 +-
 src/components/Timetable.tsx         | 111 ++++++++--------
 src/pages/icbd.tsx                   |  22 ++--
 src/styles/ICBDPage.module.scss      |   6 +
 src/styles/Page.module.scss          |   2 +
 src/styles/Timetable.module.scss     | 182 ++++++++++++++++-----------
 src/styles/utilities/_variables.scss |   3 +-
 7 files changed, 195 insertions(+), 133 deletions(-)

diff --git a/directus b/directus
index 291059f..ba40113 160000
--- a/directus
+++ b/directus
@@ -1 +1 @@
-Subproject commit 291059f9d85a367c76c93d85c23cc7e4f77df4b4
+Subproject commit ba40113649d9ac92ba83606b2e3ae7a0b732a9e9
diff --git a/src/components/Timetable.tsx b/src/components/Timetable.tsx
index 756c6f7..833c8d8 100644
--- a/src/components/Timetable.tsx
+++ b/src/components/Timetable.tsx
@@ -16,25 +16,37 @@ function timeToMinutes(time: string) {
   return hours * 60 + minutes + seconds / 60;
 }
 
-function Hours(props: { startTime: number; endTime: number }) {
-  let startHour = props.startTime / 60;
-  const endHour = props.endTime / 60;
+function generateHourEntries(
+  startTime: number,
+  endTime: number,
+  isLine: boolean
+) {
+  const startHour = startTime / 60;
+  const endHour = endTime / 60;
   const numberOfHours = endHour - startHour;
 
-  let hours: any[] = [];
+  return Array.from({ length: numberOfHours + 1 }, (_, i) => {
+    const hour = startHour + i;
+    const style = hour === endHour ? {} : { height: `${100 / numberOfHours}%` };
 
-  for (; startHour <= endHour; startHour++) {
-    let style =
-      startHour == endHour ? {} : { height: `${100 / numberOfHours}%` };
-    hours.push(
-      <div key={startHour} style={style} className={styles.hourEntry}>
-        <span className={styles.line} />
-        <p>{`${startHour}h`}</p>
+    return isLine ? (
+      <span key={hour} style={style} className={styles.line} />
+    ) : (
+      <div key={hour} style={style} className={styles.hourEntry}>
+        <p>{`${hour}h`}</p>
       </div>
     );
-  }
+  });
+}
+
+function Lines(props: { startTime: number; endTime: number }) {
+  const lines = generateHourEntries(props.startTime, props.endTime, true);
+  return <div className={styles.lines}>{lines}</div>;
+}
 
-  return <>{hours}</>;
+function Hours(props: { startTime: number; endTime: number }) {
+  const hours = generateHourEntries(props.startTime, props.endTime, false);
+  return <div className={styles.hours}>{hours}</div>;
 }
 
 function TimeTableEvent(props: {
@@ -119,17 +131,14 @@ export function Timetable(props: { activities: ICBDActivity[] }) {
       JSON.stringify(activity.timeslots)
     );
 
-    timeslots.forEach((timeslot) => {
-      let tStartTime = timeToMinutes(timeslot.start_time);
+    timeslots.forEach(({ start_time, end_time, room }) => {
+      let tStartTime = timeToMinutes(start_time);
       startTime = Math.min(tStartTime, startTime);
-      let tEndTime = timeToMinutes(timeslot.end_time);
+      let tEndTime = timeToMinutes(end_time);
       endTime = Math.max(tEndTime, endTime);
 
-      let groupKey = timeslot.room;
-      if (!rooms[groupKey]) {
-        rooms[groupKey] = [];
-      }
-      rooms[groupKey].push([timeslot, activity]);
+      if (!rooms[room]) rooms[room] = [];
+      rooms[room].push([{ start_time, end_time, room }, activity]);
     });
   });
 
@@ -138,34 +147,36 @@ export function Timetable(props: { activities: ICBDActivity[] }) {
   let formattedEndTime = hours + ":" + minutes;
 
   return (
-    <>
-      <table className={styles.table}>
-        <tbody>
-          <tr>
-            <th />
-            {Object.keys(rooms).map((room) => (
-              <th className={styles.header} key={"header|" + room}>
-                <p>{room}</p>
-              </th>
-            ))}
-          </tr>
-          <tr>
-            <td className={styles.hours}>
-              <Hours startTime={startTime} endTime={endTime} />
-            </td>
-            {Object.keys(rooms).map((room) => (
-              <td key={"entry|" + room}>
-                <TimetableEntry
-                  timeslots={rooms[room]}
-                  startTime={startTime}
-                  endTime={endTime}
-                />
-              </td>
-            ))}
-          </tr>
-        </tbody>
-      </table>
-      <p>{`${tt["icbd-end-of-event"]} ${formattedEndTime}`}</p>
-    </>
+    <div className={styles.main}>
+      <Hours startTime={startTime} endTime={endTime} />
+      <div className={styles.timetable}>
+        <Lines startTime={startTime} endTime={endTime} />
+        <table className={styles.table}>
+          <tbody>
+            <tr>
+              {Object.keys(rooms).map((room) => (
+                <th className={styles.header} key={"header|" + room}>
+                  <p>{room}</p>
+                </th>
+              ))}
+            </tr>
+            <tr style={{ height: "100%" }}>
+              {Object.keys(rooms).map((room) => (
+                <td key={"entry|" + room}>
+                  <TimetableEntry
+                    timeslots={rooms[room]}
+                    startTime={startTime}
+                    endTime={endTime}
+                  />
+                </td>
+              ))}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p className={styles.end}>
+        {`${tt["icbd-end-of-event"]} ${formattedEndTime}`}
+      </p>
+    </div>
   );
 }
diff --git a/src/pages/icbd.tsx b/src/pages/icbd.tsx
index 464f33e..bdc76a3 100644
--- a/src/pages/icbd.tsx
+++ b/src/pages/icbd.tsx
@@ -5,7 +5,7 @@ import ParticlesComponent from "@/components/Particles";
 import TabTitle from "@/components/TabTitle";
 import { Timetable } from "@/components/Timetable";
 import { directus, getDirectusImageUrl, populateLayoutProps } from "@/directus";
-import { getTranslation } from "@/locales";
+import { getTranslation, useTranslationTable } from "@/locales";
 import style from "@/styles/ICBDPage.module.scss";
 import pageStyle from "@/styles/Page.module.scss";
 import { ICBD, ICBDActivity, ICBDPhd, ICBDSpeaker } from "@/types/aliases";
@@ -38,6 +38,8 @@ export default function ICBDPage(
     props.icbd.start_time || ""
   )} to ${formatTime(props.icbd.end_time || "")}, ${props.icbd.place}`;
 
+  const tt = useTranslationTable();
+
   return (
     <>
       <style jsx global>{`
@@ -67,7 +69,7 @@ export default function ICBDPage(
         <div className={pageStyle.main}>
           <div className={pageStyle.center}>
             <div className={style.registration}>
-              <h1>Registration</h1>
+              <h1>{tt["icbd.registration"]}</h1>
               <Markdown>{translation.registration_instructions}</Markdown>
               {/* <div className={style.buttons}>
                 <script
@@ -140,8 +142,8 @@ export default function ICBDPage(
         </div>
 
         <div className={pageStyle.main}>
-          <h1>Alumni</h1>
-          <h2>speakers present at the event</h2>
+          <h1>{tt["icbd.alumni"]}</h1>
+          <h2>{tt["icbd.alumni-description"]}</h2>
 
           <div className={style.alumni}>
             <div className={style.alumniList}>
@@ -158,8 +160,8 @@ export default function ICBDPage(
         </div>
 
         <div className={pageStyle.main}>
-          <h1>PHD students</h1>
-          <h2>during the poster session</h2>
+          <h1>{tt["icbd.phds"]}</h1>
+          <h2>{tt["icbd.phds-description"]}</h2>
           <div className={style.alumni}>
             <div className={style.alumniList}>
               {props.phds.map((phd: ICBDPhd) => (
@@ -175,12 +177,14 @@ export default function ICBDPage(
         </div>
 
         <div className={pageStyle.main}>
-          <h1>Timetable</h1>
-          <Timetable activities={props.activities} />
+          <h1>{tt["icbd.timetable"]}</h1>
+          <div className={style.timetable}>
+            <Timetable activities={props.activities} />
+          </div>
         </div>
 
         <div className={style.activities}>
-          <h1>Activities</h1>
+          <h1>{tt["icbd.activities"]}</h1>
 
           <div className={style.activitiesList}>
             {props.activities.map((activity: ICBDActivity) => (
diff --git a/src/styles/ICBDPage.module.scss b/src/styles/ICBDPage.module.scss
index b66e360..5a0ab62 100644
--- a/src/styles/ICBDPage.module.scss
+++ b/src/styles/ICBDPage.module.scss
@@ -143,7 +143,13 @@
 
 .timetable {
   height: 60rem;
+  max-width: 80%;
   width: 80%;
+
+  @media (max-width: 1000px) {
+    max-width: 95%;
+    width: 95%;
+  }
 }
 
 .title {
diff --git a/src/styles/Page.module.scss b/src/styles/Page.module.scss
index f42c3ad..c61c353 100644
--- a/src/styles/Page.module.scss
+++ b/src/styles/Page.module.scss
@@ -15,6 +15,8 @@
 
   background-color: variables.$white-background-color;
   min-width: 100vw;
+  max-width: 100vw;
+  width: 100vw;
 
   padding-top: 3rem;
   padding-bottom: 3rem;
diff --git a/src/styles/Timetable.module.scss b/src/styles/Timetable.module.scss
index 0282aee..f4b91e9 100644
--- a/src/styles/Timetable.module.scss
+++ b/src/styles/Timetable.module.scss
@@ -1,39 +1,33 @@
 @use "./utilities/variables";
 
-.table {
-  width: min(90%, 100rem);
-  height: 800px;
-  border-collapse: collapse;
-  overflow: hidden;
-
-  @media (max-width: 1000px) {
-    height: 600px;
-  }
+$header-height: 3rem;
 
-  td {
-    padding: 2rem 0 2rem 0;
-    height: 100%;
-  }
+.main {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 
-  tbody {
-    td:nth-child(odd):not(.hours) {
-      background-color: variables.$icbd-table-gray-column; // Apply style to even items
-    }
+  .hours {
+    position: absolute;
+    left: 0;
+    height: calc(100% - $header-height - 8rem);
+    width: 2rem;
 
-    td:nth-child(even) {
-      background-color: white; // Apply style to odd items
-    }
-  }
+    z-index: 1;
 
-  .hours {
-    width: 50px;
-    border-radius: variables.$small-border-radius 0 0
-      variables.$small-border-radius;
+    margin-top: 2rem;
+    padding: 3rem 1rem 3rem 1rem;
     background-color: variables.$icbd-table-gray-hours;
+    backdrop-filter: blur(100px) saturate(180%);
+
+    border-radius: variables.$small-border-radius;
+
+    border: solid 2px rgba($color: #fff, $alpha: 0.5);
 
     .hourEntry {
       text-align: right;
-      padding-right: 0.5rem;
       position: relative;
 
       p {
@@ -43,66 +37,110 @@
         text-align: right;
         color: grey;
       }
-
-      .line {
-        position: absolute;
-        height: 1px;
-        width: 100vw;
-        background-color: variables.$icbd-table-gray-hours;
-
-        transform: translateY(-1px);
-        left: 100%;
-      }
     }
   }
 
-  .header {
-    width: 10rem;
-  }
-
-  .entry {
+  .timetable {
+    padding-left: 4rem;
     height: 100%;
     display: flex;
     position: relative;
-    overflow: hidden;
+    overflow-y: hidden;
+    overflow-x: scroll;
 
-    border-right: variables.$icbd-table-gray-hours;
-    border-top: variables.$icbd-table-gray-hours;
-    border-bottom: variables.$icbd-table-gray-hours;
+    .lines {
+      position: relative;
+      margin-top: $header-height;
+      padding: 2rem 0 2rem 0;
+      width: 0;
 
-    .event {
-      display: flex;
-      position: absolute;
-      align-items: center;
-      justify-content: center;
+      .line {
+        display: block;
+        position: relative;
+        min-width: 1500px;
+        border-top: solid 2px variables.$icbd-table-line;
+        box-sizing: border-box;
+      }
+    }
 
-      width: calc(100% - 0.4rem);
-      height: calc(100% - 0.4rem);
+    .table {
+      min-width: 1500px;
+      border-collapse: collapse;
+      overflow: hidden;
 
-      margin: 0.2rem;
+      tbody {
+        td {
+          padding: 1rem 0 1rem 0;
+          height: 100%;
+        }
 
-      border-radius: 10px;
+        td:nth-child(odd):not(.hours) {
+          background-color: white; // Apply style to odd items
+        }
 
-      p {
-        color: white;
-        text-align: left;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: 0.75rem;
-        max-height: 80%;
-        max-width: 80%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        overflow-y: scroll;
-
-        /* Hide scrollbar for IE, Edge and Firefox */
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-        /* Hide scrollbar for Chrome, Safari and Opera */
-        &::-webkit-scrollbar {
-          display: none;
+        td:nth-child(even) {
+          background-color: variables.$icbd-table-gray-column; // Apply style to even items
+        }
+      }
+
+      .header {
+        width: 10rem;
+        height: $header-height;
+        p {
+          margin: 0;
+        }
+      }
+
+      .entry {
+        height: 100%;
+        position: relative;
+        min-width: 10rem;
+
+        border-right: variables.$icbd-table-gray-hours;
+        border-top: variables.$icbd-table-gray-hours;
+        border-bottom: variables.$icbd-table-gray-hours;
+
+        .event {
+          display: flex;
+          position: absolute;
+          align-items: center;
+          justify-content: center;
+
+          width: calc(100% - 0.4rem);
+          height: calc(100% - 0.4rem);
+
+          margin: 0.2rem;
+
+          border-radius: 10px;
+
+          p {
+            color: white;
+            text-align: left;
+            text-transform: uppercase;
+            font-weight: bold;
+            font-size: 0.75rem;
+            max-height: 80%;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            overflow-y: scroll;
+
+            /* Hide scrollbar for IE, Edge and Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+            scrollbar-width: none; /* Firefox */
+            /* Hide scrollbar for Chrome, Safari and Opera */
+            &::-webkit-scrollbar {
+              display: none;
+            }
+          }
         }
       }
     }
   }
+
+  .end {
+    margin: 1rem;
+    height: 2rem;
+    text-align: center;
+  }
 }
diff --git a/src/styles/utilities/_variables.scss b/src/styles/utilities/_variables.scss
index 2a2bf8e..490b59a 100644
--- a/src/styles/utilities/_variables.scss
+++ b/src/styles/utilities/_variables.scss
@@ -30,4 +30,5 @@ $icbd-gradient: linear-gradient(
 );
 
 $icbd-table-gray-column: rgb(246, 246, 246);
-$icbd-table-gray-hours: rgb(235, 235, 235);
+$icbd-table-gray-hours: rgba(235, 235, 235, 0.5);
+$icbd-table-line: rgba(235, 235, 235);