From: Calin Crisan <ccrisan@gmail.com>
Date: Sun, 17 Nov 2013 11:51:29 +0000 (+0200)
Subject: fixed layout for small screens
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=9e4c22615720abb2060d64dc2909623a2629413f;p=motioneye-debian

fixed layout for small screens
---

diff --git a/doc/todo.txt b/doc/todo.txt
index 6032486..9049bfd 100644
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -1,7 +1,4 @@
--> test IE
--> layout seems to be too wide for a modern mobile phone
 -> add a mgmt command for generating thumbnails
--> implement media files paging - find a solution for the many files
 -> make camera frames positions configurable
 -> add a view log functionality
 
diff --git a/src/mediafiles.py b/src/mediafiles.py
index b8d0dfb..cb6a7ed 100644
--- a/src/mediafiles.py
+++ b/src/mediafiles.py
@@ -40,6 +40,9 @@ def _list_media_files(dir, exts, prefix=None):
         
         root = os.path.join(dir, prefix)
         for name in os.listdir(root):
+            if name == 'lastsnap.jpg': # ignore the lastsnap.jpg file
+                continue
+                
             full_path = os.path.join(root, name)
             if not os.path.isfile(full_path):
                 continue
@@ -53,6 +56,9 @@ def _list_media_files(dir, exts, prefix=None):
     else:    
         for root, dirs, files in os.walk(dir):  # @UnusedVariable
             for name in files:
+                if name == 'lastsnap.jpg': # ignore the lastsnap.jpg file
+                    continue
+                
                 full_path = os.path.join(root, name)
                 if not os.path.isfile(full_path):
                     continue
diff --git a/static/css/main.css b/static/css/main.css
index 9b9000d..b374b61 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -34,7 +34,7 @@ html {
 div.page,
 div.header-container {
     position: relative;
-    min-width: 400px;
+    min-width: 360px;
     width: 100%;
 }
 
@@ -155,7 +155,7 @@ div.settings {
 
 div.settings.open {
     width: 40%;
-    min-width: 400px;
+    min-width: 360px;
 }
 
 div.settings-container {
@@ -177,7 +177,7 @@ div.settings-top-bar {
 
 div.settings-top-bar.open {
     background-color: #414141;
-    min-width: 400px;
+    min-width: 360px;
 }
 
 div.settings-section-title {
@@ -451,12 +451,16 @@ div.media-list-entry-name {
     padding: 0.4em 0em;
     text-align: center;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 div.media-list-entry-details {
     font-size: 1em;
     text-align: center;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 div.media-list-download-button {
@@ -537,7 +541,7 @@ div.camera-frame-place-holder {
     text-align: left;
     background-color: #313131;
     display: inline-block;
-    padding: 0px 5px 5px 5px;
+    padding: 0px 3px 3px 3px;
     border-radius: 3px;
     transition: all 0.2s, opacity 0s;
     margin: 2px;
@@ -551,7 +555,7 @@ div.camera-frame-place-holder {
 
 div.modal-container div.camera-frame {
     width: auto;
-    padding: 5px;
+    padding: 3px;
     margin: -10px;
     background-color: #414141;
 }
diff --git a/static/js/main.js b/static/js/main.js
index b9b5e4d..aab47c7 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1377,7 +1377,6 @@ function runMediaDialog(cameraId, mediaType) {
         /* prepare the entries within each group */
         keys.forEach(function (key) {
             var entries = groups[key];
-            entries.sortKey(function (e) {return e.timestamp || e.name;});
             
             entries.forEach(function (entry, pos) {
                 var entryDiv = $('<div class="media-list-entry"></div>');
@@ -1392,6 +1391,9 @@ function runMediaDialog(cameraId, mediaType) {
                 var nameDiv = $('<div class="media-list-entry-name">' + entry.name + '</div>');
                 entryDiv.append(nameDiv);
                 
+                var detailsDiv = $('<div class="media-list-entry-details"></div>');
+                entryDiv.append(detailsDiv);
+                
                 downloadButton[0]._onClick = function () {
                     window.location.href = '/picture/' + cameraId + '/download' + entry.path;
                     
@@ -1444,29 +1446,29 @@ function runMediaDialog(cameraId, mediaType) {
                         $this.removeClass('current');
                     }
                 });
+                
+                /* assign details to entries */
+                entries.forEach(function (entry) {
+                    var media = mediaListByName[entry.name];
+                    if (media) {
+                        entry.momentStr = media.momentStr;
+                        entry.sizeStr = media.sizeStr;
+                        entry.timestamp = media.timestamp;
+                    }
+                });
  
+                /* sort the entries by timestamp */
+                entries.sortKey(function (e) {return e.timestamp || e.name;});
+                
                 /* add the entries to the media list */
                 mediaListDiv.children('div.media-list-entry').detach();
                 mediaListDiv.html('');
                 entries.forEach(function (entry) {
                     var entryDiv = entry.div;
-                    var nameDiv = entryDiv.find('div.media-list-entry-name');
                     var detailsDiv = entryDiv.find('div.media-list-entry-details');
                     var downloadButton = entryDiv.find('div.media-list-download-button');
                     
-                    var media = mediaListByName[entry.name];
-                    if (media) { /* if details are available, show them */
-                        if (detailsDiv.length === 0) {
-                            detailsDiv = $('<div class="media-list-entry-details"></div>');
-                            entryDiv.append(detailsDiv);
-                        }
-                        
-                        detailsDiv.html(media.momentStr + ' | ' + media.sizeStr);
-                    }
-                    else {
-                        nameDiv.css('line-height', '2.3em');
-                    }
-                    
+                    detailsDiv.html(entry.momentStr + ' | ' + entry.sizeStr);
                     entryDiv.click(entryDiv[0]._onClick);
                     downloadButton.click(downloadButton[0]._onClick);