media browser layout improvements

diff --git a/src/mediafiles.py b/src/mediafiles.py
index b3874b5e07bca37a3b83b0c61fd13dd8cf3aa11b..fc79dde385100a1a29c2d11100724b60a9b7307f 100644 (file)
--- a/src/mediafiles.py
+++ b/src/mediafiles.py
@@ -247,6 +247,7 @@ def list_media(camera_config, media_type, callback, prefix=None):
             pipe.send({
                 'path': path,
                 'momentStr': utils.pretty_date_time(datetime.datetime.fromtimestamp(timestamp)),
+                'momentStrShort': utils.pretty_date_time(datetime.datetime.fromtimestamp(timestamp), short=True),
                 'sizeStr': utils.pretty_size(size),
                 'timestamp': timestamp
             })

diff --git a/src/utils.py b/src/utils.py
index f287f1788b3ed07b51346632ea96e903b4dcb3c0..a7de78d1fe93ae84ff69e8fac559866e9d4e856d 100644 (file)
--- a/src/utils.py
+++ b/src/utils.py
@@ -24,19 +24,27 @@ from tornado.httpclient import AsyncHTTPClient, HTTPRequest
 import settings
 
 
-def pretty_date_time(date_time, tzinfo=None):
+def pretty_date_time(date_time, tzinfo=None, short=False):
     if date_time is None:
         return '('+  _('never') + ')'
 
     if isinstance(date_time, int):
         return pretty_date_time(datetime.datetime.fromtimestamp(date_time))
 
-    text = u'{day} {month} {year}, {hm}'.format(
-        day=date_time.day,
-        month=date_time.strftime('%B'),
-        year=date_time.year,
-        hm=date_time.strftime('%H:%M')
-    )
+    if short:
+        text = u'{day} {month}, {hm}'.format(
+            day=date_time.day,
+            month=date_time.strftime('%b'),
+            hm=date_time.strftime('%H:%M')
+        )
+    
+    else:
+        text = u'{day} {month} {year}, {hm}'.format(
+            day=date_time.day,
+            month=date_time.strftime('%B'),
+            year=date_time.year,
+            hm=date_time.strftime('%H:%M')
+        )
     
     if tzinfo:
         offset = tzinfo.utcoffset(datetime.datetime.utcnow()).seconds

diff --git a/static/css/main.css b/static/css/main.css
index e1e43ef4cc2e391e96395d3b6bd4907e55a932a6..e9f9f65de28b2a937224e7ae66d04b4eae896927 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -463,23 +463,34 @@ div.media-dialog {
 }
 
 div.media-dialog-groups {
+    float: left;
+    width: 10em;
     text-align: center;
     overflow: auto;
     white-space: nowrap;
 }
 
+div.media-dialog-groups.small-screen {
+    float: none;
+}
+
 div.media-dialog-group-button {
-    display: inline-block;
     height: 1.5em;
     line-height: 1.5em;
     text-align: center;
-    margin: 0em 0.2em 0.3em 0.2em;
+    margin: 0em 0.2em 0.2em 0.2em;
     padding: 0px 0.5em;
     background-color: #414141;
     color: #3498db;
     border-radius: 3px;
     transition: all 0.1s linear;
     cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+div.media-dialog-groups.small-screen div.media-dialog-group-button {
+    display: inline-block;
 }
 
 div.media-dialog-group-button:HOVER {
@@ -548,6 +559,7 @@ img.media-list-preview {
 }
 
 div.media-list-entry-name {
+    font-weight: bold;
     font-size: 1.3em;
     padding: 0.4em 0em;
     text-align: center;
@@ -564,6 +576,10 @@ div.media-list-entry-details {
     text-overflow: ellipsis;
 }
 
+div.media-list-entry-details span.details-moment-short {
+    display: none;
+}
+
 div.media-list-download-button {
     float: right;
     height: 1.5em;
@@ -809,6 +825,26 @@ img.camera-progress {
     div.hostname {
         display: none;
     }
+
+    div.media-list-entry-name {
+        font-size: 1em;
+        padding: 0.2em 0em 0em 0em;
+    }
+
+    div.media-list-entry-details {
+        padding-top: 0.2em;
+        font-size: 1em;
+        text-align: center;
+        white-space: normal;
+    }
+
+    div.media-list-entry-details span.details-moment {
+        display: none;
+    }
+
+    div.media-list-entry-details span.details-moment-short {
+        display: block;
+    }
 }
 
 @media all and (max-width: 400px) {

diff --git a/static/js/main.js b/static/js/main.js
index 441efa9a2336fbc4ab9a93155eccdcaa6be5dd7d..708200a9a933b7577a194db1898cef0fc07542b9 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1848,14 +1848,34 @@ function runMediaDialog(cameraId, mediaType) {
     dialogDiv.append(groupsDiv);
     dialogDiv.append(mediaListDiv);
     
-    var windowWidth = $(window).width();
-    var windowHeight = $(window).height();
-    var widthCoef = windowWidth < 1000 ? 0.8 : 0.5;
-    var heightCoef = 0.75;
+    function setDialogSize() {
+        var windowWidth = $(window).width();
+        var windowHeight = $(window).height();
+        
+        if (windowWidth < 1000) {
+            groupsDiv.width(parseInt(windowWidth * 0.8));
+            groupsDiv.height('');
+            groupsDiv.addClass('small-screen');
+            mediaListDiv.width(parseInt(windowWidth * 0.8));
+            mediaListDiv.height(parseInt(windowHeight * 0.7));
+        }
+        else {
+            mediaListDiv.width(parseInt(windowWidth * 0.7));
+            mediaListDiv.height(parseInt(windowHeight * 0.7));
+            groupsDiv.height(parseInt(windowHeight * 0.7));
+            groupsDiv.width('');
+            groupsDiv.removeClass('small-screen');
+        }
+    }
+    
+    function onResize() {
+        setDialogSize();
+        updateModalDialogPosition();
+    }
     
-    mediaListDiv.width(parseInt(windowWidth * widthCoef));
-    groupsDiv.width(parseInt(windowWidth * widthCoef));
-    mediaListDiv.height(parseInt(windowHeight * heightCoef));
+    $(window).resize(onResize);
+    
+    setDialogSize();
     
     showModalDialog('<div class="modal-progress"></div>');
     
@@ -1960,7 +1980,12 @@ function runMediaDialog(cameraId, mediaType) {
                         detailsDiv = entry.div.find('div.media-list-entry-details');
                     }                    
                     
-                    detailsDiv.html(entry.momentStr + ' | ' + entry.sizeStr);
+                    var momentSpan = $('<span class="details-moment">' + entry.momentStr + ', </span>');
+                    var momentShortSpan = $('<span class="details-moment-short">' + entry.momentStrShort + '</span>');
+                    var sizeSpan = $('<span class="details-size">' + entry.sizeStr + '</span>');
+                    detailsDiv.append(momentSpan);
+                    detailsDiv.append(momentShortSpan);
+                    detailsDiv.append(sizeSpan);
                     mediaListDiv.append(entryDiv);
                 });
 
@@ -2000,6 +2025,7 @@ function runMediaDialog(cameraId, mediaType) {
                     var media = mediaListByName[entry.name];
                     if (media) {
                         entry.momentStr = media.momentStr;
+                        entry.momentStrShort = media.momentStrShort;
                         entry.sizeStr = media.sizeStr;
                         entry.timestamp = media.timestamp;
                     }
@@ -2048,6 +2074,9 @@ function runMediaDialog(cameraId, mediaType) {
                 if (keys.length) {
                     showGroup(keys[0]);
                 }
+            },
+            onClose: function () {
+                $(window).unbind('resize', onResize);
             }
         });
     });

diff --git a/static/js/ui.js b/static/js/ui.js
index ede331704b20a4a5dbb98b83678c945208bc73ca..55d1e797c634cc9f751648b92567df3dca2b0480 100644 (file)
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -659,11 +659,16 @@ function updateModalDialogPosition() {
     
     var windowWidth = $(window).width();
     var windowHeight = $(window).height();
-    var modalWidth = container.width() + 10 /* the margins */;
-    var modalHeight = container.height() + 10 /* the margins */;
+    var modalWidth, modalHeight, i;
     
-    container.css('left', Math.floor((windowWidth - modalWidth) / 2));
-    container.css('top', Math.floor((windowHeight - modalHeight) / 2));
+    /* repeat the operation multiple times, the size might change */
+    for (i = 0; i < 3; i++) {
+        modalWidth = container.outerWidth() + 10 /* the margins */;
+        modalHeight = container.outerHeight() + 10 /* the margins */;
+        
+        container.css('left', Math.floor((windowWidth - modalWidth) / 2));
+        container.css('top', Math.floor((windowHeight - modalHeight) / 2));
+    }
 }
 
 function makeModalDialogButtons(buttonsInfo) {