From: Calin Crisan Date: Sat, 21 Sep 2013 10:56:12 +0000 (+0300) Subject: ui improvements X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=5e17c5ebf67e2bfbe0714ee42bead2e0623e8e83;p=motioneye-debian ui improvements --- diff --git a/artwork/video-buttons.svg b/artwork/video-buttons.svg new file mode 100644 index 0000000..f9a4aad --- /dev/null +++ b/artwork/video-buttons.svg @@ -0,0 +1,199 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/css/base-site.css b/static/css/base-site.css index 6d92e45..4f862f8 100644 --- a/static/css/base-site.css +++ b/static/css/base-site.css @@ -34,13 +34,12 @@ html { div.page, div.header-container { position: relative; - min-width: 1000px; - max-width: 1580px; - width: 75%; - margin: auto; + min-width: 320px; + width: 100%; } div.page { + margin-top: 50px; padding-bottom: 20px; font-size: 1em; transition: all 0.5s; @@ -48,8 +47,12 @@ div.page { div.header { background-color: rgba(64, 64, 64, 0.5); + top: 0px; + width: 100%; height: 50px; - position: relative; + position: fixed; + overflow: hidden; + z-index: 10000; } div.header-container { @@ -80,18 +83,19 @@ div.page-container.stretched { div.settings { background-color: #313131; - position: absolute; + position: fixed; z-index: 1; - top: 0px; + top: 50px; left: 0px; width: 0px; - min-height: 100%; + height: 100%; transition: all 0.2s; - overflow: hidden; + overflow: auto; } div.settings.open { width: 40%; + min-width: 320px; } div.settings-container { @@ -112,6 +116,7 @@ div.settings-top-bar { div.settings-top-bar.open { background-color: #414141; + min-width: 320px; } div.settings-section-title { @@ -193,35 +198,24 @@ input[type=text].working-schedule.number { } } -@media all and (max-width: 800px) { - /* mobile devices */ +@media all and (max-width: 1000px) { + /* small screens (mobile devices) */ - body { - font-size: 17px; - } - - div.page, - div.header-container { - width: 100%; - min-width: 320px; - } - - div.header { - background-color: rgba(32, 32, 32, 1); - } - div.page-container.stretched { margin-left: 0px; } - div.settings-top-bar, - div.settings-top-bar.open { - width: auto; - background-color: transparent; + div.settings.open { + box-shadow: 0px 0px 10px rgba(0,0,0,0.5); + background-color: rgba(40, 40, 40, 0.9); } +} + +@media all and (max-width: 400px) { + /* very small screens */ - div.settings.open { - width: 100%; + body { + font-size: 13px; } } diff --git a/static/css/main.css b/static/css/main.css index 36d7284..6214374 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -4,24 +4,59 @@ div.video-list { } div.video-frame { - width: 48%; + width: 32%; text-align: left; background-color: #313131; display: inline-block; - padding: 0px 5px; + padding: 0px 5px 5px 5px; border-radius: 3px; transition: all 0.2s; - margin-bottom: 10px; + margin-top: 3px; } div.video-frame:HOVER { background-color: #414141; } -div.video-top-bar, -div.video-bottom-bar { - padding: 3px; - font-size: 0.75em; +div.video-top-bar { + padding: 3px 0px; + font-size: 17px; + height: 17px; +} + +span.video-name { + float: left; +} + +div.video-buttons { + float: right; +} + +div.video-button { + display: inline-block; + width: 16px; + height: 16px; + background-image: url(../img/video-buttons.png); + margin-left: 3px; + cursor: pointer; + opacity: 0.7; + transition: all 0.1s linear; +} + +div.video-button:HOVER { + opacity: 1; +} + +div.video-button:ACTIVE { + opacity: 0.5; +} + +div.video-button.close { + background-position: 0px 0px; +} + +div.video-button.configure { + background-position: -16px 0px; } div.video-container { @@ -36,8 +71,16 @@ img.video { /* media queries */ -@media all and (max-width: 1600px) { - /* smaller screens */ +@media all and (max-width: 1900px) { + /* a bit smaller screens */ + + div.video-frame { + width: 48%; + } +} + +@media all and (max-width: 1150px) { + /* even smaller screens */ div.video-frame { width: 98%; diff --git a/static/img/video-buttons.png b/static/img/video-buttons.png new file mode 100644 index 0000000..d27d5e4 Binary files /dev/null and b/static/img/video-buttons.png differ diff --git a/static/js/base-site.js b/static/js/base-site.js index 7891d8c..b0172d8 100644 --- a/static/js/base-site.js +++ b/static/js/base-site.js @@ -171,6 +171,7 @@ function updateSettingsUI() { } $(document).ready(function () { + /* open/close settings */ $('img.settings-button').click(function () { if ($('div.settings').hasClass('open')) { $('div.settings').removeClass('open'); @@ -182,7 +183,18 @@ $(document).ready(function () { $('div.page-container').addClass('stretched'); $('div.settings-top-bar').addClass('open'); } - }).click(); + }); + + /* prevent scroll events on settings div from propagating */ + $('div.settings').mousewheel(function (e, d) { + var t = $(this); + if (d > 0 && t.scrollTop() === 0) { + e.preventDefault(); + } + else if (d < 0 && (t.scrollTop() === t.get(0).scrollHeight - t.innerHeight())) { + e.preventDefault(); + } + }); initUI(); updateSettingsUI(); diff --git a/static/js/jquery.mousewheel.js b/static/js/jquery.mousewheel.js new file mode 100644 index 0000000..9d65c71 --- /dev/null +++ b/static/js/jquery.mousewheel.js @@ -0,0 +1,117 @@ +/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net) + * Licensed under the MIT License (LICENSE.txt). + * + * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. + * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. + * Thanks to: Seamus Leahy for adding deltaX and deltaY + * + * Version: 3.1.3 + * + * Requires: 1.2.2+ + */ + +(function (factory) { + if ( typeof define === 'function' && define.amd ) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS style for Browserify + module.exports = factory; + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll']; + var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll']; + var lowestDelta, lowestDeltaXY; + + if ( $.event.fixHooks ) { + for ( var i = toFix.length; i; ) { + $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks; + } + } + + $.event.special.mousewheel = { + setup: function() { + if ( this.addEventListener ) { + for ( var i = toBind.length; i; ) { + this.addEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = handler; + } + }, + + teardown: function() { + if ( this.removeEventListener ) { + for ( var i = toBind.length; i; ) { + this.removeEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = null; + } + } + }; + + $.fn.extend({ + mousewheel: function(fn) { + return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); + }, + + unmousewheel: function(fn) { + return this.unbind("mousewheel", fn); + } + }); + + + function handler(event) { + var orgEvent = event || window.event, + args = [].slice.call(arguments, 1), + delta = 0, + deltaX = 0, + deltaY = 0, + absDelta = 0, + absDeltaXY = 0, + fn; + event = $.event.fix(orgEvent); + event.type = "mousewheel"; + + // Old school scrollwheel delta + if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; } + if ( orgEvent.detail ) { delta = orgEvent.detail * -1; } + + // New school wheel delta (wheel event) + if ( orgEvent.deltaY ) { + deltaY = orgEvent.deltaY * -1; + delta = deltaY; + } + if ( orgEvent.deltaX ) { + deltaX = orgEvent.deltaX; + delta = deltaX * -1; + } + + // Webkit + if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; } + if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; } + + // Look for lowest delta to normalize the delta values + absDelta = Math.abs(delta); + if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; } + absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX)); + if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; } + + // Get a whole value for the deltas + fn = delta > 0 ? 'floor' : 'ceil'; + delta = Math[fn](delta / lowestDelta); + deltaX = Math[fn](deltaX / lowestDeltaXY); + deltaY = Math[fn](deltaY / lowestDeltaXY); + + // Add event and delta to the front of the arguments + args.unshift(event, delta, deltaX, deltaY); + + return ($.event.dispatch || $.event.handle).apply(this, args); + } + +})); diff --git a/templates/base-site.html b/templates/base-site.html index eadbafb..f7ef329 100644 --- a/templates/base-site.html +++ b/templates/base-site.html @@ -41,14 +41,24 @@ ? - motionEye Username - - ? + Administrator Username + + ? - motionEye Password - - ? + Administrator Password + + ? + + + Surveillance Username + + ? + + + Surveillance Password + + ?
diff --git a/templates/base.html b/templates/base.html index 38c5fa4..81a1e90 100644 --- a/templates/base.html +++ b/templates/base.html @@ -15,6 +15,7 @@ +