Weekend styling updates and mobile responsiveness

.github/workflows/firebase-hosting-merge.yml

@@ -14,6 +14,11 @@ jobs:
       - run: npm install && npm run lint && npm run test && npm run build
         env:
           DIRECTUS_URL: ${{ secrets.CMS_URL }}
+          NEXT_PUBLIC_GOOGLE_API_KEY: ${{ secrets.NEXT_PUBLIC_GOOGLE_API_KEY }}
+          NEXT_PUBLIC_CALENDAR_ID_1: ${{ secrets.NEXT_PUBLIC_CALENDAR_ID_1 }}
+          NEXT_PUBLIC_CALENDAR_ID_2: ${{ secrets.NEXT_PUBLIC_CALENDAR_ID_2 }}
+          NEXT_PUBLIC_CALENDAR_ID_3: ${{ secrets.NEXT_PUBLIC_CALENDAR_ID_3}}
+          NEXT_PUBLIC_HARASSMENT_FORM_URL: ${{ secrets.NEXT_PUBLIC_HARASSMENT_FORM_URL }}
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           target: "satakuntalainenosakunta"

.github/workflows/firebase-hosting-pull-request.yml

@@ -12,6 +12,11 @@ jobs:
       - run: npm install && npm run lint && npm run test && npm run build
         env:
           DIRECTUS_URL: ${{ secrets.CMS_URL }}
+          NEXT_PUBLIC_GOOGLE_API_KEY: ${{ secrets.NEXT_PUBLIC_GOOGLE_API_KEY }}
+          NEXT_PUBLIC_CALENDAR_ID_1: ${{ secrets.NEXT_PUBLIC_CALENDAR_ID_1 }}
+          NEXT_PUBLIC_CALENDAR_ID_2: ${{ secrets.NEXT_PUBLIC_CALENDAR_ID_2 }}
+          NEXT_PUBLIC_CALENDAR_ID_3: ${{ secrets.NEXT_PUBLIC_CALENDAR_ID_3}}
+          NEXT_PUBLIC_HARASSMENT_FORM_URL: ${{ secrets.NEXT_PUBLIC_HARASSMENT_FORM_URL }}
 
       - uses: FirebaseExtended/action-hosting-deploy@v0
         id: firebase

components/Carousel.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect } from "react";
-import Link from "next/link";
+import useTranslate from "@/hooks/useTranslate";
 import { EmblaCarouselType, EmblaOptionsType } from "embla-carousel";
 import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
+import Link from "next/link";
+import React, { useEffect } from "react";
 import { NextButton, PrevButton, usePrevNextButtons } from "./CarouselArrows";
 
 type PropType = {
@@ -36,6 +37,7 @@ const setOpacity = (emblaApi: EmblaCarouselType) => {
 
 const Carousel: React.FC<PropType> = ({ slides, options }) => {
   const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const t = useTranslate();
 
   const {
     prevBtnDisabled,
@@ -77,7 +79,7 @@ const Carousel: React.FC<PropType> = ({ slides, options }) => {
         <div className="embla__buttons">
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- Placeholder href */}
           <Link href="" className="embla__link">
-            Katso Lisää
+            {t("general:seeMore")}
           </Link>
         </div>
       </div>

components/HarassmentForm.tsx

@@ -47,7 +47,7 @@ const HarassmentForm = () => {
   const [buttonText, setButtonText] = useState("Submit");
   const [buttonDisabled, setButtonDisabled] = useState(false);
   // For development only, disable or delete for prod
-  const corsProxy: string = "https://cors-anywhere.herokuapp.com/";
+  // const corsProxy: string = "https://cors-anywhere.herokuapp.com/";
 
   const handleSnackbarClose = () => {
     setSnackbarOpen(false);
@@ -89,7 +89,8 @@ const HarassmentForm = () => {
           formData.append("entry.200517309", values.name); // Example ID for 'name'
           formData.append("entry.1828602041", values.email); // Example ID for 'email'
 
-          fetch(`${corsProxy + process.env.NEXT_PUBLIC_HARASSMENT_FORM_URL}`, {
+          // Add corsProxy + to this for development
+          fetch(`${process.env.NEXT_PUBLIC_HARASSMENT_FORM_URL}`, {
             method: "POST",
             body: formData,
           })

components/MonthCalendar.tsx

@@ -14,6 +14,7 @@ const MonthCalendar = () => {
     en: enLocale,
   };
   const currentLocale = localeMap[language] || enLocale;
+
   return (
     <>
       <FullCalendar

components/Navbar.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useEffect } from "react";
 import { NavigationLink } from "@/lib/cmsClient";
-import sato_logo_nav from "../public/sato_logo_nav.png";
+import sato_logo_nav from "../public/sato_logo_nav.webp";
 import Sidebar from "./Sidebar";
 
 export type NavbarProps = {
@@ -39,7 +39,7 @@ const Navbar = ({ links }: NavbarProps) => {
           <Image
             src={sato_logo_nav}
             alt="A nav link to the home page"
-            width={120}
+            width={95}
           />
         </Link>
         <Sidebar links={links} />

components/WeekCalendar.tsx

@@ -21,8 +21,27 @@ const WeekCalendar = () => {
   const [minTime, setMinTime] = useState("12:00:00");
   const [maxTime, setMaxTime] = useState("24:00:00");
 
+  const eventSources = [
+    {
+      googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_1,
+      googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+      className: "gcal-1",
+    },
+    {
+      googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_2,
+      googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+      className: "gcal-2",
+    },
+    {
+      googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_3,
+      googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+      className: "gcal-3",
+    },
+  ];
+
   // there was way too much empty space, mostly before any events,
   // this should cut that out and leave a 2hr bufer on either side
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const adjustTimeRange = useCallback(
     debounce((events: EventApi[]) => {
       if (events.length > 0) {
@@ -45,26 +64,26 @@ const WeekCalendar = () => {
     <>
       <FullCalendar
         plugins={[dayGridPlugin, googleCalendarPlugin]}
-        eventSources={[
-          {
-            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_1,
-            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
-          },
-          {
-            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_2,
-            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
-          },
-          {
-            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_3,
-            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
-          },
-        ]}
+        eventSources={eventSources}
         initialView="timeGridWeek"
         locale={currentLocale}
         slotMinTime={minTime}
         slotMaxTime={maxTime}
         eventsSet={adjustTimeRange}
         contentHeight="auto"
+        allDaySlot={false}
+        eventClick={(info) => {
+          // Prevent the default behavior of navigating to Google Calendar
+          info.jsEvent.preventDefault(); // Prevent the default click behavior
+        }}
+        views={{
+          timeGridWeek: {
+            dayHeaderFormat: {
+              weekday: "short",
+              day: "2-digit",
+            },
+          },
+        }}
       />
       <div />
     </>