FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-04-28 17:12:32 +00:00
Code Issues Releases Wiki Activity

f18.js: fix menu button on small screen (Forum #82351)

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@15902 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2018-01-15 22:30:38 +00:00
parent 7cc32f81dd
commit a7eff34218
2 changed files with 32 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
fhem/www/pgm2/f18.js
View File

@ -1,7 +1,7 @@
"use strict"; "use strict";
FW_version["f18.js"] = "$Id$"; FW_version["f18.js"] = "$Id$";
// TODO: rewrite menu, dashboard, floorplan, fix longpollSVG // TODO: rewrite menu, dashboard, floorplan
var f18_attr, f18_aCol, f18_sd, f18_isMobile, f18_icon={}, f18_move=false; var f18_attr, f18_aCol, f18_sd, f18_isMobile, f18_icon={}, f18_move=false;
var f18_small = (screen.width < 480 || screen.height < 480); var f18_small = (screen.width < 480 || screen.height < 480);
@ -41,7 +41,8 @@ $(document).ready(function(){
$("body").addClass('small'); $("body").addClass('small');
f18_attr["Pinned.menu"] = false; f18_attr["Pinned.menu"] = false;
} }
if(f18_attr.rightMenu)
$("body").addClass("rightMenu");
f18_aCol = getComputedStyle($("a").get(0),null).getPropertyValue('color'); f18_aCol = getComputedStyle($("a").get(0),null).getPropertyValue('color');
for(var i in f18_icon) for(var i in f18_icon)
@ -49,10 +50,6 @@ $(document).ready(function(){
f18_icon.pinOut = f18_icon.pinIn f18_icon.pinOut = f18_icon.pinIn
.replace('/>',' transform="rotate(90,896,896)"/>'); .replace('/>',' transform="rotate(90,896,896)"/>');
if(f18_attr.hideLogo) {
$("div#menuScrollArea div#logo").css("display", "none");
$("#hdr").css("left", f18_small ? "10px":"54px");
}
f18_menu(); f18_menu();
f18_tables(); f18_tables();
f18_svgSetCols(); f18_svgSetCols();
@ -63,29 +60,29 @@ $(document).ready(function(){
function function
f18_menu() f18_menu()
{ {
if($("#menuScrollArea #menuBtn").length)
return fixMenu();
$("<div id='menuBtn'></div>").prependTo("div#menuScrollArea") $("<div id='menuBtn'></div>").prependTo("div#menuScrollArea")
.css( {"background-image":"url('"+f18_icon.bars+"')", "cursor":"pointer" }) .css( {"background-image":"url('"+f18_icon.bars+"')", "cursor":"pointer" })
.click(function(){ $("div#menu").toggleClass("visible") }); .click(function(){ $("#menu").toggleClass("visible") });
$("div#menu").prepend("<div></div>"); $("div#menu").prepend("<div></div>");
f18_addPin("div#menu > div:first", "menu", true, fixMenu, f18_small); f18_addPin("div#menu > div:first", "menu", true, fixMenu, f18_small);
setTimeout(function(){ $("div#menu,div#content").addClass("animated"); }, 10); setTimeout(function(){ $("#menu,#content,#logo,#hdr").addClass("animated"); },
10);
function function
fixMenu(isFixed) { fixMenu()
if(isFixed) { {
$("div#content").css("left", (parseInt($("div#menu").width())+20)+"px"); $("#menuScrollArea #logo").css("display", f18_attr.hideLogo?"none":"block");
$("div#menu").addClass("visible"); if(f18_attr["Pinned.menu"]) {
$("div#hdr").css("left", "10px"); $("body").addClass("pinnedMenu");
$("div#menuBtn").hide(); $("#menu").removeClass("visible");
if(!f18_small) $("#content").css("left", (parseInt($("div#menu").width())+20)+"px");
$("div#logo").css("left", "10px");
} else { } else {
$("div#content").css("left", "10px"); $("body").removeClass("pinnedMenu");
$("div#menu").removeClass("visible"); $("#content").css("left", "");
if(!f18_small)
$("div#logo").css("left", "52px");
$("div#menuBtn").show();
} }
f18_resize(); f18_resize();
} }
@ -234,9 +231,9 @@ f18_tables()
addHider("hidePin", "Hide pin", function(c){ addHider("hidePin", "Hide pin", function(c){
$("div.pinHeader div.pin").css("display", c ? "none":"block"); $("div.pinHeader div.pin").css("display", c ? "none":"block");
}); });
addHider("hideLogo", "Hide logo", function(c){ addHider("hideLogo", "Hide logo", f18_menu);
$("div#menuScrollArea div#logo").css("display", c ? "none":"block"); addHider("rightMenu", "MenuBtn right on SmallScreen", function(c){
f18_resize(); $("body").toggleClass("rightMenu");
}); });
addHider("savePinChanges", "Save pin changes", function(){}); addHider("savePinChanges", "Save pin changes", function(){});
@ -270,14 +267,10 @@ f18_resize()
var w=$(window).width(); var w=$(window).width();
log("f18.js W:"+w+" S:"+screen.width); log("f18.js W:"+w+" S:"+screen.width);
var diff = 0 var diff = 0;
diff += f18_attr.hideLogo ? 0 : 40; diff += f18_attr.hideLogo ? 0 : 40;
diff += f18_attr["Pinned.menu"] ? 0 : 44; diff += f18_attr["Pinned.menu"] ? 0 : 44;
$("input.maininput").css("width", (w-(FW_isiOS ? 40 : 30)-diff)+'px'); $("input.maininput").css("width", (w-(FW_isiOS ? 40 : 30)-diff)+'px');
if(f18_small)
diff -= 44
$("#hdr").css("left",(10+diff)+"px");
} }
function function

14
fhem/www/pgm2/f18style.css
View File

@ -1,12 +1,12 @@
@import url("defaultCommon.css"); @import url("defaultCommon.css");
#logo { #logo {
position:absolute; top:10px; width:32px; height:32px; z-index:10; position:absolute; top:10px; left:52px; width:32px; height:32px; z-index:10;
background-image:url(../images/default/fhemicon.png); background-image:url(../images/default/fhemicon.png);
background-size: contain; background-repeat: no-repeat; background-size: contain; background-repeat: no-repeat;
} }
#menuBtn { position:absolute; top:10px; left:10px; width:32px; height:32px; } #menuBtn { position:absolute; top:10px; left:10px; width:32px; height:32px; }
#hdr { position:absolute; top:10px; left:94px; } #hdr { position:absolute; top:10px; right:10px; }
#content { position:absolute; top:50px; left:10px; bottom:10px; right:10px; } #content { position:absolute; top:50px; left:10px; bottom:10px; right:10px; }
#menu { #menu {
position: absolute; position: absolute;
@ -54,7 +54,11 @@ body.touch div.col1, body.touch #menu table.room div { padding:0.25em 0; }
@media screen and (orientation: portrait) { @media screen and (orientation: portrait) {
body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; } body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
body.small #content > table { width: 100%; } body.small #content > table { width: 100%; }
body.small #menuBtn { right:10px; left:auto; }
body.small #logo { left:10px; }
body.small #hdr { left:52px; }
} }
body.pinnedMenu #menuBtn { display:none; }
body.pinnedMenu #menu { left:10px; }
body.pinnedMenu #logo { left:10px; }
body.small.rightMenu #menuBtn { right:10px; left:auto; }
body.small.rightMenu #logo { right:52px; left:auto; }
body.small.rightMenu #hdr { left:10px; right:auto; }