From cc087da862a35baae27b42118db11fe58e082b5e Mon Sep 17 00:00:00 2001 From: blackcatsandy <> Date: Fri, 23 Jan 2015 11:51:17 +0000 Subject: [PATCH] Responsive iOS 6 Theme - ios6.js needs to be added in the config. Supports Desktop, iPad, iPhone http://forum.fhem.de/index.php/topic,23406.msg166953.html#msg166953 git-svn-id: https://svn.fhem.de/fhem/trunk@7668 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/pgm2/ios6.js | 138 +++++++++++++++++++++++ fhem/www/pgm2/ios6dashboard.css | 11 +- fhem/www/pgm2/ios6floorplanstyle.css | 5 + fhem/www/pgm2/ios6touchpadstyle.css | 159 +++++++++++++++++++++++---- 4 files changed, 291 insertions(+), 22 deletions(-) create mode 100644 fhem/www/pgm2/ios6.js create mode 100644 fhem/www/pgm2/ios6floorplanstyle.css diff --git a/fhem/www/pgm2/ios6.js b/fhem/www/pgm2/ios6.js new file mode 100644 index 000000000..64960eb30 --- /dev/null +++ b/fhem/www/pgm2/ios6.js @@ -0,0 +1,138 @@ +/* iOS 6 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.animeschatten.net */ +/* jQuery is required*/ + +$( document ).ready(function() { + /* + /* Style Config + */ + var menuwidth = 200; + var paddingwidth = 60; + var logowidth = 28; + var switchtomobilemode = 376; + var hdrheight = 44; + var inputpadding = 251; + + /* + /* Functions + */ + + // Set style height and width + var recalculateStyleHeight = function() { + var height = window.innerHeight; + $("#menu").height(height-hdrheight); + $("#content").height(height-hdrheight); + $("#right").height(height-hdrheight); + }; + + var recalculateStyleWithMenu = function() { + var width = $("body").width(); + $("body").removeClass("hideMenu"); + + if (switchtomobilemode > width) { + $("#menu").width(width); + $("#content").width(0); + $("#right").width(0); + $("#content").hide() + $("#right").hide(); + $("#hdr input").width(width-inputpadding+menuwidth-logowidth); + } else { + $("#menu").width(menuwidth); + $("#content").width(width-menuwidth-paddingwidth-1); + $("#right").width(width-menuwidth-paddingwidth-1); + $("#hdr input").width(width-inputpadding); + $("#content").show() + $("#right").show(); + } + }; + var recalculateStyleWithoutMenu = function() { + var width = $("body").width(); + $("body").addClass("hideMenu"); + + if (switchtomobilemode > width) { + $("#hdr input").width(width-inputpadding+menuwidth-logowidth); + } else { + $("#hdr input").width(width-inputpadding); + } + + $("#menu").width(0); + $("#content").width(width-paddingwidth); + $("#right").width(width-paddingwidth); + $("#content").show() + $("#right").show(); + }; + + // Show / Hide menu + var toggleMenuOnFHEMIcon = function() { + if ($("body").hasClass("hideMenu")) { + recalculateStyleWithMenu(); + } else { + recalculateStyleWithoutMenu(); + } + }; + + + + /* + /* DOM manipulation + */ + + // init viewport + $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=0, initial-scale=1.0'); + + // init height and width + recalculateStyleHeight(); + + + // hide menu + if($("body").width() < window.innerHeight) { + recalculateStyleWithoutMenu(); + } else { + recalculateStyleWithMenu(); + } + + // Logo - add toggle link + var parentLink = $("#logo").parent("a"); + if (typeof(parentLink.attr("href")) == "undefined") { + parentLink.attr("onclick", "#"); + } else { + parentLink.attr("href", "#"); + } + $("#logo").click(toggleMenuOnFHEMIcon); + + /* + /* Event Handlers + */ + + // Resize + $(window).resize(function() { + recalculateStyleHeight(); + if($("body").width() < window.innerHeight) { + recalculateStyleWithoutMenu(); + } else { + recalculateStyleWithMenu(); + } + }); + $(window).bind('orientationchange', function(event) { + //alert("orientationchange width: "+window.innerWidth+" height: "+window.innerHeight); + recalculateStyleHeight(); + if($("body").width() < window.innerHeight) { + recalculateStyleWithoutMenu(); + } else { + recalculateStyleWithMenu(); + } + }); + // Touch - Color picker + $(document).on('touchstart', function (e) { + var container = $("#colorpicker"); + + if (!container.is(e.target) // if the target of the click isn't the container... + && container.has(e.target).length === 0 // ... nor a descendant of the container + && !$("input").is(e.target) && container.length > 0) // ... is not an input + { + container.remove(); + } + }); + +}); diff --git a/fhem/www/pgm2/ios6dashboard.css b/fhem/www/pgm2/ios6dashboard.css index ae1d29b3a..aa5be8317 100644 --- a/fhem/www/pgm2/ios6dashboard.css +++ b/fhem/www/pgm2/ios6dashboard.css @@ -34,6 +34,10 @@ #dashboard .ui-widget-content { border: none; } +#dashboard .dashboard_widgetheader { +background: none; +border: none; +} #dashboard .ui-widget-content a { /*color: #eeeeee;*/ } @@ -87,7 +91,7 @@ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAY #dashboard .block.wide {border-radius: 5px;} #dashboard .dashboard_tabcontent {width: 100%; padding: 0; margin: 0; } #dashboard .dashboard_widget {border-radius: 8px; float: left;} -#dashboard .dashboard_widgethelper {background-color: #111111; } +#dashboard .dashboard_widgethelper {background-color: none; } #dashboard .ui-widget .ui-widget {font-size: 1em; font-family: Arial,Helvetica,sans-serif;} #dashboard .ui-widget-header { font-weight:bold; @@ -100,7 +104,7 @@ padding:10px 0px 0px 3px; #dashboard .ui-helper-clearfix:after {content: "";display: table;border-collapse: collapse;} #dashboard .ui-helper-clearfix:after {clear: both;} #dashboard .ui-helper-clearfix {min-height: 0;} -#dashboard .ui-helper-reset {margin: 0;padding: 0;border: 0;outline: 0;line-height: 1.3;text-decoration: none;font-size: 100%;list-style: none;} +#dashboard .ui-helper-reset {margin: 0;padding: 0;border: 0;outline: 0;line-height: 1.3;text-decoration: none;font-size: 100%;list-style: none; background: none;} #dashboard .ui-tabs { position: relative; @@ -152,7 +156,8 @@ background-color:#777777; } #dashboard .dashboard_tabnav_hidden{} #dashboard .ui-widget-header .ui-state-default { - +border: none; +background: none; } #dashboard .ui-widget-header .ui-state-active{ color: #000000; diff --git a/fhem/www/pgm2/ios6floorplanstyle.css b/fhem/www/pgm2/ios6floorplanstyle.css new file mode 100644 index 000000000..354560cde --- /dev/null +++ b/fhem/www/pgm2/ios6floorplanstyle.css @@ -0,0 +1,5 @@ +/* iOS 6 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.animeschatten.net */ + +@import url("ios6touchpadfloorplanstyle.css"); \ No newline at end of file diff --git a/fhem/www/pgm2/ios6touchpadstyle.css b/fhem/www/pgm2/ios6touchpadstyle.css index 0fa635b55..56e3b1616 100644 --- a/fhem/www/pgm2/ios6touchpadstyle.css +++ b/fhem/www/pgm2/ios6touchpadstyle.css @@ -5,6 +5,11 @@ @import url("ios6Common.css"); @import url("ios6dashboard.css"); +body { + width:100%; +} + +/*set standard for view without js*/ #content, #right { width: 763px; /* Firefox */ @@ -16,6 +21,7 @@ width: -o-calc(100% - 261px); /* Standard */ width: calc(100% - 261px); } + #content, #menu, #right { /*old*/ height: 704px; @@ -31,6 +37,23 @@ height: calc(100vh - 44px); #hdr input { width: 80%; } + +/*hideMenu toggle*/ +.hideMenu #content, .hideMenu #right { +width: 964px; +/* Firefox */ +width: -moz-calc(100% - 60px); +/* WebKit */ +width: -webkit-calc(100% - 60px); +/* Opera */ +width: -o-calc(100% - 60px); +/* Standard */ +width: calc(100% - 60px); + +padding-left:30px; +} + + .SVGplot{ text-align:center; } @@ -50,15 +73,6 @@ and (orientation : landscape) { body { width:1024px; } -#content, #right { -width: 763px; -} -#content, #menu, #right { -height: 704px; -} -#hdr input { -width: 773px; -} } /* iPads (portrait) ----------- */ @@ -69,15 +83,88 @@ and (orientation : portrait) { body { width:768px; } -#content, #menu, #right { -height: 960px; } -#content, #right { -width: 507px; + +/*iPhone Skalierung*/ + +/* iPhone < 5(portrait) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 480px) +and (orientation : portrait) { +body { +width:320px; } -#hdr input { -width: 517px; } +/* iPhone < 5(landscape) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 480px) +and (orientation : landscape) { +body { +width:480px; +} +} + +/* iPhone 5(portrait) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 568px) +and (orientation : portrait) { +body { +width:320px; +} +} +/* iPhone 5(landscape) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 568px) +and (orientation : landscape) { +body { +width:568px; +} +} + +/* iPhone 6(portrait) ----------- */ +@media only screen +and (min-device-width : 375px) +and (max-device-width : 667px) +and (orientation : portrait) { +body { +width:375px; +} +} +/* iPhone 6(landscape) ----------- */ +@media only screen +and (min-device-width : 375px) +and (max-device-width : 667px) +and (orientation : landscape) { +body { +width:667px; +} +} + +/* iPhone 6+(portrait) ----------- */ +@media only screen +and (min-device-width : 540px) +and (max-device-width : 960px) +and (orientation : portrait) { +body { +width:540px; +} +} +/* iPhone 6+(landscape) ----------- */ +@media only screen +and (min-device-width : 540px) +and (max-device-width : 960px) +and (orientation : landscape) { +body { +width:960px; +} +} + +.hideMenu #menu { + display:none; } html, body { @@ -206,6 +293,30 @@ border-radius:5px; border: 1px solid #666666; background-color:#4b6dab; } + +.changed a, +.changed { color:#008700; } + +table.room .changed svg { + +background: #02a202; /* Old browsers */ +background: +-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%), +-webkit-repeating-linear-gradient(135deg, #02a202 0px,#00b900 2px, #02a202 3px); /* Chrome10+,Safari5.1+ */ + +background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%), -moz-repeating-linear-gradient(-45deg, rgba(2,162,2,1) 0px, rgba(0,185,0,1) 2px, rgba(2,162,2,1) 3px); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))), -webkit-gradient(linear, left top, right bottom, color-stop(0px,rgba(2,162,2,1)), color-stop(2px,rgba(0,185,0,1)), color-stop(3px,rgba(2,162,2,1))); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%), -webkit-repeating-linear-gradient(-45deg, rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%), -o-repeating-linear-gradient(-45deg, rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); /* Opera 11.10+ */ +background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%), -ms-linear-gradient(-45deg, rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); /* IE10+ */ +background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%), repeating-linear-gradient(135deg, rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); /* W3C */ + +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0 ); /* IE6-9 */ +background-size: 28px 12px, 28px 28px; +background-repeat: no-repeat, repeat; +fill: #F4F4F4; +} + table.room tr.sel a svg { border-color:#333333; background-color:#111111; @@ -264,7 +375,7 @@ padding: 5px; #menu { position: absolute; top:44px; -overflow: scroll; +overflow: auto; -webkit-overflow-scrolling: touch; float: left; width: 200px; @@ -280,7 +391,7 @@ padding:0px; #content, #right { background-color:#e0e3e8; background:#e0e3e8; -overflow: scroll; +overflow: auto; -webkit-overflow-scrolling: touch; border-left: 1px solid #000000; float: right; @@ -297,7 +408,11 @@ float: left; } #right { margin-top:44px; } -#console { width:100%; height:100%; position:absolute; overflow-y:auto;} + +#console { + font: 11px "Courier New",Courier,monospace; +} + #errmsg { padding:6px; width: 100%; @@ -469,7 +584,6 @@ table.room tr.sel a:hover svg { background-color:#333333; } -.changed a, .changed { color:red; } .dname { } @@ -488,6 +602,9 @@ display:block; float:left; clear:left; } +.textField_widget { +display: block !important; +} .makeSelect { margin-top:20px; width: 100%; @@ -613,3 +730,7 @@ background:#C8C8B0; font-size:6px;} .rc_button img { border-style:solid; border-width:1px; border-color:transparent; } .rc_button img:active { border-color: gray; } + +.colorpicker { + border-color: #4c566c; +} \ No newline at end of file