cthit · daancs · Jan 26, 2024 · Jan 4, 2024 · Jan 26, 2024 · Jan 26, 2024
diff --git a/components/Page.tsx b/components/Page.tsx
@@ -5,46 +5,50 @@ import PageMargins from "./PageMargins";
 import ImageWithFallback from "./ImageWithFallback";
 
 interface PageProps {
-  blackout?: boolean
-  children?: React.ReactNode
-  unrestrictChildren?: boolean
-  currentYear?: number
+  blackout?: boolean;
+  children?: React.ReactNode;
+  ignoreMargins?: boolean;
+  currentYear?: number;
 }
 
 export default function Page(props: PageProps) {
-
-  const ctx = useContext(YearContext)
+  const ctx = useContext(YearContext);
 
   return (
     <>
-
       {/* Background */}
       <div className="fixed w-screen h-screen overflow-hidden bg-black -z-50">
         <div className={`w-full h-full ${props.blackout ? "opacity-20" : ""}`}>
           <div>
-            <ImageWithFallback src={`/bilder/${ctx.year}/landskap.jpg`} fallbacksrc={`/bilder/reserv/landskap.jpg`} layout="fill" objectFit="cover" />
+            <ImageWithFallback
+              src={`/bilder/${ctx.year}/landskap.jpg`}
+              fallbacksrc={`/bilder/reserv/landskap.jpg`}
+              layout="fill"
+              objectFit="cover"
+            />
           </div>
           <div className="lg:hidden">
-            <ImageWithFallback src={`/bilder/${ctx.year}/porträtt.jpg`} fallbacksrc={`/bilder/reserv/porträtt.jpg`} layout="fill" objectFit="cover" />
+            <ImageWithFallback
+              src={`/bilder/${ctx.year}/porträtt.jpg`}
+              fallbacksrc={`/bilder/reserv/porträtt.jpg`}
+              layout="fill"
+              objectFit="cover"
+            />
           </div>
         </div>
       </div>
 
       {/* Content */}
-      {(props.unrestrictChildren ?? false) ? (
+      {props.ignoreMargins ?? false ? (
         props.children
       ) : (
-        <PageMargins>
-          {props.children}
-        </PageMargins>
+        <PageMargins>{props.children}</PageMargins>
       )}
 
-
       {/* Header */}
       <div className="fixed flex flex-col items-center w-screen top-0 z-50 pointer-events-none">
         <Header year={props.currentYear} blackout={props.blackout ?? false} />
       </div>
     </>
-  )
-
-}
+  );
+}
diff --git a/components/PageMargins.tsx b/components/PageMargins.tsx
@@ -1,5 +1,5 @@
 interface PageMarginsProps {
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }
 
 const PageMargins = (props: PageMarginsProps) => {
@@ -9,7 +9,7 @@ const PageMargins = (props: PageMarginsProps) => {
         {props.children}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default PageMargins
+export default PageMargins;
diff --git a/components/Precursor.tsx b/components/Precursor.tsx
@@ -2,46 +2,54 @@ import React from "react";
 import { CommitteeWithMembers } from "../types";
 import Button from "./Button";
 
-
-
 const Precursor = ({ committee }: { committee: CommitteeWithMembers }) => {
-
-    return (
-        <div className="fixed w-screen h-screen">
-            <div className="w-full h-full flex flex-col justify-center items-center pt-24 sm:pt-12">
-
-                <div className="flex items-center justify-evenly flex-col h-full sm:flex-row w-10/12 sm:gap-8 sm:w-[95%]">
-
-                    {/* Image */}
-                    <div className="sm:max-w-[55%] sm:flex sm:items-center">
-                        <img src={`/bilder/${committee.year}/kommitte.jpg`} alt={committee.year.toString()} className="max-h-[30vh] sm:max-h-[75vh]" />
-                    </div>
-
-                    {/* Text */}
-                    <div>
-                        <h1 className="text-5xl sm:text-6xl font-theme mb-4 sm:mb-8">{"NollKIT'" + committee.year.toString().slice(2)}</h1>
-                        <p className="italic text-lg sm:text-2xl mb-2">{committee.orderInImageDesc}:</p>
-
-                        <div className="grid gap-x-10 gap-y-2 items-center text-sm" style={ {gridTemplateColumns: "auto auto"} }>
-                            {committee.members.sort((a, b) => a.orderInImage - b.orderInImage).map( member => (
-                                <React.Fragment key={member.name}>
-                                    <span>{member.name}</span>
-                                    <i>{member.role}</i>
-                                </React.Fragment>
-                            ))}
-                        </div>
-                        <div className="pt-6">
-                        <Button action={() => {location.href="/modul/" + committee.year + ".pdf"}}>
-                            Modul
-                        </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="w-full h-screen snap-start flex flex-col justify-center items-center pt-24 sm:pt-12">
+      <div className="flex items-center justify-evenly flex-col h-full sm:flex-row w-10/12 sm:gap-8 sm:w-[95%]">
+        {/* Image */}
+        <div className="sm:max-w-[55%] sm:flex sm:items-center">
+          <img
+            src={`/bilder/${committee.year}/kommitte.jpg`}
+            alt={committee.year.toString()}
+            className="max-h-[30vh] sm:max-h-[75vh]"
+          />
         </div>
-    )
-}
-
 
+        {/* Text */}
+        <div>
+          <h1 className="text-5xl sm:text-6xl font-theme mb-4 sm:mb-8">
+            {"NollKIT'" + committee.year.toString().slice(2)}
+          </h1>
+          <p className="italic text-lg sm:text-2xl mb-2">
+            {committee.orderInImageDesc}:
+          </p>
+
+          <div
+            className="grid gap-x-10 gap-y-2 items-center text-sm"
+            style={{ gridTemplateColumns: "auto auto" }}
+          >
+            {committee.members
+              .sort((a, b) => a.orderInImage - b.orderInImage)
+              .map((member) => (
+                <React.Fragment key={member.name}>
+                  <span>{member.name}</span>
+                  <i>{member.role}</i>
+                </React.Fragment>
+              ))}
+          </div>
+          <div className="pt-6">
+            <Button
+              action={() => {
+                location.href = "/modul/" + committee.year + ".pdf";
+              }}
+            >
+              Modul
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default Precursor;
diff --git a/pages/pateter.tsx b/pages/pateter.tsx
@@ -1,136 +1,123 @@
-import { NextPage } from "next"
-import Precursor from "../components/Precursor"
-import ReactPageScroller from 'react-page-scroller';
-import { useEffect, useState } from "react";
+import { NextPage } from "next";
+import Precursor from "../components/Precursor";
+import { useState } from "react";
 import PageInfo from "../components/PageInfo";
-import { Committee, PageText } from "@prisma/client";
+import { PageText } from "@prisma/client";
 import Page from "../components/Page";
-import PageMargins from "../components/PageMargins";
 import Button from "../components/Button";
 import { CommitteeWithMembers } from "../types";
 import Divider from "../components/Divider";
-import { prisma } from '../prisma/prismaclient';
-
-const NavBall = (props: { index: number; committeeyear: string; currentPage: number; scrollTo: (to: number) => void }) => {
-  return (
-    <div onClick={() => { props.scrollTo(props.index) }} className="h-0 w-0 p-2.5 flex justify-end relative items-center m-px navBallBox cursor-pointer">
-      <span className="transition-all opacity-0 navBallLabel">{props.committeeyear}</span>
-      <span className={`navBall ${props.index === props.currentPage ? 'bg-slate-100' : ''} border visible p-1.5 border-slate-100 opacity-50 rounded-full m-2 transition-all duration-200`}></span>
-    </div>
-  )
-};
-
+import { prisma } from "../prisma/prismaclient";
 
 export const getServerSideProps = async () => {
-
   const text = await prisma.pageText.findFirst({
     where: {
-      page: "pateter"
-    }
-  })
+      page: "pateter",
+    },
+  });
 
   let allCommittees = await prisma.committee.findMany({
     include: {
-      members: true
-    }
-  })
+      members: true,
+    },
+  });
 
   // Database entries are not necessarily in order, and needs to be sorted
-  allCommittees.sort((a,b) => b.year - a.year)
+  allCommittees.sort((a, b) => b.year - a.year);
   // Remove the current year from the list
-  allCommittees.shift()
+  allCommittees.shift();
 
   return {
-    props: { text: text, allCommittees: allCommittees }
-  }
-}
+    props: { text: text, allCommittees: allCommittees },
+  };
+};
 
 interface PateterProps {
-  text: PageText
-  allCommittees: CommitteeWithMembers[]
+  text: PageText;
+  allCommittees: CommitteeWithMembers[];
 }
 
 const Pateter: NextPage<PateterProps> = ({ text, allCommittees }) => {
+  const [showToTopButton, setShowToTopButton] = useState(false);
+  const [showScrollDownButton, setShowScrollDownButton] = useState(true);
 
-  const [currentPage, setCurrentPage] = useState<number>(0)
+  function handleScroll() {
+    const boundary = document.querySelector("#boundary");
+    const pateter = document.querySelector("#pateter");
 
-  const changeBgOpacity = (index: number) => {
-    const fp = document.getElementById("first-page")
-    if (!fp) return
-    if (index === 0) {
-      fp.style.background = "rgba(0,0,0,0.8)"
-    } else {
-      fp.style.background = "rgba(0,0,0,0.9)"
-    }
-  }
-  const scrollTo = (index: number) => {
-    setCurrentPage(index)
-  }
+    if (!boundary) return;
+    if (!pateter) return;
 
-  const [topButtonShown, setTopButtonShown] = useState<boolean>(false)
+    setShowToTopButton(boundary.getBoundingClientRect().top <= 0);
 
-  const toggleTopButton = (index: number) => {
-    index === 0 ? setTopButtonShown(false) : setTopButtonShown(true)
+    console.log(pateter.scrollTop);
+    setShowScrollDownButton(pateter.scrollTop <= 0);
   }
 
-  const [currentYear, setCurrentYear] = useState<number>(0)
+  function scrollToFirst() {
+    const boundary = document.querySelector("#boundary");
 
-  const handlePageChange = (index: number) => {
-    setCurrentPage(index)
-    changeBgOpacity(index)
-    toggleTopButton(index)
-    index === 0 ? setCurrentYear(new Date().getFullYear()) : setCurrentYear(allCommittees[index-1].year) // kind of ugly but there's no better way?
-  };
+    if (!boundary) return;
 
-  // set currentyear to current year with useEffect
-  useEffect(() => {
-    setCurrentYear(new Date().getFullYear())
-  }, [])
+    boundary.scrollIntoView({ behavior: "smooth" });
+  }
 
   return (
     <>
-      <Page blackout unrestrictChildren currentYear={currentYear}>
-        <ReactPageScroller
-          animationTimer={700}
-          animationTimerBuffer={700}
-          renderAllPagesOnFirstRender={true}
-          onBeforePageScroll={handlePageChange}
-          customPageNumber={currentPage}
+      <Page blackout ignoreMargins>
+        <div
+          id="pateter"
+          className="snap-y snap-mandatory flex flex-col items-center h-screen overflow-y-auto"
+          onScroll={() => handleScroll()}
         >
-          <PageMargins>
-            <PageInfo heading="Pateter">
-              {text.content}
-            </PageInfo>
+          <div className="snap-start h-full flex flex-col items-center w-10/12 lg:w-3/4 min-h-screen">
+            <PageInfo heading="Pateter">{text.content}</PageInfo>
             <Divider />
-
-            <div className="absolute bottom-10 flex flex-col gap-4 items-center cursor-pointer py-2" onClick={() => scrollTo(1)}>
+            <div
+              className={`absolute bottom-10 flex flex-col gap-4 items-center cursor-pointer py-2 transition duration-700 ${
+                showScrollDownButton
+                  ? "opacity-100 pointer-events-auto"
+                  : "opacity-0 pointer-events-none"
+              }`}
+              onClick={() => scrollToFirst()}
+            >
               <p className="text-sm italic">Skrolla för pateter</p>
-              <img className="downarrow w-10 transition opacity-60" src={"/down.svg"} alt="arrow down" />
+              <img
+                className="downarrow w-10 transition opacity-60"
+                src={"/down.svg"}
+                alt="arrow down"
+              />
             </div>
-          </PageMargins>
-
-          {allCommittees.map(committee => (
-            <div key={committee.year}>
+          </div>
+          {/* used to to know whether user has scrolled far enough */}
+          <div id="boundary"></div>{" "}
+          {allCommittees.map((committee) => (
+            <div key={committee.year} className="snap-start">
               <Precursor committee={committee} />
             </div>
           ))}
-
-        </ReactPageScroller>
-
-        <div className="fixed flex flex-col items-center -right-2 lg:right-4 self-center top-1/4">
-          <NavBall index={0} scrollTo={() => scrollTo(0)} currentPage={currentPage} committeeyear={"Till toppen"} ></NavBall>
-          {allCommittees.map((committee: Committee, index) => (
-            <NavBall key={index} index={index + 1} scrollTo={() => scrollTo(index + 1)} currentPage={currentPage} committeeyear={committee.year.toString().slice(-2)}></NavBall>
-          ))}
-        </div>
-        <div className={`fixed right-10 bottom-10 transition-opacity duration-300 ${topButtonShown ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
-          <Button action={() => scrollTo(0)}> 
-            Tillbaka till toppen
-          </Button>
         </div>
       </Page>
+      <div
+        className={`fixed right-10 bottom-10 transition-opacity duration-300 ${
+          showToTopButton
+            ? "opacity-100 pointer-events-auto"
+            : "opacity-0 pointer-events-none"
+        }`}
+      >
+        <Button
+          color="bg-black/20"
+          action={() => {
+            document
+              .querySelector("#pateter")
+              ?.scrollTo({ top: 0, behavior: "smooth" });
+          }}
+        >
+          Tillbaka till toppen
+        </Button>
+      </div>
     </>
-  )
-}
+  );
+};
 
-export default Pateter
+export default Pateter;