fixed vertical fit layout on small screens with settings opened

diff --git a/motioneye/static/css/main.css b/motioneye/static/css/main.css
index 22d04539827c1e84c7dc6a8c16f3265a22689e0e..cffa4b341d245109da0bb535347390d14bd609ac 100644 (file)
--- a/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@ -1192,6 +1192,7 @@ img.camera-progress {
 @media all and (max-width: 1200px) {
     div.page-container {
         font-size: 16px !important;
+        margin-left: auto !important;
     }
 
     div.camera-frame {

diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index fcbe11726b2d42c25fc72082121aadbd4a4797d0..01aac80feee22cd382ecead0a63dc5ad091b6c85 100644 (file)
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -931,7 +931,7 @@ function updateLayout() {
         var width = parseInt(ratio * windowHeight * columns);
         var maxWidth = windowWidth;
         
-        if (pageContainer.hasClass('stretched') && windowWidth > 1000) {
+        if (pageContainer.hasClass('stretched') && windowWidth > 1200) {
             maxWidth *= 0.6; /* opened settings panel occupies 40% of the window width */ 
         }
         
@@ -1300,6 +1300,13 @@ function applyPrefs(dict) {
     fitFramesVertically = dict['fit_frames_vertically']
     framerateFactor = dict['framerate_factor'];
     resolutionFactor = dict['resolution_factor'];
+    
+    if (fitFramesVertically) {
+        getPageContainer().addClass('fit-frames-vertically');
+    }
+    else {
+        getPageContainer().removeClass('fit-frames-vertically');
+    }
 }
 
 function savePrefs() {