From d6c8bd9860c9b379ccbb0b50c2f9766d2fb93804 Mon Sep 17 00:00:00 2001
From: pmandler-umass <pmandler@umass.edu>
Date: Tue, 29 Oct 2024 11:38:14 -0400
Subject: [PATCH] Fix map scrolling and zoom

---
 src/components/Legend.tsx |  2 +-
 src/styles/Home.css       | 13 ++++++++++---
 src/views/Home.tsx        | 21 ++++++---------------
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/Legend.tsx b/src/components/Legend.tsx
index 60c0e17..866ed08 100644
--- a/src/components/Legend.tsx
+++ b/src/components/Legend.tsx
@@ -49,7 +49,7 @@ function Legend(props: LegendProps) {
   }, [dataTypeIndex, speciesIndex]);
 
   return (
-    <div style={{background:"lightgrey", width: '100px', padding:10, borderRadius:10}}>
+    <div className="Legend" style={{background:"lightgrey", borderRadius:10}}>
       <Grid align='stretch'>
         <Grid.Col span={4}>
           <div
diff --git a/src/styles/Home.css b/src/styles/Home.css
index 20c054b..55e4802 100644
--- a/src/styles/Home.css
+++ b/src/styles/Home.css
@@ -8,9 +8,8 @@
         z-index: 10;
         position: fixed;
         top: 2%;
-        left: 2%;
-        bottom: 2%;
-        right: 2%;
+        left: 5%;
+        right: 5%;
     }
 
     .test {
@@ -18,6 +17,14 @@
         opacity: 0.6;
     }
     
+    	
+    .Legend {
+        position: absolute;
+        bottom: 150px;
+        left: 20px;
+        z-index: 10;
+    }
+
     .Timeline {
         background-color: white;
         height: 55px;
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index e321676..a5f4557 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -198,9 +198,7 @@ function Home(this: any) {
       </MapContainer>
       <div className="widgets">
         <Grid align='stretch'>
-          <Grid.Col span={1}>
-          </Grid.Col>
-          <Grid.Col span={1}>
+          <Grid.Col span={2}>
             {/* Dropdown for data type */}
             <Tooltip label='Types of data sets'>
               <DataTypeComponent />
@@ -217,9 +215,7 @@ function Home(this: any) {
             </Button>
           </Grid.Col>
           { /* next row */ }
-          <Grid.Col span={1}>
-          </Grid.Col>
-          <Grid.Col span={2}>
+          <Grid.Col span={3}>
             {/* The dropdown for the species type */}
             <Tooltip label='These Species were chosen because'>
               <SpeciesComponent />
@@ -229,17 +225,12 @@ function Home(this: any) {
             <div style={{textAlign:"center", fontSize:30, fontWeight:"bold"}}>{dataInfo[dataIndex].label} of the {taxa[speciesIndex].label}</div>
           </Grid.Col>
           <Grid.Col span={3}></Grid.Col>
-          { /* next row */ }
-          <Grid.Col span={2}>
-            {/* Calls the custom legend component with the data type and species type as parameters. */}
-            <Legend dataTypeIndex={dataIndex} speciesIndex={speciesIndex} />
-          </Grid.Col>
-          <Grid.Col span={10}></Grid.Col>
-
         </Grid>
-        {/* Calls the custom timeline component with the current week onChange function as parameters */}
-        <Timeline week={week} onChangeWeek={checkImageAndUpdate} />
       </div>
+      {/* Calls the custom legend component with the data type and species type as parameters. */}
+      <Legend dataTypeIndex={dataIndex} speciesIndex={speciesIndex} />
+      {/* Calls the custom timeline component with the current week onChange function as parameters */}
+      <Timeline week={week} onChangeWeek={checkImageAndUpdate} />
     </div>
   );
 }