From fd52caddcbef7671635a95489868caeaca6f29cd Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Thu, 19 Jan 2023 15:27:12 -0700
Subject: [PATCH] Optimize layout for mobile and web

---
 web/src/components/CameraControlPanel.jsx | 138 +++++++++++-----------
 web/src/routes/Birdseye.jsx               |   2 +-
 web/src/routes/Camera.jsx                 |   2 +-
 3 files changed, 72 insertions(+), 70 deletions(-)

diff --git a/web/src/components/CameraControlPanel.jsx b/web/src/components/CameraControlPanel.jsx
index 06d89fe40..078d94752 100644
--- a/web/src/components/CameraControlPanel.jsx
+++ b/web/src/components/CameraControlPanel.jsx
@@ -104,79 +104,81 @@ export default function CameraControlPanel({ camera = '' }) {
   });
 
   return (
-    <div data-testid="control-panel" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-      {ptz.features.includes('pt') && (
-        <div className="w-44 px-4">
-          <Heading size="xs" className="my-4">
-            Pan / Tilt
-          </Heading>
-          <div className="w-full flex justify-center">
-            <button
-              onMouseDown={(e) => onSetMove(e, 'UP')}
-              onMouseUp={(e) => onSetStop(e)}
-              onTouchStart={(e) => {
-                onSetMove(e, 'UP');
-                e.preventDefault();
-              }}
-              onTouchEnd={(e) => {
-                onSetStop(e);
-                e.preventDefault();
-              }}
-            >
-              <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
-            </button>
-          </div>
-          <div className="w-full flex justify-between">
-            <button
-              onMouseDown={(e) => onSetMove(e, 'LEFT')}
-              onMouseUp={(e) => onSetStop(e)}
-              onTouchStart={(e) => {
-                onSetMove(e, 'LEFT');
-                e.preventDefault();
-              }}
-              onTouchEnd={(e) => {
-                onSetStop(e);
-                e.preventDefault();
-              }}
-            >
-              <ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" />
-            </button>
-            <button
-              onMouseDown={(e) => onSetMove(e, 'RIGHT')}
-              onMouseUp={(e) => onSetStop(e)}
-              onTouchStart={(e) => {
-                onSetMove(e, 'RIGHT');
-                e.preventDefault();
-              }}
-              onTouchEnd={(e) => {
-                onSetStop(e);
-                e.preventDefault();
-              }}
-            >
-              <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
-            </button>
-          </div>
-          <div className="flex justify-center">
-            <button
-              onMouseDown={(e) => onSetMove(e, 'DOWN')}
-              onMouseUp={(e) => onSetStop(e)}
-              onTouchStart={(e) => {
-                onSetMove(e, 'DOWN');
-                e.preventDefault();
-              }}
-              onTouchEnd={(e) => {
-                onSetStop(e);
-                e.preventDefault();
-              }}
-            >
-              <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
-            </button>
+    <div data-testid="control-panel" className="p-4 sm:flex justify-start">
+      {ptz.features.includes('zoom') && (
+        <div className="flex justify-center">
+          <div className="w-44 px-4">
+            <Heading size="xs" className="my-4">
+              Pan / Tilt
+            </Heading>
+            <div className="w-full flex justify-center">
+              <button
+                onMouseDown={(e) => onSetMove(e, 'UP')}
+                onMouseUp={(e) => onSetStop(e)}
+                onTouchStart={(e) => {
+                  onSetMove(e, 'UP');
+                  e.preventDefault();
+                }}
+                onTouchEnd={(e) => {
+                  onSetStop(e);
+                  e.preventDefault();
+                }}
+              >
+                <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
+              </button>
+            </div>
+            <div className="w-full flex justify-between">
+              <button
+                onMouseDown={(e) => onSetMove(e, 'LEFT')}
+                onMouseUp={(e) => onSetStop(e)}
+                onTouchStart={(e) => {
+                  onSetMove(e, 'LEFT');
+                  e.preventDefault();
+                }}
+                onTouchEnd={(e) => {
+                  onSetStop(e);
+                  e.preventDefault();
+                }}
+              >
+                <ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" />
+              </button>
+              <button
+                onMouseDown={(e) => onSetMove(e, 'RIGHT')}
+                onMouseUp={(e) => onSetStop(e)}
+                onTouchStart={(e) => {
+                  onSetMove(e, 'RIGHT');
+                  e.preventDefault();
+                }}
+                onTouchEnd={(e) => {
+                  onSetStop(e);
+                  e.preventDefault();
+                }}
+              >
+                <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
+              </button>
+            </div>
+            <div className="flex justify-center">
+              <button
+                onMouseDown={(e) => onSetMove(e, 'DOWN')}
+                onMouseUp={(e) => onSetStop(e)}
+                onTouchStart={(e) => {
+                  onSetMove(e, 'DOWN');
+                  e.preventDefault();
+                }}
+                onTouchEnd={(e) => {
+                  onSetStop(e);
+                  e.preventDefault();
+                }}
+              >
+                <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
+              </button>
+            </div>
           </div>
         </div>
       )}
 
       {ptz.features.includes('zoom') && (
-        <div className="w-44 px-4">
+        <div className="px-4 sm:w-44">
           <Heading size="xs" className="my-4">
             Zoom
           </Heading>
diff --git a/web/src/routes/Birdseye.jsx b/web/src/routes/Birdseye.jsx
index b67eedd53..8255436c9 100644
--- a/web/src/routes/Birdseye.jsx
+++ b/web/src/routes/Birdseye.jsx
@@ -94,7 +94,7 @@ export default function Birdseye() {
       {player}
 
       {ptzCameras && (
-        <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-fit">
+        <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-full sm:w-min">
           <Heading size="sm">Control Panel</Heading>
           {ptzCameras.map((camera) => (
             <div className="p-4" key={camera}>
diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
index 2a21abc55..4a415e32d 100644
--- a/web/src/routes/Camera.jsx
+++ b/web/src/routes/Camera.jsx
@@ -190,7 +190,7 @@ export default function Camera({ camera }) {
       {player}
 
       {cameraConfig?.onvif?.host && (
-        <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-fit">
+        <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-full sm:w-min">
           <Heading size="sm">Control Panel</Heading>
           <CameraControlPanel camera={camera} />
         </div>