frame layout improvements

diff --git a/motioneye/static/css/main.css b/motioneye/static/css/main.css
index 4e4c65796d0e217039bd203f4708875942c4f3a6..2f72dd3d7dd3b4b929f7cb876aa1a3bcd891df46 100644 (file)
--- a/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@ -120,6 +120,7 @@ div.copyright-note {
 div.page-container {
     transition: all 0.2s ease;
     padding: 50px 0.2em 50px 0px;
+    margin: auto;
 }
 
 div.page-container.four-columns {
@@ -926,7 +927,7 @@ div.camera-overlay-bottom {
 
 div.camera-frame:HOVER div.camera-overlay-top,
 div.camera-frame:HOVER div.camera-overlay-bottom {
-    background-color: rgba(40, 40, 40, 0.8);
+    background-color: rgba(30, 30, 30, 0.8);
 }
 
 div.camera-frame.motion-detected div.camera-overlay-top,
@@ -1225,3 +1226,9 @@ img.camera-progress {
         width: 100% !important;
     }
 }
+
+@media all and (max-height: 320px) {
+    div.page-container {
+        font-size: 14px !important;
+    }
+}

diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index c6c1924716446b881e4b06e50b9f0770c54bec5c..37e81e5bc016f499548e8f05dbd0bc4ebd900180 100644 (file)
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -12,6 +12,7 @@ var signatureRegExp = new RegExp('[^a-zA-Z0-9/?_.=&{}\\[\\]":, _-]', 'g');
 var initialConfigFetched = false; /* used to workaround browser extensions that trigger stupid change events */
 var pageContainer = null;
 var overlayVisible = false;
+var layoutColumns = 1;
 
 
     /* Object utilities */
@@ -863,6 +864,64 @@ function setLayoutColumns(columns) {
     
     getPageContainer().removeClass(Object.values(cssClasses).join(' '));
     getPageContainer().addClass(cssClasses[columns]);
+    
+    layoutColumns = columns;
+    updateLayout();
+}
+
+function updateLayout() {
+    /* make sure the height of each camera
+     * is smaller than the height of the screen */
+    
+    /* find the tallest frame */
+    var frames = getCameraFrames();
+    var maxHeight = -1;
+    var maxHeightFrame = null;
+    frames.each(function () {
+        var frame = $(this);
+        var height = frame.height();
+        if (height > maxHeight) {
+            maxHeight = height;
+            maxHeightFrame = frame;
+        }
+    });
+    
+    if (!maxHeightFrame) {
+        return; /* no camera frames */
+    }
+    
+    var pageContainer = getPageContainer();
+    var windowWidth = $(window).width();
+    
+    var columns = layoutColumns;
+    if (isFullScreen() || windowWidth < 1200) {
+        columns = 1; /* always 1 column when in full screen or mobile */
+    }
+    
+    var heightOffset = 10; /* some padding */
+    if (!isFullScreen()) {
+        heightOffset += 50; /* top bar */
+    }
+
+    var windowHeight = $(window).height() - heightOffset;
+    var ratio = maxHeightFrame.width() / maxHeightFrame.height();
+    var width = parseInt(ratio * windowHeight * columns);
+    var maxWidth = windowWidth;
+    
+    if (pageContainer.hasClass('stretched')) {
+        maxWidth *= 0.6; /* opened settings panel occupies 40% of the window width */ 
+    }
+    
+    if (width < 100) {
+        width = 100; /* absolute minimum width for a frame */;
+    }
+    
+    if (width > maxWidth) {
+        getPageContainer().css('width', '');
+        return; /* page container width already at its maximum */
+    }
+    
+    getPageContainer().css('width', width);
 }
 
 function showCameraOverlay() {
@@ -892,6 +951,9 @@ function openSettings(cameraId) {
     $('div.settings-top-bar').addClass('open').removeClass('closed');
     
     updateConfigUI();
+    doExitFullScreenCamera();
+    updateLayout();
+    setTimeout(updateLayout, 200);
 }
 
 function closeSettings() {
@@ -902,6 +964,8 @@ function closeSettings() {
     $('div.settings').removeClass('open').addClass('closed');
     getPageContainer().removeClass('stretched');
     $('div.settings-top-bar').removeClass('open').addClass('closed');
+    
+    updateLayout();
 }
 
 function isSettingsOpen() {
@@ -3914,6 +3978,8 @@ function addCameraFrameUi(cameraConfig) {
             cameraImg.removeClass('initializing');
             cameraImg.css('height', '');
             this.initializing = false;
+            
+            updateLayout();
         }
 
         /* there's no point in looking for a cookie update more often than once every second */
@@ -4061,8 +4127,10 @@ function doFullScreenCamera(cameraId) {
     
     pageContainer.addClass('full-screen');
     cameraFrame.addClass('full-screen');
-    $('div.header').addClass('full-screen')
-    $('div.footer').addClass('full-screen')
+    $('div.header').addClass('full-screen');
+    $('div.footer').addClass('full-screen');
+    
+    updateLayout();
 }
 
 function doExitFullScreenCamera() {
@@ -4077,8 +4145,8 @@ function doExitFullScreenCamera() {
     var cameraFrame = getCameraFrame(fullScreenCameraId);
     var pageContainer = getPageContainer();
     
-    $('div.header').removeClass('full-screen')
-    $('div.footer').removeClass('full-screen')
+    $('div.header').removeClass('full-screen');
+    $('div.footer').removeClass('full-screen');
     pageContainer.removeClass('full-screen');
     cameraFrame.removeClass('full-screen');
 
@@ -4092,6 +4160,12 @@ function doExitFullScreenCamera() {
     });
 
     fullScreenCameraId = null;
+    
+    updateLayout();
+}
+
+function isFullScreen() {
+    return fullScreenCameraId != null;   
 }
 
 function refreshCameraFrames() {
@@ -4255,6 +4329,9 @@ $(document).ready(function () {
     
     refreshCameraFrames();
     checkCameraErrors();
-    setLayoutColumns(3); // TODO !!!
+    
+    $(window).resize(function () {
+        updateLayout();
+    });
 });