Skip to content

Commit 56a12da

Browse files
NoeTerrierNoeTerrier
authored
style: styling ICBD timetable and page for mobile (#93)
1 parent 0f40fbd commit 56a12da

File tree

7 files changed

+195
-133
lines changed

7 files changed

+195
-133
lines changed

‎directus

‎src/components/Timetable.tsx

+61-50
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,37 @@ function timeToMinutes(time: string) {
1616
return hours * 60 + minutes + seconds / 60;
1717
}
1818

19-
function Hours(props: { startTime: number; endTime: number }) {
20-
let startHour = props.startTime / 60;
21-
const endHour = props.endTime / 60;
19+
function generateHourEntries(
20+
startTime: number,
21+
endTime: number,
22+
isLine: boolean
23+
) {
24+
const startHour = startTime / 60;
25+
const endHour = endTime / 60;
2226
const numberOfHours = endHour - startHour;
2327

24-
let hours: any[] = [];
28+
return Array.from({ length: numberOfHours + 1 }, (_, i) => {
29+
const hour = startHour + i;
30+
const style = hour === endHour ? {} : { height: `${100 / numberOfHours}%` };
2531

26-
for (; startHour <= endHour; startHour++) {
27-
let style =
28-
startHour == endHour ? {} : { height: `${100 / numberOfHours}%` };
29-
hours.push(
30-
<div key={startHour} style={style} className={styles.hourEntry}>
31-
<span className={styles.line} />
32-
<p>{`${startHour}h`}</p>
32+
return isLine ? (
33+
<span key={hour} style={style} className={styles.line} />
34+
) : (
35+
<div key={hour} style={style} className={styles.hourEntry}>
36+
<p>{`${hour}h`}</p>
3337
</div>
3438
);
35-
}
39+
});
40+
}
41+
42+
function Lines(props: { startTime: number; endTime: number }) {
43+
const lines = generateHourEntries(props.startTime, props.endTime, true);
44+
return <div className={styles.lines}>{lines}</div>;
45+
}
3646

37-
return <>{hours}</>;
47+
function Hours(props: { startTime: number; endTime: number }) {
48+
const hours = generateHourEntries(props.startTime, props.endTime, false);
49+
return <div className={styles.hours}>{hours}</div>;
3850
}
3951

4052
function TimeTableEvent(props: {
@@ -119,17 +131,14 @@ export function Timetable(props: { activities: ICBDActivity[] }) {
119131
JSON.stringify(activity.timeslots)
120132
);
121133

122-
timeslots.forEach((timeslot) => {
123-
let tStartTime = timeToMinutes(timeslot.start_time);
134+
timeslots.forEach(({ start_time, end_time, room }) => {
135+
let tStartTime = timeToMinutes(start_time);
124136
startTime = Math.min(tStartTime, startTime);
125-
let tEndTime = timeToMinutes(timeslot.end_time);
137+
let tEndTime = timeToMinutes(end_time);
126138
endTime = Math.max(tEndTime, endTime);
127139

128-
let groupKey = timeslot.room;
129-
if (!rooms[groupKey]) {
130-
rooms[groupKey] = [];
131-
}
132-
rooms[groupKey].push([timeslot, activity]);
140+
if (!rooms[room]) rooms[room] = [];
141+
rooms[room].push([{ start_time, end_time, room }, activity]);
133142
});
134143
});
135144

@@ -138,34 +147,36 @@ export function Timetable(props: { activities: ICBDActivity[] }) {
138147
let formattedEndTime = hours + ":" + minutes;
139148

140149
return (
141-
<>
142-
<table className={styles.table}>
143-
<tbody>
144-
<tr>
145-
<th />
146-
{Object.keys(rooms).map((room) => (
147-
<th className={styles.header} key={"header|" + room}>
148-
<p>{room}</p>
149-
</th>
150-
))}
151-
</tr>
152-
<tr>
153-
<td className={styles.hours}>
154-
<Hours startTime={startTime} endTime={endTime} />
155-
</td>
156-
{Object.keys(rooms).map((room) => (
157-
<td key={"entry|" + room}>
158-
<TimetableEntry
159-
timeslots={rooms[room]}
160-
startTime={startTime}
161-
endTime={endTime}
162-
/>
163-
</td>
164-
))}
165-
</tr>
166-
</tbody>
167-
</table>
168-
<p>{`${tt["icbd-end-of-event"]} ${formattedEndTime}`}</p>
169-
</>
150+
<div className={styles.main}>
151+
<Hours startTime={startTime} endTime={endTime} />
152+
<div className={styles.timetable}>
153+
<Lines startTime={startTime} endTime={endTime} />
154+
<table className={styles.table}>
155+
<tbody>
156+
<tr>
157+
{Object.keys(rooms).map((room) => (
158+
<th className={styles.header} key={"header|" + room}>
159+
<p>{room}</p>
160+
</th>
161+
))}
162+
</tr>
163+
<tr style={{ height: "100%" }}>
164+
{Object.keys(rooms).map((room) => (
165+
<td key={"entry|" + room}>
166+
<TimetableEntry
167+
timeslots={rooms[room]}
168+
startTime={startTime}
169+
endTime={endTime}
170+
/>
171+
</td>
172+
))}
173+
</tr>
174+
</tbody>
175+
</table>
176+
</div>
177+
<p className={styles.end}>
178+
{`${tt["icbd-end-of-event"]} ${formattedEndTime}`}
179+
</p>
180+
</div>
170181
);
171182
}

‎src/pages/icbd.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ParticlesComponent from "@/components/Particles";
55
import TabTitle from "@/components/TabTitle";
66
import { Timetable } from "@/components/Timetable";
77
import { directus, getDirectusImageUrl, populateLayoutProps } from "@/directus";
8-
import { getTranslation } from "@/locales";
8+
import { getTranslation, useTranslationTable } from "@/locales";
99
import style from "@/styles/ICBDPage.module.scss";
1010
import pageStyle from "@/styles/Page.module.scss";
1111
import { ICBD, ICBDActivity, ICBDPhd, ICBDSpeaker } from "@/types/aliases";
@@ -38,6 +38,8 @@ export default function ICBDPage(
3838
props.icbd.start_time || ""
3939
)} to ${formatTime(props.icbd.end_time || "")}, ${props.icbd.place}`;
4040

41+
const tt = useTranslationTable();
42+
4143
return (
4244
<>
4345
<style jsx global>{`
@@ -67,7 +69,7 @@ export default function ICBDPage(
6769
<div className={pageStyle.main}>
6870
<div className={pageStyle.center}>
6971
<div className={style.registration}>
70-
<h1>Registration</h1>
72+
<h1>{tt["icbd.registration"]}</h1>
7173
<Markdown>{translation.registration_instructions}</Markdown>
7274
{/* <div className={style.buttons}>
7375
<script
@@ -140,8 +142,8 @@ export default function ICBDPage(
140142
</div>
141143

142144
<div className={pageStyle.main}>
143-
<h1>Alumni</h1>
144-
<h2>speakers present at the event</h2>
145+
<h1>{tt["icbd.alumni"]}</h1>
146+
<h2>{tt["icbd.alumni-description"]}</h2>
145147

146148
<div className={style.alumni}>
147149
<div className={style.alumniList}>
@@ -158,8 +160,8 @@ export default function ICBDPage(
158160
</div>
159161

160162
<div className={pageStyle.main}>
161-
<h1>PHD students</h1>
162-
<h2>during the poster session</h2>
163+
<h1>{tt["icbd.phds"]}</h1>
164+
<h2>{tt["icbd.phds-description"]}</h2>
163165
<div className={style.alumni}>
164166
<div className={style.alumniList}>
165167
{props.phds.map((phd: ICBDPhd) => (
@@ -175,12 +177,14 @@ export default function ICBDPage(
175177
</div>
176178

177179
<div className={pageStyle.main}>
178-
<h1>Timetable</h1>
179-
<Timetable activities={props.activities} />
180+
<h1>{tt["icbd.timetable"]}</h1>
181+
<div className={style.timetable}>
182+
<Timetable activities={props.activities} />
183+
</div>
180184
</div>
181185

182186
<div className={style.activities}>
183-
<h1>Activities</h1>
187+
<h1>{tt["icbd.activities"]}</h1>
184188

185189
<div className={style.activitiesList}>
186190
{props.activities.map((activity: ICBDActivity) => (

‎src/styles/ICBDPage.module.scss

+6
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,13 @@
143143

144144
.timetable {
145145
height: 60rem;
146+
max-width: 80%;
146147
width: 80%;
148+
149+
@media (max-width: 1000px) {
150+
max-width: 95%;
151+
width: 95%;
152+
}
147153
}
148154

149155
.title {

‎src/styles/Page.module.scss

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515

1616
background-color: variables.$white-background-color;
1717
min-width: 100vw;
18+
max-width: 100vw;
19+
width: 100vw;
1820

1921
padding-top: 3rem;
2022
padding-bottom: 3rem;

0 commit comments

Comments
 (0)