style: styling ICBD timetable and page for mobile

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>
   );
 }

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) => (

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 {

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;