2
0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-04-21 07:56:03 +00:00

Responsive iOS 6 Theme - ios6.js needs to be added in the config.

Supports Desktop, iPad, iPhone - added smaller padding on mobile view
http://forum.fhem.de/index.php/topic,23406.msg166953.html#msg166953

git-svn-id: https://svn.fhem.de/fhem/trunk@7670 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
blackcatsandy 2015-01-23 12:31:11 +00:00
parent 08a6c8072a
commit 3f56d6c0f4
2 changed files with 15 additions and 5 deletions

View File

@ -9,6 +9,7 @@ $( document ).ready(function() {
*/ */
var menuwidth = 200; var menuwidth = 200;
var paddingwidth = 60; var paddingwidth = 60;
var mobilepaddingwidth = 20;
var logowidth = 28; var logowidth = 28;
var switchtomobilemode = 376; var switchtomobilemode = 376;
var hdrheight = 44; var hdrheight = 44;
@ -52,13 +53,16 @@ $( document ).ready(function() {
if (switchtomobilemode > width) { if (switchtomobilemode > width) {
$("#hdr input").width(width-inputpadding+menuwidth-logowidth); $("#hdr input").width(width-inputpadding+menuwidth-logowidth);
$("#content").width(width-mobilepaddingwidth);
$("#right").width(width-mobilepaddingwidth);
} else { } else {
$("#hdr input").width(width-inputpadding); $("#hdr input").width(width-inputpadding);
$("#content").width(width-paddingwidth);
$("#right").width(width-paddingwidth);
} }
$("#menu").width(0); $("#menu").width(0);
$("#content").width(width-paddingwidth);
$("#right").width(width-paddingwidth);
$("#content").show() $("#content").show()
$("#right").show(); $("#right").show();
}; };

View File

@ -49,8 +49,6 @@ width: -webkit-calc(100% - 60px);
width: -o-calc(100% - 60px); width: -o-calc(100% - 60px);
/* Standard */ /* Standard */
width: calc(100% - 60px); width: calc(100% - 60px);
padding-left:30px;
} }
@ -66,7 +64,6 @@ padding-left:30px;
} }
/*iPhone Skalierung*/ /*iPhone Skalierung*/
/* iPhone < 5(portrait) ----------- */ /* iPhone < 5(portrait) ----------- */
@media only screen @media only screen
and (min-device-width : 320px) and (min-device-width : 320px)
@ -75,6 +72,9 @@ and (orientation : portrait) {
body { body {
width:320px; width:320px;
} }
#content, #right {
padding: 0px 10px 0px 10px !important;
}
} }
/* iPhone < 5(landscape) ----------- */ /* iPhone < 5(landscape) ----------- */
@media only screen @media only screen
@ -94,6 +94,9 @@ and (orientation : portrait) {
body { body {
width:320px; width:320px;
} }
#content, #right {
padding: 0px 10px 0px 10px !important;
}
} }
/* iPhone 5(landscape) ----------- */ /* iPhone 5(landscape) ----------- */
@media only screen @media only screen
@ -113,6 +116,9 @@ and (orientation : portrait) {
body { body {
width:375px; width:375px;
} }
#content, #right {
padding: 0px 10px 0px 10px !important;
}
} }
/* iPhone 6(landscape) ----------- */ /* iPhone 6(landscape) ----------- */
@media only screen @media only screen