Feature/z index but also map visible on no user lat long

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- [PR-65](https://github.com/itk-dev/aapodwalk/pull/65)
+  - Remove a bunch of z-indexes
+  - Make map visible without user location
 - [PR-63](https://github.com/itk-dev/aapodwalk/pull/63)
   - react 18 -> [react 19](https://react.dev/blog/2024/12/05/react-19)
   - react-dom 18 -> 19

src/components/CloseButton.jsx

@@ -9,7 +9,7 @@ function CloseButton({ closeOverlay, label = "luk", additionalClasses = "" }) {
       type="button"
       onClick={() => closeOverlay()}
     >
-      <FontAwesomeIcon className="z-40 w-5 h-5" icon={faClose} />
+      <FontAwesomeIcon className="w-5 h-5" icon={faClose} />
       <span className="sr-only">{label}</span>
     </button>
   );

src/components/LandingPage.jsx

@@ -23,14 +23,14 @@ const LandingPage = () => {
         </p>
         <p className="mt-5 font-bold">Vælg en rute nedenfor og start din lytteoplevelse.</p>
       </div>
+      <div className="w-2/5 flex justify-center relative">
+        <img src={Steps} alt="" />
+      </div>
       <CloseButton
         label="Luk introduktion"
         closeOverlay={() => setInfoClosed(true)}
-        additionalClasses="flex justify-center items-center dark:bg-emerald-700 w-9 h-9 rounded-full justify-content-center z-40"
+        additionalClasses="flex justify-center items-center dark:bg-emerald-700 w-9 h-9 rounded-full justify-content-center"
       />
-      <div className="w-2/5 flex justify-center relative">
-        <img src={Steps} alt="" />
-      </div>
     </div>
   );
 };

src/components/Navbar.jsx

@@ -9,7 +9,7 @@ const Navbar = () => {
   const { pathname } = useLocation();
 
   return (
-    <nav className="fixed top-0 left-0 right-0 p-3 bg-zinc-100 dark:bg-zinc-800 z-50">
+    <nav className="fixed top-0 left-0 right-0 p-3 bg-zinc-100 dark:bg-zinc-800">
       <div className="mb-6 mt-4 flex justify-between">
         {pathname === "/" && (
           <Link to="/">

src/components/SeeOnMap.jsx

@@ -1,15 +1,13 @@
-import { React, useContext } from "react";
+import { React } from "react";
 import { useParams } from "react-router-dom";
-import LatLongContext from "../context/latitude-longitude-context";
 import MapWrapper from "./map/MapWrapper";
 
 function SeeOnMap() {
   const { latitude, longitude } = useParams();
-  const { lat, long } = useContext(LatLongContext);
 
   return (
     <>
-      {latitude && longitude && lat && long && (
+      {latitude && longitude && (
         <MapWrapper
           focusable={false}
           withIndex={false}

src/components/UpDownButton.jsx

@@ -5,12 +5,12 @@ import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
 function UpDownButton({ toggleOverlay, label, up }) {
   return (
     <button
-      className="dark:bg-emerald-800 dark:text-white bg-white z-50 flex place-content-center items-center text-sm absolute right-14 rounded-full top-3 w-9 h-9"
+      className="dark:bg-emerald-800 dark:text-white bg-white flex place-content-center items-center text-sm absolute right-14 rounded-full top-3 w-9 h-9"
       type="button"
       onClick={() => toggleOverlay()}
     >
-      {!up && <FontAwesomeIcon className="z-40 w-5 h-5" icon={faAngleDown} />}
-      {up && <FontAwesomeIcon className="z-40 w-5 h-5" icon={faAngleUp} />}
+      {!up && <FontAwesomeIcon className="w-5 h-5" icon={faAngleDown} />}
+      {up && <FontAwesomeIcon className="w-5 h-5" icon={faAngleUp} />}
       <span className="sr-only">{label}</span>
     </button>
   );

src/components/map/MapComponent.jsx

@@ -9,12 +9,13 @@ import "./map-wrapper.css";
 function MapComponent({ mapData, additionalClass = "", withIndex, focusOnMap }) {
   const { lat, long } = useContext(LatLongContext);
   const [outerBounds, setOuterBounds] = useState(null);
+
   function getLabelForPin(index) {
     return index + 1;
   }
 
   useEffect(() => {
-    if (mapData.length > -1 && lat && long) {
+    if (mapData.length > -1) {
       setOuterBounds(mapArrayForOuterBounds(mapData, lat, long));
     }
   }, [mapData, lat, long]);

src/components/map/MapWrapper.jsx

@@ -35,8 +35,8 @@ function MapWrapper({ mapData, additionalClass = "", focusable, withIndex }) {
             <div
               className={
                 focusOnMap
-                  ? "map-container absolute left-0 top-0 right-0 z-50 h-full"
-                  : "map-container absolute left-0 top-0 right-0 z-0"
+                  ? "map-container absolute left-0 top-0 right-0 h-full"
+                  : "map-container absolute left-0 top-0 right-0"
               }
               // I wish to hide the map from tabbing order for everyone. But this seems impossible. So now I am hiding
               // it from screen users. (This is the map for presentation, not the map for navigation)

src/components/points/PointOverlay.jsx

@@ -54,12 +54,12 @@ function PointOverlay({ point: { name, subtitles, mediaEmbedCode, id }, toggleAc
       <section
         className={`${
           fullScreen
-            ? "fixed bottom-0 left-0 right-0 top-0 bg-zinc-100 dark:bg-zinc-900 z-50 rounded m-2 p-4 flex justify-between flex-col"
-            : "bg-zinc-100 dark:bg-zinc-900 z-50 rounded fixed bottom-0 left-0 right-0 bg-zinc-100 dark:bg-zinc-900"
+            ? "fixed bottom-0 left-0 right-0 top-0 bg-zinc-100 dark:bg-zinc-900 rounded m-2 p-4 flex justify-between flex-col"
+            : "bg-zinc-100 dark:bg-zinc-900 rounded fixed bottom-0 left-0 right-0 bg-zinc-100 dark:bg-zinc-900"
         }`}
       >
         <CloseButton
-          additionalClasses="dark:bg-emerald-800 dark:text-white bg-white z-50"
+          additionalClasses="dark:bg-emerald-800 dark:text-white bg-white"
           closeOverlay={() => close()}
           label="luk afspilningen"
         />

src/components/points/PointsList.jsx

@@ -28,9 +28,7 @@ function PointsList({ points }) {
 
   return (
     <>
-      <h1 className="text-ms font-bol fixed w-full top-16 pb-2 bg-zinc-100 dark:bg-zinc-800 z-40">
-        {selectedRoute.title}
-      </h1>
+      <h1 className="text-ms font-bol fixed w-full top-16 pb-2 bg-zinc-100 dark:bg-zinc-800">{selectedRoute.title}</h1>
       {points &&
         [...points]
           .reverse()

src/components/routes/RoutePage.jsx

@@ -49,11 +49,10 @@ function RoutePage() {
 
   return (
     <>
-      <MapWrapper withIndex focusable additionalClass="opacity-10" mapData={points} />
-      <div className="p-5 absolute left-0 top-0 right-0 bottom-0 flex flex-col justify-between z-0">
+      <div className="p-5 absolute left-0 top-0 right-0 bottom-0 flex flex-col justify-between">
         <div>
-          <TagList classes="z-5 relative text-lg" tags={tags} />
-          <h1 className="text-4xl font-extrabold z-50 relative word-break">{title}</h1>
+          <TagList classes="relative text-lg" tags={tags} />
+          <h1 className="text-4xl font-extrabold relative word-break">{title}</h1>
         </div>
         <div className="flex flex-col items-end">
           {openStreetMapConsent && <div className="w-3/5 mb-10 text-end">Tryk på kortet for at undersøge ruten</div>}
@@ -68,8 +67,7 @@ function RoutePage() {
               {consentText}
             </button>
           )}
-
-          <div className="bg-emerald-400 w-full dark:bg-emerald-800 mb-3 rounded-md p-3 flex z-50 relative">
+          <div className="bg-emerald-400 w-full dark:bg-emerald-800 mb-3 rounded-md p-3 flex relative">
             <div>
               <div className="font-bold">Distance</div>
               <div className="text-xl">{distance}</div>
@@ -83,7 +81,7 @@ function RoutePage() {
               <div className="text-xl">{totalDuration} minutter</div>
             </div>
           </div>
-          <div className="relative z-50 dark:bg-zinc-800 w-full flex flex-col rounded-lg p-3 mb-3 bg-emerald-400">
+          <div className="relative dark:bg-zinc-800 w-full flex flex-col rounded-lg p-3 mb-3 bg-emerald-400">
             {description}
           </div>
           <Link
@@ -95,6 +93,7 @@ function RoutePage() {
           </Link>
         </div>
       </div>
+      <MapWrapper withIndex focusable additionalClass="opacity-10" mapData={points} />
     </>
   );
 }

src/util/helper.js

@@ -83,10 +83,13 @@ export function getPinSvg() {
 }
 
 export function mapArrayForOuterBounds(pointArray, userLat, userLong) {
-  return [
-    ...pointArray.map(({ latitude, longitude }) => [latitude, longitude]),
-    ...[[userLat.toString(), userLong.toString()]],
-  ];
+  if (userLat && userLong) {
+    return [
+      ...pointArray.map(({ latitude, longitude }) => [latitude, longitude]),
+      ...[[userLat.toString(), userLong.toString()]],
+    ];
+  }
+  return [...pointArray.map(({ latitude, longitude }) => [latitude, longitude])];
 }
 
 export function getYouAreHerePin() {