From a7eff3421850efe499321d20001c20b8aac7d443 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Mon, 15 Jan 2018 22:30:38 +0000
Subject: [PATCH] f18.js: fix menu button on small screen (Forum #82351)

git-svn-id: https://svn.fhem.de/fhem/trunk@15902 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/www/pgm2/f18.js       | 53 +++++++++++++++++---------------------
 fhem/www/pgm2/f18style.css | 14 ++++++----
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/fhem/www/pgm2/f18.js b/fhem/www/pgm2/f18.js
index 1e63fbee1..67feda93e 100644
--- a/fhem/www/pgm2/f18.js
+++ b/fhem/www/pgm2/f18.js
@@ -1,7 +1,7 @@
 "use strict";
 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_small = (screen.width < 480 || screen.height < 480);
 
@@ -41,7 +41,8 @@ $(document).ready(function(){
     $("body").addClass('small');
     f18_attr["Pinned.menu"] = false;
   }
-
+  if(f18_attr.rightMenu)
+    $("body").addClass("rightMenu");
 
   f18_aCol = getComputedStyle($("a").get(0),null).getPropertyValue('color'); 
   for(var i in f18_icon)
@@ -49,10 +50,6 @@ $(document).ready(function(){
   f18_icon.pinOut = f18_icon.pinIn
                         .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_tables();
   f18_svgSetCols();
@@ -63,29 +60,29 @@ $(document).ready(function(){
 function
 f18_menu()
 {
+  if($("#menuScrollArea #menuBtn").length)
+    return fixMenu();
+
   $("<div id='menuBtn'></div>").prependTo("div#menuScrollArea")
     .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>");
   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
-  fixMenu(isFixed) {
-    if(isFixed) {
-      $("div#content").css("left", (parseInt($("div#menu").width())+20)+"px");
-      $("div#menu").addClass("visible");
-      $("div#hdr").css("left", "10px");
-      $("div#menuBtn").hide();
-      if(!f18_small)
-        $("div#logo").css("left", "10px");
+  fixMenu()
+  {
+    $("#menuScrollArea #logo").css("display", f18_attr.hideLogo?"none":"block");
+    if(f18_attr["Pinned.menu"]) {
+      $("body").addClass("pinnedMenu");
+      $("#menu").removeClass("visible");
+      $("#content").css("left", (parseInt($("div#menu").width())+20)+"px");
+
     } else {
-      $("div#content").css("left", "10px"); 
-      $("div#menu").removeClass("visible");
-      if(!f18_small)
-        $("div#logo").css("left", "52px");
-      $("div#menuBtn").show();
+      $("body").removeClass("pinnedMenu");
+      $("#content").css("left", "");
     }
     f18_resize();
   }
@@ -234,9 +231,9 @@ f18_tables()
       addHider("hidePin", "Hide pin", function(c){
         $("div.pinHeader div.pin").css("display", c ? "none":"block");
       });
-      addHider("hideLogo", "Hide logo", function(c){
-        $("div#menuScrollArea div#logo").css("display", c ? "none":"block");
-        f18_resize();
+      addHider("hideLogo", "Hide logo", f18_menu);
+      addHider("rightMenu", "MenuBtn right on SmallScreen", function(c){
+        $("body").toggleClass("rightMenu");
       });
       addHider("savePinChanges", "Save pin changes", function(){});
 
@@ -270,14 +267,10 @@ f18_resize()
   var w=$(window).width();
   log("f18.js W:"+w+" S:"+screen.width);
 
-  var diff = 0
+  var diff = 0;
   diff += f18_attr.hideLogo ? 0 : 40;
   diff += f18_attr["Pinned.menu"] ? 0 : 44;
   $("input.maininput").css("width", (w-(FW_isiOS ? 40 : 30)-diff)+'px');
-  if(f18_small)
-    diff -= 44
-  $("#hdr").css("left",(10+diff)+"px");
-
 }
 
 function
diff --git a/fhem/www/pgm2/f18style.css b/fhem/www/pgm2/f18style.css
index ac2bd212a..efbe29a95 100644
--- a/fhem/www/pgm2/f18style.css
+++ b/fhem/www/pgm2/f18style.css
@@ -1,12 +1,12 @@
 @import url("defaultCommon.css");
 
 #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-size: contain; background-repeat: no-repeat;
 }
 #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; }
 #menu {
   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) {
   body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
   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; }