From 66c6177970b572c345935a152a364b2fd5c96171 Mon Sep 17 00:00:00 2001 From: Calin Crisan Date: Thu, 15 Aug 2013 22:10:10 +0300 Subject: [PATCH] changed the layout a bit --- static/css/base-site.css | 57 +++++----- static/css/ui.css | 7 +- static/js/base.js | 24 ++--- static/js/css-browser-selector.js | 14 +++ templates/base-site.html | 173 +++++++++++++++--------------- 5 files changed, 147 insertions(+), 128 deletions(-) create mode 100644 static/js/css-browser-selector.js diff --git a/static/css/base-site.css b/static/css/base-site.css index 4a34975..def0ce1 100644 --- a/static/css/base-site.css +++ b/static/css/base-site.css @@ -38,7 +38,6 @@ div.header-container { } div.page { - min-height: 2000px; padding-bottom: 20px; font-size: 1em; transition: all 0.5s; @@ -79,10 +78,10 @@ div.page-container.stretched { div.settings { background-color: #313131; position: absolute; - top: -50px; + top: 0px; left: 0px; - bottom: 0px; width: 0px; + min-height: 100%; transition: all 0.2s; overflow: hidden; } @@ -102,7 +101,12 @@ div.settings.open div.settings-container { } div.settings-top-bar { + display: inline-block; + width: 40%; height: 50px; +} + +div.settings-top-bar.open { background-color: #414141; } @@ -115,7 +119,7 @@ div.settings-section-title { table.settings { width: 100%; - padding: 0.5em 0.5em 2em 0.5em; + padding: 0.5em 0.5em 1em 0.5em; } td.settings-item-label { @@ -141,42 +145,34 @@ div.settings-item-separator { } select.video-device { + display: none; padding: 4px 1.5em 4px 4px; vertical-align: middle; font-size: 20px; width: auto; } +div.settings-top-bar.open select.video-device { + display: inline; +} + div.check-box.section { margin: 0px; float: left; } -div.check-box.top-bar { - margin: 10px; - float: right; - width: 90px; - height: 30px; -} - -div.check-box.top-bar div.check-box-button { - line-height: 30px; -} - -div.check-box.top-bar div.check-box-button span.check-box-text { - font-size: 20px; -} - -div.check-box.section div.check-box-button, -div.check-box.top-bar div.check-box-button { +div.check-box.section div.check-box-button { background-color: #515151; } -div.check-box.on.section div.check-box-button, -div.check-box.on.top-bar div.check-box-button { +div.check-box.on.section div.check-box-button { background-color: #3498db; } +tr.advanced-setting { + display: none; +} + /* media queries */ @@ -192,13 +188,13 @@ div.check-box.on.top-bar div.check-box-button { /* mobile devices */ body { - font-size: 25px; + font-size: 17px; } div.page, div.header-container { width: 100%; - min-width: 480px; + min-width: 320px; } div.header { @@ -209,10 +205,14 @@ div.check-box.on.top-bar div.check-box-button { margin-left: 0px; } + div.settings-top-bar, + div.settings-top-bar.open { + width: auto; + background-color: transparent; + } + div.settings.open { - width: 80%; - box-shadow: 0px 0px 30px rgba(0,0,0,0.8); - background-color: rgba(48, 48, 48, 0.9); + width: 100%; } } @@ -235,6 +235,7 @@ img.settings-button { div.logo { float: right; + display: inline-block; white-space: nowrap; opacity: 0.86; } diff --git a/static/css/ui.css b/static/css/ui.css index ebf0d48..628fa5d 100644 --- a/static/css/ui.css +++ b/static/css/ui.css @@ -105,7 +105,6 @@ input[type=text].number { select.styled { -webkit-appearance: none; - -moz-appearance: none; appearance: none; width: 90%; border: 1px solid #2A6C96; @@ -126,6 +125,7 @@ select.styled { select.styled:FOCUS { background-color: #414141; + appearance: auto; } select.styled:HOVER, @@ -134,6 +134,11 @@ select.styled:FOCUS { color: white; } +.ff select.styled { + background-image: none; + padding-right: 1px; +} + /* slider */ diff --git a/static/js/base.js b/static/js/base.js index 6795993..6c3f006 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -34,18 +34,18 @@ function initUI() { } function handleDocumentReady() { -// $('body').click(function () { -// if ($('div.settings').hasClass('open')) { -// $('div.settings').removeClass('open'); -// $('div.page-container').removeClass('stretched'); -// } -// else { -// } -// }); -// - $('div.settings').addClass('open'); - $('div.page-container').addClass('stretched'); - $('div.page').css('min-height', $('div.settings').height() + 100); + $('img.settings-button').click(function () { + if ($('div.settings').hasClass('open')) { + $('div.settings').removeClass('open'); + $('div.page-container').removeClass('stretched'); + $('div.settings-top-bar').removeClass('open'); + } + else { + $('div.settings').addClass('open'); + $('div.page-container').addClass('stretched'); + $('div.settings-top-bar').addClass('open'); + } + }); initUI(); } diff --git a/static/js/css-browser-selector.js b/static/js/css-browser-selector.js new file mode 100644 index 0000000..79759df --- /dev/null +++ b/static/js/css-browser-selector.js @@ -0,0 +1,14 @@ +/* +CSS Browser Selector js v0.5.3 (July 2, 2013) + +-- original -- +Rafael Lima (http://rafael.adm.br) +http://rafael.adm.br/css_browser_selector +License: http://creativecommons.org/licenses/by/2.5/ +Contributors: http://rafael.adm.br/css_browser_selector#contributors +-- /original -- + +Fork project: http://code.google.com/p/css-browser-selector/ +Song Hyo-Jin (shj at xenosi.de) +*/ +function css_browser_selector(n){var b=n.toLowerCase(),f=function(c){return b.indexOf(c)>-1},h="gecko",k="webkit",p="safari",j="chrome",d="opera",e="mobile",l=0,a=window.devicePixelRatio?(window.devicePixelRatio+"").replace(".","_"):"1";var i=[(!(/opera|webtv/.test(b))&&/msie\s(\d+)/.test(b)&&(l=RegExp.$1*1))?("ie ie"+l+((l==6||l==7)?" ie67 ie678 ie6789":(l==8)?" ie678 ie6789":(l==9)?" ie6789 ie9m":(l>9)?" ie9m":"")):(/firefox\/(\d+)\.(\d+)/.test(b)&&(re=RegExp))?h+" ff ff"+re.$1+" ff"+re.$1+"_"+re.$2:f("gecko/")?h:f(d)?d+(/version\/(\d+)/.test(b)?" "+d+RegExp.$1:(/opera(\s|\/)(\d+)/.test(b)?" "+d+RegExp.$2:"")):f("konqueror")?"konqueror":f("blackberry")?e+" blackberry":(f(j)||f("crios"))?k+" "+j:f("iron")?k+" iron":!f("cpu os")&&f("applewebkit/")?k+" "+p:f("mozilla/")?h:"",f("android")?e+" android":"",f("tablet")?"tablet":"",f("j2me")?e+" j2me":f("ipad; u; cpu os")?e+" chrome android tablet":f("ipad;u;cpu os")?e+" chromedef android tablet":f("iphone")?e+" ios iphone":f("ipod")?e+" ios ipod":f("ipad")?e+" ios ipad tablet":f("mac")?"mac":f("darwin")?"mac":f("webtv")?"webtv":f("win")?"win"+(f("windows nt 6.0")?" vista":""):f("freebsd")?"freebsd":(f("x11")||f("linux"))?"linux":"",(a!="1")?" retina ratio"+a:"","js portrait"].join(" ");if(window.jQuery&&!window.jQuery.browser){window.jQuery.browser=l?{msie:1,version:l}:{}}return i}(function(j,b){var c=css_browser_selector(navigator.userAgent);var g=j.documentElement;g.className+=" "+c;var a=c.replace(/^\s*|\s*$/g,"").split(/ +/);b.CSSBS=1;for(var f=0;fp){v.removeClass(h).addClass(k)}else{v.removeClass(k).addClass(h)}if(l==o){return}o=l;clearTimeout(s)}catch(m){}s=setTimeout(n,100)}function n(){try{v.removeClass(w);v.addClass((o<=360)?i:(o<=640)?u:(o<=768)?x:(o<=1024)?r:"pc")}catch(l){}}q(b).on("resize orientationchange",d).trigger("resize")})(b.jQuery)}})(document,window); diff --git a/templates/base-site.html b/templates/base-site.html index f90e452..46d1ae4 100644 --- a/templates/base-site.html +++ b/templates/base-site.html @@ -8,13 +8,20 @@ {% block script %} {{super()}} + {% endblock %} {% block body %}
- +
+ + +
-
- - - -
-
General Settings
+
General Settings
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
Show Advanced Settings ??
motionEye Username ??
motionEye Password ??
Storage Device ??
Network Server ??
Share Username ??
Share Password ??
Share Name ??
Root Directory ??
@@ -96,45 +95,45 @@ Camera Name - ? + ? - +
- + Light Switch Detection - ? + ? - + Automatic Brightness - ? + ? - + Brightness - ? + ? - + Contrast - ? + ? - + Saturation - ? + ? - + Hue - ? + ? - +
- + Video Resolution - ? + ? - + Video Rotation - ? + ? - + Frame Rate - ? + ? @@ -174,12 +173,12 @@ - ? + ? - ? + ? Right Text @@ -190,47 +189,47 @@ - ? + ? - ? + ?
Video Streaming
- + - + - + - + - + - +
Streaming Frame Rate ??
Streaming Quality ??
Motion Optimization ??
Still Images
- + - + - + - + - + - + - + - +
Image File Name ??
Image Quality ??
Capture Mode ??
Snapshot Interval ??
Motion Movies
- + - + - + - + @@ -271,49 +270,49 @@ - +
Movie File Name ??
Movie Quality ??
Preserve Movies ??
Motion Detection
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
Show Frame Changes ??
Frame Change Threshold ??
Automatic Noise Detection ??
Noise Level ??
Motion Gap ??
Frames Captured Before ??
Frames Captured After ??
@@ -322,12 +321,12 @@ Email Address - ? + ? Phone Number - ? + ?
-- 2.39.5