From 8e6ef5044f96e460d68eac810dd1e7b074b06074 Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Tue, 20 Feb 2024 20:19:23 -0800
Subject: [PATCH] DBC22-1726: updated sidepanels in camera details page

---
 src/frontend/src/Components/Map.js   | 42 ++++++++++++++++----------
 src/frontend/src/Components/Map.scss | 45 +++++++++-------------------
 2 files changed, 40 insertions(+), 47 deletions(-)

diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
index e7b39dde4..76d51eaba 100644
--- a/src/frontend/src/Components/Map.js
+++ b/src/frontend/src/Components/Map.js
@@ -715,7 +715,7 @@ export default function MapWrapper({
   const openPanel = !!(clickedCamera || clickedEvent || clickedFerry);
 
   return (
-    <div className="map-container">
+    <div className={`map-container ${isPreview ? 'preview' : ''}`}>
 
       <div
         ref={panel} className={`side-panel ${openPanel ? 'open' : ''}`}
@@ -780,11 +780,13 @@ export default function MapWrapper({
           </div>
         )}
 
-        <Filters
-          toggleHandler={toggleLayer}
-          disableFeatures={isPreview}
-          enableRoadConditions={true}
-        />
+        {!isPreview && (
+          <Filters
+            toggleHandler={toggleLayer}
+            disableFeatures={isPreview}
+            enableRoadConditions={true}
+          />
+        )}
       </div>
 
       <div id="popup" className="ol-popup">
@@ -792,16 +794,6 @@ export default function MapWrapper({
         </div>
       </div>
 
-      {isPreview && (
-        <Button
-          className="map-btn map-view"
-          variant="primary"
-          onClick={mapViewRoute}>
-          <FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
-          Map View
-        </Button>
-      )}
-
       {isPreview && (
         <Button
           className="map-btn cam-location"
@@ -816,6 +808,24 @@ export default function MapWrapper({
         </Button>
       )}
 
+      {isPreview && (
+        <Button
+          className="map-btn map-view"
+          variant="primary"
+          onClick={mapViewRoute}>
+          <FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
+          Map View
+        </Button>
+      )}
+
+      {isPreview && (
+        <Filters
+          toggleHandler={toggleLayer}
+          disableFeatures={isPreview}
+          enableRoadConditions={true}
+        />
+      )}
+
     </div>
   );
 }
diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss
index 5666879d0..acf84959a 100644
--- a/src/frontend/src/Components/Map.scss
+++ b/src/frontend/src/Components/Map.scss
@@ -18,36 +18,6 @@
   z-index: 5;
 }
 
-@keyframes open-panel {
-  from {
-    min-width: 0px;
-    @media (max-width: 767px) {
-      min-height: 0%;
-    }
-  }
-
-  to {
-    min-width: 500px;
-    @media (max-width: 767px) {
-      min-height: 50%;
-    }
-  }
-}
-
-@keyframes maximize-panel {
-  from {
-    @media (max-width: 767px) {
-      min-height: 50%;
-    }
-  }
-
-  to {
-    @media (max-width: 767px) {
-      min-height: 100%;
-    }
-  }
-}
-
 .map-wrap {
   position: absolute;
   top: 58px;
@@ -67,6 +37,20 @@
       flex-direction: column;
     }
 
+    &.preview {
+      flex-direction: column;
+
+      .side-panel {
+        transition: min-height 0.25s ease-in-out;
+        order: 2;
+
+        &.open {
+          min-width: 100%;
+          min-height: 100%;
+        }
+      }
+    }
+
     .side-panel {
       flex: 0;
       min-width: 0px;
@@ -85,7 +69,6 @@
 
       &.open {
         min-width: 340px;
-        animation-name: open-panel;
 
         .panel-content {
           min-width: 340px;