mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-05-04 20:17:45 +00:00
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
This commit is contained in:
blackcatsandy
parent
f130758a3a
commit
cc087da862
138
fhem/www/pgm2/ios6.js
Normal file
138
fhem/www/pgm2/ios6.js
Normal file
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@ -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;
|
||||
|
||||
5
fhem/www/pgm2/ios6floorplanstyle.css
Normal file
5
fhem/www/pgm2/ios6floorplanstyle.css
Normal file
@ -0,0 +1,5 @@
|
||||
/* iOS 6 Theme for FHEM */
|
||||
/* by Sandra Ohmayer */
|
||||
/* http://www.animeschatten.net */
|
||||
|
||||
@import url("ios6touchpadfloorplanstyle.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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user