From fbefd7eaa0bd6777ce8a6ab86da5d255f812e2ee Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Sat, 10 Jun 2023 11:42:58 +0200
Subject: [PATCH] table header sticky top

---
 TODO                           |  2 ++
 app/about/page.tsx             |  2 +-
 app/contact/page.tsx           |  2 +-
 app/page.tsx                   |  2 +-
 components/Navbar.tsx          |  6 +++---
 components/TournamentMap.tsx   |  2 +-
 components/TournamentTable.tsx | 14 +++++++-------
 7 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/TODO b/TODO
index 27cfbc0..71b4247 100644
--- a/TODO
+++ b/TODO
@@ -1,5 +1,7 @@
 footer
 
+need a 'return to top' arrow button on smaller screens
+
 light/dark theme
 
 tests for tournois, testing the loading of map and table, then counting the markers
diff --git a/app/about/page.tsx b/app/about/page.tsx
index a3653e3..b0d1012 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -3,7 +3,7 @@ import Layout from "@/components/Layout";
 export default function About() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-156px)] md:h-[calc(100%-124px)] place-items-center">
+      <header className="grid h-[calc(100%-176px)] md:h-[calc(100%-132px)] place-items-center">
         <div className="relative h-full w-full bg-amber-200"></div>
         <div className="absolute">
           <h1>About Page</h1>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index a3903c7..7a698c4 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -3,7 +3,7 @@ import Layout from "@/components/Layout";
 export default function Contact() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-156px)] md:h-[calc(100%-124px)] place-items-center">
+      <header className="grid h-[calc(100%-176px)] md:h-[calc(100%-132px)] place-items-center">
         <div className="relative h-full w-full bg-amber-200"></div>
         <div className="absolute">
           <h1>Contact Page</h1>
diff --git a/app/page.tsx b/app/page.tsx
index 9d643fd..89475a0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,7 @@ import Layout from "@/components/Layout";
 export default function Home() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-156px)] md:h-[calc(100%-124px)] place-items-center">
+      <header className="grid h-[calc(100%-176px)] md:h-[calc(100%-132px)] place-items-center">
         <div className="relative h-full w-full bg-[url('/images/map-bg.jpg')] bg-cover bg-center brightness-[0.2]"></div>
         <div className="absolute text-center">
           <h1 className="text-5xl p-5">Echecs France</h1>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 7215811..3dea40e 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Navbar() {
   return (
-    <nav className="bg-gray-800 mt-0 w-full">
+    <nav className="bg-gray-800 pt-5 mt-0 w-full md:pt-2 px-5">
       <div className="container mx-auto flex flex-wrap items-center">
         <div className="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
           <Link
@@ -12,7 +12,7 @@ export default function Navbar() {
             <span className="text-2xl pl-2">Echecs France</span>
           </Link>
         </div>
-        <div className="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
+        <div className="flex w-full pt-2 justify-center md:w-1/2 md:justify-end">
           <ul className="list-reset text-white no-underline flex flex-1 md:flex-none items-center">
             <li className="mr-10">
               <Link
@@ -30,7 +30,7 @@ export default function Navbar() {
                 About
               </Link>
             </li>
-            <li className="mr-10">
+            <li className="">
               <Link
                 className="inline-block border-b-4 py-5 border-transparent hover:border-teal-600 transition-all ease-in-out duration-300"
                 href="/contact"
diff --git a/components/TournamentMap.tsx b/components/TournamentMap.tsx
index 4c8a4c7..de95f2b 100644
--- a/components/TournamentMap.tsx
+++ b/components/TournamentMap.tsx
@@ -24,7 +24,7 @@ export default function TournamentMap({ tournamentData }: TournamentDataProps) {
   return (
     <section
       id="tournament-map"
-      className="grid h-[calc(100vh-108px)] md:h-[calc(100vh-76px)]"
+      className="grid h-[calc(100vh-128px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-132px)]"
     >
       <MapContainer
         center={center}
diff --git a/components/TournamentTable.tsx b/components/TournamentTable.tsx
index db87131..3ddf7e2 100644
--- a/components/TournamentTable.tsx
+++ b/components/TournamentTable.tsx
@@ -19,19 +19,19 @@ export default function TournamentTable({
   return (
     <section
       id="tournament-table"
-      className="w-full lg:col-start-2 lg:col-end-3"
+      className="w-full grid h-[calc(100vh-176px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-132px)] lg:col-start-2 lg:col-end-3"
     >
       <SearchBar
         tournamentFilter={tournamentFilter}
         setTournamentFilter={setTournamentFilter}
       />
-      <table className="table-fixed w-full text-center text-xs">
+      <table className="relative table-fixed w-full text-center text-xs">
         <thead className="bg-gray-600 text-white">
-          <tr className="">
-            <th className="p-3">Date</th>
-            <th className="p-3">Ville</th>
-            <th className="p-3">Tournois</th>
-            <th className="p-3">Cadence</th>
+          <tr>
+            <th className="sticky top-0 p-3 bg-gray-600">Date</th>
+            <th className="sticky top-0 p-3 bg-gray-600">Ville</th>
+            <th className="sticky top-0 p-3 bg-gray-600">Tournois</th>
+            <th className="sticky top-0 p-3 bg-gray-600">Cadence</th>
           </tr>
         </thead>
         <tbody>{filteredTournamentData}</tbody>