Phs sitemap fix (#66)

* done with popup styling * updated package lock for npm install * Revert "fix: remove formatting changes to media/queries.tsx" This reverts commit f6e1d69. * cont. rebase * cont. rebase * rebase 3 * rebase 4 * refactor: add formatting changes * refactor: add jsdoc, imports, change queries.tsx -> .ts * edited to accomodate database changes for categories and exhibits * claire's approval * figma dev changes resolved * updated desktop version * finished all desktop feedback - delted display component (not using) changed navbar component to huntergreen * done with claire's mobile edits * added working nav bar to mihas pr * fixed bracket issue in the siteMapPage * filter button duplicated import statement * changed hunterGreen to hunter-green for filter button * testing w-auto * minor change * fixed alignment issues and used andrei's resizing * fixed popup alignment * resolved justin's comments * fixed fonts * fixing lag from tours to exhibit * combined use affects * trying to push with eslint fixes * fixed eslint errors - ready to push --------- Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]>
calblueprint · May 22, 2024 · f713b8f · f713b8f
1 parent bf76b4c
commit f713b8f
Show file tree

Hide file tree

Showing 14 changed files with 425 additions and 506 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,11 +29,11 @@
     "i": "^0.3.7",
     "leaflet": "^1.9.4",
     "moment": "^2.30.1",
-    "next": "latest",
+    "next": "^14.2.1",
     "node": "^21.7.1",
-    "react": "latest",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.9.0",
-    "react-dom": "latest",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-leaflet": "^4.2.1",
     "react-responsive-carousel": "^3.2.23",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -112,3 +112,10 @@ body {
 html {
   height: 100%;
 }
+.bottom-center {
+  position: absolute;
+  bottom: 10px; /* Adjust as needed */
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000; /* Ensure it is above other elements */
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -44,6 +44,7 @@ export default function RootLayout({
           crossOrigin=""
         />
         <script src="html5-qrcode.min.js" />
+
       </head>
 
       <body className={inter.className}>

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
@@ -4,8 +4,12 @@ import React, { useState } from 'react';
 import dynamic from 'next/dynamic';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import FilterButton from '../../components/userComponents/FilterButton/FilterButton';
+import { useWebDeviceDetection } from '../../context/WindowWidthContext/WindowWidthContext';
 
-const filterButtonContent: string[] = ['Virtual Tour Map', 'Exhibits Map'];
+const filterButtonContent: string[] = [
+  'Virtual Tour Map',
+  'Exhibits Map',
+];
 
 const SiteMap = dynamic(
   () => import('../../components/userComponents/SiteMap/SiteMap'),
@@ -20,50 +24,95 @@ type ModeState = 'tours' | 'exhibits';
  * @returns Page for the interactive map
  */
 function MapPage() {
+
   const [selectedMap, setSelectedMap] = useState(filterButtonContent[0]); // "Virtual Tour Map" by default
   const [mode, setMode] = useState<ModeState>('tours');
-
-  // move tour logic here: need to share state between filter
+  const isWebDevice = useWebDeviceDetection();
+
   const handleFilter = (mapName: string) => {
     setSelectedMap(mapName);
-    if (mapName === 'Virtual Tour Map') {
-      setMode('tours');
-    } else if (mapName === 'Exhibits Map') {
-      setMode('exhibits');
+    if (mapName === "Virtual Tour Map") {
+      setMode("tours");
+    } else if (mapName === "Exhibits Map") {
+      setMode("exhibits");
     }
   };
 
   const renderFilterContainer = () => (
-    <div className="mb-6  pl-0 pr-0 ">
-      <div className="pt-9 pr-2 pl-2 pb-7">
-        <p className="text-night font-lato text-2xl font-semibold">
-          Wildlife Care Center Maps
-        </p>
-      </div>
-      <div className="flex flex-row items-center gap-x-0 pr-1 pl-1 w-full rounded-lg bg-mint-cream  border-mint-cream border-[5px]">
+    <div className="mb-6 w-full px-4">
+      <div className="flex flex-row items-center justify-between bg-mint-cream border-mint-cream border-[8px] rounded-lg w-full">
         {filterButtonContent &&
           filterButtonContent.map(text => (
             <FilterButton
               key={text}
               content={text}
-              onClick={() => handleFilter(text)} // Fixed here
+              onClick={() => handleFilter(text)}
               isSelected={selectedMap === text}
             />
           ))}
       </div>
     </div>
   );
+  const renderFilterContainerWide = () => (
+    <div className="flex justify-end w-[23.875rem] h-[3.25rem]">
+      <div className="flex flex-row items-center rounded-lg bg-mint-cream  border-mint-cream border-[8px] mx-auto w-full">  
+
+        {filterButtonContent &&
+          filterButtonContent.map(text => (
+            <FilterButton 
+            key={text} 
+            content={text} 
+            onClick={() => handleFilter(text)} 
+            isSelected={selectedMap === text}
+            />
+
+          ))}
+      </div>
+    </div>
+  );
 
-  return (
-    <div className="bg-ivory">
+  return isWebDevice ? (
+    <>
       <NavBar />
+      <div className='justify-center mx-auto w-[70%]'>
+        <div className="pt-0 pl-2 pr-2 bg-ivory">
+
+      <div className="pt-20 pb-6 pl-2 ">
+        <text className="text-scary-forest font-lato text-sm font-normal">
+          Home  <text className='text-night'> / Wildlife Care Center Maps </text>
+        </text> 
+      </div>
+      <div className="flex items-center  pb-4">
+        <div className='flex-initial pr-2 pl-2'>
+          <p className="text-night font-lato font-normal text-3xl">Wildlife Care Center Maps</p>
+        </div>
+        <div className="flex-grow flex justify-end pr-2 pl-2 pb-3">
+          {renderFilterContainerWide()}
+        </div>
+      </div>
+        <div className="w-full pr-2 pl-2 flex h-2/3 mb-8">
+          <SiteMap mode={mode} />
+        </div>
+      </div>
+      </div>
+
+    </>
+  ) : (
+    <>
+     <NavBar />
+    <div className='pt-6.25 pr-2 pl-2 pb-2 bg-ivory'>
+      <div className="p-4">
+        <p className="text-night font-lato text-2xl font-normal">Wildlife Care Center Maps</p>
+      </div>
+
+      {renderFilterContainer()}
       <div className="pt-0 pl-2 pr-2 bg-ivory">
-        {renderFilterContainer()}
-        <div className=" w-full pr-2 pl-2 flex h-2/3 mb-8">
+        <div className="w-full pr-2 pl-2 flex h-2/3 mb-8">
           <SiteMap mode={mode} />
         </div>
       </div>
     </div>
+    </>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,7 @@ export default function RootLayout({ @@
               crossOrigin=""
             />
             <script src="html5-qrcode.min.js" />
           </head>
           <body className={inter.className}>
@@ Expand Down @@