fix: fixing what happened with the merge conflict

cs0320-f23 · Dec 7, 2023 · 3f493ac · 3f493ac
1 parent 8556d94
commit 3f493ac
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 62 deletions.
diff --git a/front/src/components/Maps/MapBox.tsx b/front/src/components/Maps/MapBox.tsx
@@ -425,66 +425,63 @@ function MapBox(props: MapBoxprops) {
   }
 
   return (
-    <div className="maps-items">
-      <div className="left">
-        <RadioButtonGroup onChange={swtichVisibility}/>
-      </div>
-      <div className="right">
-      {/* <MapsHistory history={props.history} mode={props.mode}/> */}
-      <div className="side-panel">
+    <div className="maps">
+      <div className="maps-items">
+        <div className="left">
+          <RadioButtonGroup onChange={swtichVisibility} />
+        </div>
 
-      </div>
-      </div>
-      <div className="mapbox-container" aria-label="Map Container">
-        <Map
-          mapboxAccessToken={ACCESS_TOKEN}
-          {...viewState}
-          // for moving the map
-          onMove={(ev: ViewStateChangeEvent) => setViewState(ev.viewState)}
-          // theme of map
-          mapStyle={"mapbox://styles/mapbox/streets-v12"}
-          onClick={(ev: MapLayerMouseEvent) => onMapClick(ev)}
-          onMouseMove={(ev: MapLayerMouseEvent) => onMouseMove(ev)}
-          onMouseOut={(ev: MapLayerMouseEvent) => onMouseOut(ev)}
-          ref={mapRef}
-        >
-          <Source id="geo_data" type="geojson" data={overlay}>
-            <Layer 
-            id={geoLayer.id}
-            type={geoLayer.type}
-            paint={geoLayer.paint}
-            layout={visibilityOne} />
-          </Source>
-          <Source id="search_data" type="geojson" data={searchOverlay}>
-            <Layer 
-            id={searchLayer.id}
-            type={searchLayer.type}
-            paint={searchLayer.paint}
-            layout={visibilityTwo} />
-          </Source>
-          <Source id="county-data" type="vector" url={TILESET_ID}>
-            <Layer {...countyLayer} />
-            <Layer 
-              {...hoverCountyLayer}
-              filter={hoverArray}
-            />
-            <Layer
-              {...selectedCountyLayer}
-              filter={filterArray}
-            />
-          </Source>
-          {/* <Popup
+        <div className="mapbox-container center" aria-label="Map Container">
+          <Map
+            mapboxAccessToken={ACCESS_TOKEN}
+            {...viewState}
+            // for moving the map
+            onMove={(ev: ViewStateChangeEvent) => setViewState(ev.viewState)}
+            // theme of map
+            mapStyle={"mapbox://styles/mapbox/streets-v12"}
+            onClick={(ev: MapLayerMouseEvent) => onMapClick(ev)}
+            onMouseMove={(ev: MapLayerMouseEvent) => onMouseMove(ev)}
+            onMouseOut={(ev: MapLayerMouseEvent) => onMouseOut(ev)}
+            ref={mapRef}
+          >
+            <Source id="geo_data" type="geojson" data={overlay}>
+              <Layer
+                id={geoLayer.id}
+                type={geoLayer.type}
+                paint={geoLayer.paint}
+                layout={visibilityOne}
+              />
+            </Source>
+            <Source id="search_data" type="geojson" data={searchOverlay}>
+              <Layer
+                id={searchLayer.id}
+                type={searchLayer.type}
+                paint={searchLayer.paint}
+                layout={visibilityTwo}
+              />
+            </Source>
+            <Source id="county-data" type="vector" url={TILESET_ID}>
+              <Layer {...countyLayer} />
+              <Layer {...hoverCountyLayer} filter={hoverArray} />
+              <Layer {...selectedCountyLayer} filter={filterArray} />
+            </Source>
+            {/* <Popup
             longitude={popupCoords.long}
             latitude={popupCoords.lat}
             closeOnClick={false}
           >
             Long: {popupCoords.long} <br></br> Lat: {popupCoords.lat}
           </Popup> */}
-        </Map>
-        <div id="county-overlay" className="county-overlay"></div>
-      </div>
-      <div className={classVisible}>
-        <p className={notificationColor}>{searchNotiText}</p>
+          </Map>
+          <div id="county-overlay" className="county-overlay"></div>
+        </div>
+        <div className={classVisible}>
+          <p className={notificationColor}>{searchNotiText}</p>
+        </div>
+        <div className="right">
+          <MapsHistory history={props.history} mode={props.mode} />
+          <div className="side-panel"></div>
+        </div>
       </div>
       <div className="bottom">
         <div className="maps-input">

diff --git a/front/src/styles/main.css b/front/src/styles/main.css
@@ -19,7 +19,7 @@
 .maps-history {
   /* margin: auto; */
   display: flex;
-  /* overflow: scroll; */
+  overflow: scroll;
   justify-content: center;
   height: 60vh;
 }
@@ -44,11 +44,9 @@
   padding-left: 1.5%;
   width: 500px;
   display: flex;
-  /* overflow: scroll; */
+  overflow: scroll;
   justify-content: center;
   align-items: center;
-  width: 30vh;
-  float: right;
 }
 
 .bottom{
@@ -117,7 +115,6 @@ td {
   width: 800px;
   overflow: auto;
   border: 2px solid #FFC0CB;
-  margin-bottom: 10vh;
 }
 
 
@@ -351,21 +348,21 @@ input[type="radio"]:focus {
   /* z-index: 1; */
 }
 
-.side-panel {
+/* .side-panel {
   position: relative;
   top: 0;
   bottom: 0;
   left: -300px;
   height: 65vh;
   width: 100vh;
   margin-bottom: 14.5vh;
-  display: flex;
+  display: flex; */
   /* overflow: scroll; */
-  justify-content: center;
+  /* justify-content: center;
   background-color: #FFFFFF;
   border: 2px solid #FFC0CB;
   margin-left: 10vh;
-}
+} */
 
 .error-notification {
   color: red;