camera frames are now centered

diff --git a/static/css/main.css b/static/css/main.css
index d915aa75c27374d512cff16ed0d9b65ddb587e7e..a08d5f9b314b72e7816cb1ab4a492c3eb6f2e889 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -77,12 +77,12 @@ div.copyright-note {
 
 div.page-container {
     transition: all 0.2s linear;
-    padding: 55px 5px 3em 5px;
-    text-align: center;
+    padding: 55px 5px 3em 2%;
 }
 
 div.page-container.stretched {
     margin-left: 40%;
+    padding-left: 5px;
 }
 
 
@@ -361,7 +361,8 @@ div.camera-list {
     text-align: center;
 }
 
-div.camera-frame {
+div.camera-frame,
+div.camera-frame-place-holder {
     position: relative;
     width: 32%;
     text-align: left;
@@ -372,6 +373,11 @@ div.camera-frame {
     transition: all 0.2s, opacity 0s;
     margin: 2px;
     opacity: 0;
+    vertical-align: top;
+}
+
+div.camera-frame-place-holder {
+    visibility: hidden;
 }
 
 div.modal-container div.camera-frame {
@@ -523,17 +529,19 @@ img.camera-progress {
 }
 
 @media all and (max-width: 1900px) {
-    /* a bit smaller screens */
-    
-    div.camera-frame {
+    div.camera-frame, 
+    div.camera-frame-place-holder {
         width: 48%;
     }
 }
 
-@media all and (max-width: 1150px) {
-    /* even smaller screens */
-    
-    div.camera-frame {
+@media all and (max-width: 1200px) {
+    div.page-container {
+        padding-left: 1%;
+    }
+
+    div.camera-frame,
+    div.camera-frame-place-holder {
         width: 98%;
     }
 }

diff --git a/static/js/main.js b/static/js/main.js
index e3d525e2aab143728d675c4e8dd2b18adbde7fc4..e98b9037bca2715ad5eca7c7fa326b0ac1603271 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1209,6 +1209,15 @@ function runAddCameraDialog() {
     /* camera frames */
 
 function addCameraFrameUi(cameraId, cameraName, framerate) {
+    var pageContainer = $('div.page-container');
+    
+    if (cameraId == null) {
+        var cameraFrameDivPlaceHolder = $('<div class="camera-frame-place-holder"></div>');
+        pageContainer.append(cameraFrameDivPlaceHolder);
+        
+        return;
+    }
+    
     var cameraFrameDiv = $(
             '<div class="camera-frame">' +
                 '<div class="camera-top-bar">' +
@@ -1250,7 +1259,6 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
     
     /* insert the new camera frame at the right position,
      * with respect to the camera id */
-    var pageContainer = $('div.page-container');
     var cameraFrames = pageContainer.find('div.camera-frame');
     var cameraIds = cameraFrames.map(function () {return parseInt(this.id.substring(6));});
     cameraIds.sort();
@@ -1318,30 +1326,15 @@ function recreateCameraFrames(cameras) {
     
     function updateCameras(cameras) {
         cameras = cameras.filter(function (camera) {return camera.enabled;});
-        var i, camera, cameraId;
-        
-        /* remove everything that is not a camera frame from the page */
-        pageContainer.children().not('div.camera-frame').remove();
-        
-        /* remove no longer existing camera frames */
-        var addedCameraFrames = pageContainer.find('div.camera-frame');
-        for (i = 0; i < addedCameraFrames.length; i++) {
-            cameraId = parseInt(addedCameraFrames[i].id.substring(6));
-            if (cameras.filter(function (camera) {return camera.id === cameraId;}).length === 0) {
-                remCameraFrameUi(cameraId);
-            }
-        }
+        var i, camera;
+
+        /* remove everything on the page */
+        pageContainer.children().remove();
         
-        /* add new camera frames and update existing camera params */
+        /* add camera frames */
         for (i = 0; i < cameras.length; i++) {
             camera = cameras[i];
-            var cameraFrame = pageContainer.find('div.camera-frame#camera' + camera.id);
-            if (cameraFrame.length === 0) { /* not existing, add a new one */
-                addCameraFrameUi(camera.id, camera.name, Math.min(camera.streaming_framerate, camera.framerate));
-            }
-            else { /* existing, update params */
-                cameraFrame[0].framerate = Math.min(camera.streaming_framerate, camera.framerate);
-            }
+            addCameraFrameUi(camera.id, camera.name, Math.min(camera.streaming_framerate, camera.framerate));
         }
         
         if ($('#videoDeviceSelect').find('option').length < 2 && user === 'admin' && $('#motionEyeSwitch')[0].checked) {
@@ -1447,7 +1440,7 @@ function doFullScreenCamera(cameraId) {
         onClose: function () {
             fullScreenCameraId = null;
             cameraFrameDiv.css('width', '');
-            var nextFrame = pageContainer.find('div.camera-frame:eq(' + frameIndex + ')');
+            var nextFrame = pageContainer.children('div:eq(' + frameIndex + ')');
             if (nextFrame.length) {
                 nextFrame.before(cameraFrameDiv);
             }