DBC22-2152: Fix camera direction buttons layout on mobile (#435)

bcgov · May 10, 2024 · 3270ab6 · 3270ab6
1 parent 13081ef
commit 3270ab6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/src/frontend/src/pages/CameraDetailsPage.js b/src/frontend/src/pages/CameraDetailsPage.js
@@ -384,9 +384,12 @@ export default function CameraDetailsPage() {
                         <img className="colocated-camera-icon" src={colocatedCamIcon} role="presentation" alt="colocated cameras icon" />
                         <span>Direction</span>
                       </span>
-                      {camera.camGroup.map((cam) =>
-                        <Button aria-label={getCameraOrientation(cam.orientation)} className={'camera-direction-btn' + ((camera.orientation == cam.orientation) ? ' current' : '') } key={cam.id} onClick={() => setCamera(cam)}>{cam.orientation}</Button>
-                      )}
+
+                      <div className="camera-orientations-group">
+                        {camera.camGroup.map((cam) =>
+                          <Button aria-label={getCameraOrientation(cam.orientation)} className={'camera-direction-btn' + ((camera.orientation == cam.orientation) ? ' current' : '') } key={cam.id} onClick={() => setCamera(cam)}>{cam.orientation}</Button>
+                        )}
+                      </div>
                     </div>
 
                     <div className="replay-div">

diff --git a/src/frontend/src/pages/CameraDetailsPage.scss b/src/frontend/src/pages/CameraDetailsPage.scss
@@ -2,6 +2,7 @@
 
 .camera-page {
   position: relative;
+  overflow-x: hidden;
 
   .network-error, .server-error {
     @media (max-width: 768px) {
@@ -209,8 +210,7 @@
         align-items: flex-start;
 
         @media (min-width: 576px) {
-          flex-grow: 1;
-          display: block;
+          flex-direction: row;
         }
 
         .btn.camera-direction-btn {
@@ -419,6 +419,7 @@
       flex-direction: row;
       align-items: flex-start;
       margin-top: 0.5rem;
+      position: relative;
 
       @media (min-width: 576px) {
         justify-content: space-between;
@@ -441,19 +442,33 @@
       .replay-the-day {
         .form-switch {
           display: flex;
+          flex-direction: column;
           align-items: center;
           margin-bottom: 0;
           padding-left: 0;
 
+          @media (min-width: 576px) {
+            flex-direction: row;
+          }
+
           .form-check-input, .form-check-label {
             cursor: pointer;
           }
 
           .form-check-input {
             height: 20px;
-            margin: 0;
-            margin-left: 8px;
+            margin-top: 10px;
+            margin-left: 0;
             order: 2;
+            position: absolute;
+            top: 30px;
+            left: 0;
+
+            @media (min-width: 576px) {
+              margin-top: 0;
+              margin-left: 8px;
+              position: static;
+            }
           }
 
           .form-check-label {