Merge pull request #93 from UoaWDCC/062_migrate-to-layout

062 migrate to layout
UoaWDCC · Aug 7, 2024 · 7cb84c7 · 7cb84c7
2 parents 580ffd8 + b601ff9
commit 7cb84c7
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 69 deletions.
diff --git a/next/app/about/page.tsx b/next/app/about/page.tsx
@@ -1,7 +1,6 @@
 import flair from "@/assets/about/flair.png";
 import valueFlair1 from "@/assets/about/value1.png";
 import valueFlair2 from "@/assets/about/value2.png";
-import Header from "@/components/header/header";
 import { aboutPageSchema, TimelineElement } from "@/schemas/single/AboutPage";
 import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
@@ -19,17 +18,9 @@ export default async function AboutPage() {
   }).sort((a, b) => a.Date.getTime() - b.Date.getTime());
 
   return (
-    <main
-      style={{
-        backgroundImage:
-          "linear-gradient(180deg, #0D66B7 0%, #62BCE0 48.87%, #FFE2C8 94.91%), linear-gradient(359deg, #6CC3E5 44.81%, rgba(255, 233, 204, 0.80) 56.29%, rgba(255, 202, 133, 0.00) 84.97%)",
-      }}
-      className="isolate"
-    >
-      {/* @ts-ignore */}
-      <Header />
+    <>
       <Image src={flair} alt="" className="absolute -z-10 top-[70%]" />
-      <section className="max-w-4xl mx-auto py-20 flex flex-col items-center text-center">
+      <section className="max-w-4xl mx-auto mt-header pt-24 flex flex-col items-center text-center">
         <h1 className="text-8xl font-bold leading-[0.95] uppercase mb-6">
           Our Values
         </h1>
@@ -90,6 +81,6 @@ export default async function AboutPage() {
           </ol>
         </div>
       </section>
-    </main>
+    </>
   );
 }
diff --git a/next/app/feedback/page.tsx b/next/app/feedback/page.tsx
@@ -1,5 +1,4 @@
 import ActiveSection from "@/components/feedback/ActiveSection";
-import Header from "@/components/header/header";
 import { feedbackPageSchema } from "@/schemas/single/FeedbackPage";
 import fetchStrapi from "@/util/strapi";
 
@@ -8,9 +7,7 @@ export default async function Feedback() {
   const QAs = data.QuestionAnswer;
 
   return (
-    <div className="flex flex-col bg-gradient-1 min-h-screen h-full overflow-y-hidden isolate">
-      {/* @ts-ignore */}
-      <Header />
+    <div className="relative mt-header pt-24">
       <svg
         viewBox="0 0 1440 1027"
         fill="none"

diff --git a/next/app/globals.css b/next/app/globals.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;0,9..40,900;1,9..40,400&family=Work+Sans:wght@400;700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/next/app/layout.tsx b/next/app/layout.tsx
@@ -1,4 +1,5 @@
-/* eslint-disable @next/next/no-page-custom-font */
+import Footer from "@/components/footer/footer";
+import Header from "@/components/header/header";
 import "./globals.css";
 
 export const metadata = {
@@ -15,20 +16,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="anonymous"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;0,9..40,900;1,9..40,400&family=Work+Sans:wght@400;700&display=swap"
-          rel="stylesheet"
-        />
-      </head>
-      <body>{children}</body>
+    <html lang="en" className="h-full">
+      <body className="bg-gradient-1 isolate flex flex-col min-h-svh">
+        <Header />
+        <main className="grow overflow-y-auto overflow-x-hidden">{children}</main>
+        <Footer />
+      </body>
     </html>
   );
 }
diff --git a/next/app/members/[year]/page.tsx b/next/app/members/[year]/page.tsx
@@ -1,8 +1,6 @@
 import ScribbleLeft from "@/assets/members/scribble-left.png";
 import ScribbleRight from "@/assets/members/scribble-right.png";
 import RichText from "@/components/blocks/RichText";
-import Footer from "@/components/footer/footer";
-import Header from "@/components/header/header";
 import { teamSchema } from "@/schemas/collection/Team";
 import { getLargestImageUrl } from "@/util/image";
 import fetchStrapi from "@/util/strapi";
@@ -24,17 +22,14 @@ export default async function MemberPage({
   const roleSections = team.RoleSection;
 
   return (
-    <main className={`bg-gradient-1 isolate min-h-full`}>
-      {/* @ts-ignore */}
-      <Header />
-      <div className="flex flex-col items-center justify-center gap-6">
-        <h1 className="uppercase flex flex-col items-center mx-auto mt-12 mb-24">
+    <>
+      <div className="flex flex-col items-center justify-center gap-6 mt-header pt-24">
+        <h1 className="uppercase flex flex-col items-center mx-auto mb-24">
           <span className="text-6xl leading-[0.95]">Meet the</span>
           <span className="text-8xl font-bold leading-[0.95]">
             {team.CommitteeYear} Team
           </span>
         </h1>
-
         <div className="relative w-full grid place-items-center isolate">
           <img
             className="w-full max-w-5xl"
@@ -69,7 +64,6 @@ export default async function MemberPage({
       {/* adjust minimum height of components */}
       <Chairman chairs={chairs} />
       <Teams teams={roleSections} />
-      <Footer />
-    </main>
+    </>
   );
 }
diff --git a/next/app/page.tsx b/next/app/page.tsx
@@ -14,12 +14,10 @@ export default async function Home() {
   const data = await fetchStrapi("home-page", homePageSchema);
 
   return (
-    <main className={`${styles.main} bg-gradient-1 isolate`}>
+    <>
       <BGWaves className="w-full absolute -z-50 top-[85vh]" />
-      {/* @ts-ignore */}
-      <Header />
-      <div className="min-h-[55vh] flex flex-col items-center justify-center gap-6">
-        <h1 className="uppercase flex flex-col items-center mx-auto">
+      <div className="min-h-[55vh] flex flex-col items-center gap-6 mt-header pt-24">
+        <h1 className="uppercase flex flex-col items-center">
           <span className="text-6xl leading-[0.95]">A Youth Board</span>
           <span className="text-8xl font-bold leading-[0.95]">
             For The Future
@@ -59,7 +57,6 @@ export default async function Home() {
           </div>
         </div>
       </div>
-      <Footer />
-    </main>
+    </>
   );
 }
diff --git a/next/app/projects/[slug]/page.tsx b/next/app/projects/[slug]/page.tsx
@@ -1,6 +1,4 @@
-import styles from "@/app/page.module.css";
 import ContentBlock from "@/components/blocks/ContentBlock";
-import Header from "@/components/header/header";
 import { projectSchema } from "@/schemas/collection/Project";
 import fetchStrapi from "@/util/strapi";
 import { notFound } from "next/navigation";
@@ -18,13 +16,5 @@ export default async function ProjectPage({
   const project = projects[0];
   if (!project) notFound();
 
-  return (
-    <main className={styles.main}>
-      {/* @ts-ignore */}
-      <Header />
-      <div>
-        {project.blocks.map((block: any) => ContentBlock({ props: block }))}
-      </div>
-    </main>
-  );
+  return project.blocks.map((block: any) => ContentBlock({ props: block }));
 }
diff --git a/next/app/projects/page.tsx b/next/app/projects/page.tsx
@@ -1,4 +1,3 @@
-import styles from "@/app/page.module.css";
 import Header from "@/components/header/header";
 import { projectSchema } from "@/schemas/collection/Project";
 import { projectsPageSchema } from "@/schemas/single/ProjectsPage";
@@ -13,20 +12,16 @@ export default async function ProjectsPage() {
   const projects = await fetchStrapi("project-pages", z.array(projectSchema));
 
   return (
-    <main className={styles.main}>
-      <div className="absolute top-0 w-full z-50">
-        {/* @ts-ignore */}
-        <Header />
-      </div>
-      <section className="h-[85vh] flex flex-col items-center justify-center relative">
+    <>
+      <section className="h-[85vh] flex flex-col items-center relative">
         <Image
           src={getLargestImageUrl(projectsPage.BackgroundImage)}
           alt=""
           className="absolute inset-0 -z-10 object-cover w-full h-full brightness-50"
           width={1920}
           height={1080}
         />
-        <h1 className="uppercase flex flex-col items-center mx-auto mb-6 text-8xl font-bold leading-[0.95]">
+        <h1 className="uppercase flex flex-col items-center mx-auto mt-header pt-24 mb-6 text-8xl font-bold leading-[0.95]">
           Projects
         </h1>
         <p className="max-w-[55ch] mb-20">{projectsPage.Subtitle}</p>
@@ -71,6 +66,6 @@ export default async function ProjectsPage() {
           </div>
         ))}
       </div>
-    </main>
+    </>
   );
 }
diff --git a/next/app/test/nate/highbackground/page.tsx b/next/app/test/nate/highbackground/page.tsx
@@ -0,0 +1,13 @@
+import Image from "next/image";
+
+export default function HighBackgroundTest() {
+  return (
+    <Image
+      src="/younitelogo.png"
+      alt="Background image"
+      width={1980}
+      height={1080}
+      className="border border-red-500 mt-header"
+    />
+  );
+}
diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx
@@ -34,7 +34,7 @@ export default function ActiveSection({
 
   return (
     <div
-      className={`flex py-24 w-full max-w-5xl mx-auto gap-12 ${styleClick ? "animate-[fadeOut_0.3s_ease-in_forwards]" : "animate-[fadeIn_0.3s_ease-in_forwards]"}`}
+      className={`flex w-full max-w-5xl mb-24 mx-auto gap-12 ${styleClick ? "animate-[fadeOut_0.3s_ease-in_forwards]" : "animate-[fadeIn_0.3s_ease-in_forwards]"}`}
     >
       <div className="flex flex-col">
         <div className="flex flex-col items-end w-80 ml-5">

diff --git a/next/components/header/header.module.css b/next/components/header/header.module.css
@@ -5,6 +5,10 @@
   width: 100%;
   align-items: center;
   padding: 0.25rem var(--gutter);
+  position: absolute;
+  z-index: 1000;
+  isolation: isolate;
+  height: 8.5rem;
 }
 
 .nav {

diff --git a/next/components/header/header.tsx b/next/components/header/header.tsx
@@ -33,6 +33,7 @@ export default async function Header() {
           className="h-32 w-auto"
           height={128}
           width={256}
+          priority
         />
       </Link>
       <nav className={styles.nav}>

diff --git a/next/tailwind.config.js b/next/tailwind.config.js
@@ -19,6 +19,12 @@ module.exports = {
         "b-orange": "#FAAB36",
         "b-light-orange": "#FABD6E",
       },
+      margin: {
+        header: "8.5rem",
+      },
+      padding: {
+        header: "8.5rem",
+      },
       keyframes: {
         fadeIn: {
           "0%": { opacity: 0 },