DBC22-1370: Styling sidepanel for cameras layer

bcgov · Feb 16, 2024 · 4a76b63 · 4a76b63
1 parent 71db7cf
commit 4a76b63
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 134 deletions.
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
@@ -714,16 +714,13 @@ export default function MapWrapper({
 
       <div
         ref={panel} className={`side-panel ${openPanel ? 'open' : ''}`}
-        onClick={maximizePanel}
         onTouchMove={maximizePanel}
       >
-        <div className="closer-bar">
-          <FontAwesomeIcon
-            className="panel-closer"
-            icon={faXmark}
-            onClick={togglePanel}
-          />
-        </div>
+        <FontAwesomeIcon
+          className="panel-close-btn"
+          icon={faXmark}
+          onClick={togglePanel}
+        />
 
         <div className="panel-content">
           {clickedCamera &&

diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss
@@ -21,28 +21,28 @@
 @keyframes open-panel {
   from {
     min-width: 0px;
-    @media (max-width: 575px) {
+    @media (max-width: 767px) {
       min-height: 0%;
     }
   }
 
   to {
     min-width: 500px;
-    @media (max-width: 575px) {
+    @media (max-width: 767px) {
       min-height: 50%;
     }
   }
 }
 
 @keyframes maximize-panel {
   from {
-    @media (max-width: 575px) {
+    @media (max-width: 767px) {
       min-height: 50%;
     }
   }
 
   to {
-    @media (max-width: 575px) {
+    @media (max-width: 767px) {
       min-height: 100%;
     }
   }
@@ -59,12 +59,11 @@
   }
 
   .map-container {
-
     display: flex;
     align-items: stretch;
     height: 100%;
 
-    @media (max-width: 575px) {
+    @media (max-width: 767px) {
       flex-direction: column;
     }
 
@@ -76,22 +75,26 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
+      position: relative;
+      z-index: 1;
 
-      @media (max-width: 575px) {
+      @media (max-width: 767px) {
         transition: min-height 0.25s ease-in-out;
         order: 2;
       }
 
       &.open {
-        min-width: 500px;
+        min-width: 340px;
         animation-name: open-panel;
+
         .panel-content {
-          min-width: 450px;
+          min-width: 340px;
         }
 
-        @media (max-width: 575px) {
+        @media (max-width: 767px) {
           min-width: 100%;
           min-height: 50%;
+
           .panel-content {
             min-width: 100%;
             overflow-y: hidden;
@@ -100,30 +103,25 @@
       }
 
       &.maximized {
-        @media (max-width: 575px) {
+        @media (max-width: 767px) {
           min-height: 100%;
+
           .panel-content {
             overflow-y: scroll;
           }
         }
       }
 
-      .closer-bar {
-        padding: 0.5rem;
-        text-align: right;
-        // width: 300px;
-        flex: 0;
-
-        .panel-closer {
-          cursor: pointer;
-        }
+      .panel-close-btn {
+        cursor: pointer;
+        position: absolute;
+        right: 1rem;
+        top: 4.5rem;
       }
 
       .panel-content {
         flex: 1;
-        padding: 1rem;
         overflow-y: scroll;
-        // min-width: 450px;
       }
     }
 
@@ -137,11 +135,16 @@
       .routing-outer-container {
         position: absolute;
         z-index: 16;
+        width: 100%;
+
+        @media (min-width: 768px) {
+          width: initial;
+        }
       }
 
       .ol-overlay-container:not(:has(> img)) {
         //overriding openlayers dynamic styles for mobile layout except for having img as a direct child
-        @media (max-width: 575px) {
+        @media (max-width: 767px) {
           position: fixed !important;
           bottom: 0 !important;
           transform: none !important;
@@ -159,11 +162,11 @@
         border-radius: 4px;
         left: auto;
         right: 1rem;
-        bottom: 1rem;
+        bottom: 4rem;
         padding: 2px;
         position: absolute;
 
-        @media (min-width: 768px) {
+        @media (min-width: 769px) {
           right: 1rem;
           bottom: 1rem;
         }
@@ -172,10 +175,6 @@
           right: 4rem;
           bottom: 1rem;
         }
-
-        @media (max-width: 575px) {
-          bottom: 4rem;
-        }
       }
 
       .ol-scale-line-inner {

diff --git a/src/frontend/src/Components/map/RouteSearch.scss b/src/frontend/src/Components/map/RouteSearch.scss
@@ -16,7 +16,7 @@
     }
 
     @media (min-width: 768px) {
-      width: 360px;
+      width: 300px;
     }
 
     .location-marker {

diff --git a/src/frontend/src/Components/map/camPopup.js b/src/frontend/src/Components/map/camPopup.js
@@ -9,7 +9,7 @@ import Button from 'react-bootstrap/Button';
 import FriendlyTime from '../FriendlyTime';
 import parse from 'html-react-parser';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faVideoSlash } from '@fortawesome/free-solid-svg-icons';
+import { faVideoSlash, faVideo } from '@fortawesome/free-solid-svg-icons';
 
 import colocatedCamIcon from '../../images/colocated-camera.svg';
 import './camPopup.scss';
@@ -73,45 +73,47 @@ export default function CamPopup(props) {
 
   return (
     <div className="popup popup--camera">
+      <div className="popup-title">
+        <div className="popup-title__icon">
+          <FontAwesomeIcon icon={faVideo} />
+        </div>
+        <p>Camera</p>
+      </div>
       {camera &&
-        <div onClick={handlePopupClick}>
-          <div className="popup__title">
-            <p className="bold name">{camera.name}</p>
-            <p className="bold orientation">{camera.orientation}</p>
+        <div className="popup--camera__content">
+          <div className="camera-title">
+            <p className="name" onClick={handlePopupClick}>{camera.name}</p>
           </div>
-
-          <div className="popup__description">
-            <p>{parse(camera.caption)}</p>
-            <div className="popup__camera-info">
-              <div className="camera-orientations">
-                <img className="colocated-camera-icon" src={colocatedCamIcon} role="presentation" alt="colocated cameras icon" />
-                {renderCamGroup()}
+          {camera.is_on ?
+            <div className="camera-image">
+              <img src={camera.links.imageSource} width='300' />
+              <div className="timestamp">
+                <p className="driveBC">Drive<span>BC</span></p>
+                <FriendlyTime date={camera.last_update_modified} />
               </div>
-              {camera.is_on ?
-                <div className="camera-image">
-                  <img src={camera.links.imageSource} width='300' />
-                  <div className="timestamp">
-                    <p className="driveBC">Drive<span>BC</span></p>
-                    <FriendlyTime date={camera.last_update_modified} />
-                  </div>
-                </div> :
-                <div className='camera-image'>
-                  <div className='camera-unavailable'>
-                    <div className="card-pill">
-                      <p>Unavailable</p>
-                    </div>
-                    <div className="card-img-box unavailable">
-                      <FontAwesomeIcon icon={faVideoSlash} />
-                    </div>
-                    <p>This camera image is temporarily unavailable.  Please check again later.</p>
-                  </div>
-                  <div className="timestamp">
-                    <p className="driveBC">Drive<span>BC</span></p>
-                    <FriendlyTime date={camera.last_update_modified} />
-                  </div>
+            </div> :
+            <div className='camera-image'>
+              <div className='camera-unavailable'>
+                <div className="card-pill">
+                  <p>Unavailable</p>
+                </div>
+                <div className="card-img-box unavailable">
+                  <FontAwesomeIcon icon={faVideoSlash} />
                 </div>
-              }
+                <p>This camera image is temporarily unavailable.  Please check again later.</p>
+              </div>
+              <div className="timestamp">
+                <p className="driveBC">Drive<span>BC</span></p>
+                <FriendlyTime date={camera.last_update_modified} />
+              </div>
             </div>
+          }
+          <div className="camera-orientations">
+            <img className="colocated-camera-icon" src={colocatedCamIcon} role="presentation" alt="colocated cameras icon" />
+            {renderCamGroup()}
+          </div>
+          <div className="camera-description">
+            <p>{parse(camera.caption)}</p>
           </div>
         </div>
       }