From 2dab6406959743d56290ddb89bc9cd4a4863e7df Mon Sep 17 00:00:00 2001
From: Mathias Magnusson <mathias@magnusson.space>
Date: Thu, 14 Nov 2024 00:37:47 +0100
Subject: [PATCH] fix the scrolling issue
---
README.md | 2 +-
package.json | 2 +-
src/components/EventCalendar/index.jsx | 124 +++++++++---------
src/components/Frontpage/Frontpage.module.css | 1 -
src/components/News/News.module.css | 1 -
src/components/News/index.js | 2 +-
6 files changed, 65 insertions(+), 67 deletions(-)
diff --git a/README.md b/README.md
index 3d4211e..6355423 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,6 @@ NOTE: when building with podman, you may need to specify `--ulimit nofile=65535:
## Running
-- `npm run start:dev` will start the whole universal server in development mode. HMR will be enabled on both server and client side!
+- `npm run dev` will start the whole universal server in development mode. HMR will be enabled on both server and client side!
- `npm run build` will build a production ready server.
- `npm start` will start the production server.
diff --git a/package.json b/package.json
index 9ac50e3..448d3ac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "bawang",
"scripts": {
- "start:dev": "node bin/razzle.js start",
+ "dev": "node bin/razzle.js start",
"build": "node bin/razzle.js build --noninteractive",
"start": "node build/server.js"
},
diff --git a/src/components/EventCalendar/index.jsx b/src/components/EventCalendar/index.jsx
index 4242566..2000cfc 100644
--- a/src/components/EventCalendar/index.jsx
+++ b/src/components/EventCalendar/index.jsx
@@ -50,7 +50,7 @@ function getDatesOfWeek(date) {
/**
* Get the start and end dates for a week.
- *
+ *
* @param {Date} date A date inside the week.
*/
export function getWeekTimeSpan(date) {
@@ -295,7 +295,7 @@ export default function EventCalendar({ events, location, lang, onUpdateTimeSpan
useEffect(() => {
const newWidgetWeekGroups = getWidgetsFromEvents(events);
setWidgetWeekGroups(newWidgetWeekGroups);
-
+
setSelectedEventIndex(-1);
if (events.length === 0) return;
if (!Array.isArray(events)) return;
@@ -370,7 +370,7 @@ export default function EventCalendar({ events, location, lang, onUpdateTimeSpan
const monthClass = `month-${monthIndex}`;
const monthSV = SWEDISH_MONTHS[monthIndex];
const monthEN = ENGLISH_MONTHS[monthIndex];
- if (i < 6 && monthIndex === weekState.dates[i+1].getMonth()) {
+ if (i < 6 && monthIndex === weekState.dates[i + 1].getMonth()) {
currentColSpan++;
} else {
yearHeader.push(
@@ -391,8 +391,8 @@ export default function EventCalendar({ events, location, lang, onUpdateTimeSpan
dateHeader.push(
<th key={date.toUTCString()} className={cx(monthClass)}>
<Translate>
- <Swedish>{SWEDISH_WEEK_DAYS[i]}<br/>{date.getDate()}</Swedish>
- <English>{ENGLISH_WEEK_DAYS[i]}<br/>{date.getDate()}</English>
+ <Swedish>{SWEDISH_WEEK_DAYS[i]}<br />{date.getDate()}</Swedish>
+ <English>{ENGLISH_WEEK_DAYS[i]}<br />{date.getDate()}</English>
</Translate>
</th>
);
@@ -426,65 +426,65 @@ export default function EventCalendar({ events, location, lang, onUpdateTimeSpan
</tbody>
</table>
<div className={cx("eventDisplay")}>
- {
- selectedEventIndex !== -1 && events[selectedEventIndex]
- ? <NewsItem item={events[selectedEventIndex]} location={location} lang={lang}/>
- : <div style={{ height: "100%", width: "100%", padding: "10%", display: "flex", alignItems: "center", backgroundColor: "#eeeeee" }}>
- <p style={{ fontSize: "24px", textAlign: "center" }}>
- <Translate>
- <Swedish>Klicka på en händelse för att visa mer information</Swedish>
- <English>Click on an event to display more information</English>
- </Translate></p>
- </div>
- }
+ {
+ selectedEventIndex !== -1 && events[selectedEventIndex]
+ ? <NewsItem item={events[selectedEventIndex]} location={location} lang={lang} />
+ : <div style={{ height: "100%", width: "100%", padding: "10%", display: "flex", alignItems: "center", backgroundColor: "#eeeeee" }}>
+ <p style={{ fontSize: "24px", textAlign: "center" }}>
+ <Translate>
+ <Swedish>Klicka på en händelse för att visa mer information</Swedish>
+ <English>Click on an event to display more information</English>
+ </Translate></p>
+ </div>
+ }
</div>
{weekState.widgetIndex >= 0
- && widgetWeekGroups
- && widgetWeekGroups.length > 0
- && widgetWeekGroups[weekState.widgetIndex].widgets.map((eventWidget, ei) => (
- <div
- key={`event-${ei}`}
- className={cx("widget")}
- style={{
- position: "absolute",
- top: "90px",
- left: `${columnWidth}px`,
- }}
- onClick={() => setSelectedEventIndex(eventWidget.eventIndex)}
- >
- {eventWidget.blocks.map((block, bi) => {
- const H = 60;
- if (block.endMinute <= 8*H) {
- return null;
- }
- if (!events[eventWidget.eventIndex]) {
- return null;
- }
-
- const blockStartMinute = Math.max(8*H, block.startMinute);
- const blockDuration = block.endMinute - blockStartMinute;
- const top = Math.floor((blockStartMinute - 8*H) / 2);
- const height = Math.max(30, Math.floor(blockDuration / 2)); // some events might be "too short"
- const left = columnWidth * (block.day + block.collisions.index / block.collisions.numParts) + 2;
- const width = columnWidth / block.collisions.numParts - 4;
- return (
- <div
- key={`block-${ei}-${bi}`}
- className={cx(`event-${eventWidget.colorID}`)}
- style={{
- position: "absolute",
- top: `${top}px`,
- height: `${height}px`,
- left: `${left}px`,
- width: `${width}px`,
- }}
- >
- {events[eventWidget.eventIndex].titleSwedish}
- </div>
- );
- })}
- </div>
- ))}
+ && widgetWeekGroups
+ && widgetWeekGroups.length > 0
+ && widgetWeekGroups[weekState.widgetIndex].widgets.map((eventWidget, ei) => (
+ <div
+ key={`event-${ei}`}
+ className={cx("widget")}
+ style={{
+ position: "absolute",
+ top: "90px",
+ left: `${columnWidth}px`,
+ }}
+ onClick={() => setSelectedEventIndex(eventWidget.eventIndex)}
+ >
+ {eventWidget.blocks.map((block, bi) => {
+ const H = 60;
+ if (block.endMinute <= 8 * H) {
+ return null;
+ }
+ if (!events[eventWidget.eventIndex]) {
+ return null;
+ }
+
+ const blockStartMinute = Math.max(8 * H, block.startMinute);
+ const blockDuration = block.endMinute - blockStartMinute;
+ const top = Math.floor((blockStartMinute - 8 * H) / 2);
+ const height = Math.max(30, Math.floor(blockDuration / 2)); // some events might be "too short"
+ const left = columnWidth * (block.day + block.collisions.index / block.collisions.numParts) + 2;
+ const width = columnWidth / block.collisions.numParts - 4;
+ return (
+ <div
+ key={`block-${ei}-${bi}`}
+ className={cx(`event-${eventWidget.colorID}`)}
+ style={{
+ position: "absolute",
+ top: `${top}px`,
+ height: `${height}px`,
+ left: `${left}px`,
+ width: `${width}px`,
+ }}
+ >
+ {events[eventWidget.eventIndex].titleSwedish}
+ </div>
+ );
+ })}
+ </div>
+ ))}
</div>
);
}
diff --git a/src/components/Frontpage/Frontpage.module.css b/src/components/Frontpage/Frontpage.module.css
index aa68657..aa307df 100644
--- a/src/components/Frontpage/Frontpage.module.css
+++ b/src/components/Frontpage/Frontpage.module.css
@@ -58,7 +58,6 @@
top: -220px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
z-index: 21;
- overflow: scroll;
}
.content.hero {
diff --git a/src/components/News/News.module.css b/src/components/News/News.module.css
index 97352a8..3396831 100644
--- a/src/components/News/News.module.css
+++ b/src/components/News/News.module.css
@@ -24,7 +24,6 @@
padding: 20px 50px;
min-height: 0;
z-index: 21;
- overflow: scroll;
}
.metadata {
diff --git a/src/components/News/index.js b/src/components/News/index.js
index b213f3b..356012a 100644
--- a/src/components/News/index.js
+++ b/src/components/News/index.js
@@ -70,7 +70,7 @@ export const News = ({ location, lang }) => {
{/* Title */}
<h2 id="sections_intro">
<Translate>
- <Swedish>Evenemangskalender</Swedish>
+ <Swedish>Eventkalender</Swedish>
<English>Event Calendar</English>
</Translate>
</h2>