From: Calin Crisan Date: Sat, 27 Sep 2014 09:07:27 +0000 (+0300) Subject: media browser layout improvements X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=471c4116bd4790fc31dcea67fbe01e643499940c;p=motioneye-debian media browser layout improvements --- diff --git a/src/mediafiles.py b/src/mediafiles.py index b3874b5..fc79dde 100644 --- 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 f287f17..a7de78d 100644 --- 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 e1e43ef..e9f9f65 100644 --- 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 441efa9..708200a 100644 --- 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('
'); @@ -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 = $('' + entry.momentStr + ', '); + var momentShortSpan = $('' + entry.momentStrShort + ''); + var sizeSpan = $('' + entry.sizeStr + ''); + 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 ede3317..55d1e79 100644 --- 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) {