From 7bba9adcd9792d30aba48cf9cebe072536a97100 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Fri, 3 Aug 2018 09:40:57 +0000
Subject: [PATCH] f18.js: patches from blecher-at, modified (Forum #82351)

git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@17084 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 www/pgm2/f18.js       | 29 ++++++++++++++----
 www/pgm2/f18style.css | 70 ++++++++++++++++++++++++++++++++++---------
 2 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/www/pgm2/f18.js b/www/pgm2/f18.js
index 985f0305c..e22248161 100644
--- a/www/pgm2/f18.js
+++ b/www/pgm2/f18.js
@@ -64,6 +64,9 @@ $(document).ready(function(){
   if(typeof svgCallback != "undefined")
     svgCallback.f18 = f18_svgSetCols;
   $("[data-name]").each(function(){ f18_setPos(this) });
+  
+  f18_setWrapColumns();
+  f18_setFixedInput();
 });
 
 function
@@ -216,7 +219,7 @@ f18_special()
     $("tr#f18rs").append("<table id='f18ts' class='block wide'></table>");
     appendTo = "table#f18ts";
 
-    addHider("rightMenu", false, "MenuBtn right<br>on SmallScreen", f18_resize);
+    addHider("rightMenu", false, "MenuBtn right<br>on small screen",f18_resize);
     addHider("savePinChanges", false, "Save pin changes");
     addHider("showDragger", false, "Dragging active", function(c){
       if(c) {
@@ -351,13 +354,16 @@ f18_special()
     addHider("hidePin", true, "Hide pin", function(c){
       $("div.pinHeader div.pin").css("display", c ? "none":"block");
     });
-    addHider("fixedInput", true, "Fixed input", f18_setFixedInput);
+    addHider("fixedInput", true, "Fixed input and menu", f18_setFixedInput);
+    addHider("wrapcolumns",false,"Wrap columns<br>on small screen",
+                        f18_setWrapColumns);
 
     $("div.f18colors").css("margin-top", "20px");
     $("tr.f18 div.fileList").each(function(e){ f18_addPinToStyleDiv(this) });
     if(f18_getAttr("showDragger"))
       $("div.fileList").each(function(){ f18_addDragger(this) });
     $("[data-name]").each(function(){ f18_setPos(this) });
+    f18_setWrapColumns();
   };
   loadScript("pgm2/fhemweb_colorpicker.js", f18_drawSpecial);
 }
@@ -371,6 +377,19 @@ f18_setFixedInput()
       { position:"absolute", overflow:"visible" });
 }
 
+function
+f18_setFixedInput()
+{
+  $("body").toggleClass("fixedInput", f18_getAttr("fixedInput"));
+  f18_resize();
+}
+
+function
+f18_setWrapColumns()
+{
+  $("table.block").toggleClass("wrapcolumns", f18_getAttr("wrapcolumns"));
+}
+
 function
 f18_addPinToStyleDiv(el)
 {
@@ -397,13 +416,13 @@ f18_resize()
   left += hl ? 0 : 40;
   left += pm ? 0 : 44;
   var lleft = (pm ? 10 : 52);
-  $("input.maininput").css({ width:(w-left-(FW_isiOS ? 30 : 20))+'px', 
+  $("input.maininput").css({ width:(w-left-(FW_isiOS ? 26 : 24))+'px', 
+                             "margin-left":(rm ? "0px" : "10px"),
                              display: hi ? "none":"block"});
   $("#menu,#content").css("top", (hi && pm && hl) ? "10px" : "50px");
   $("#hdr").css({ left:(rm ? 10 : left)+'px' });
   $("#menuBtn").css({ left:(rm ? "auto":"10px"), right:(rm ? "10px":"auto") });
-  $("#logo")   .css({ left:(rm ? "auto":lleft ), right:(rm ? "52px":"auto") });
-  f18_setFixedInput(); // Wonder, why its needed
+  $("#logo")   .css({ left:(rm ? "auto":lleft ), right:(rm ? "48px":"auto") });
 }
 
 function
diff --git a/www/pgm2/f18style.css b/www/pgm2/f18style.css
index 087e966d9..ef86ee491 100644
--- a/www/pgm2/f18style.css
+++ b/www/pgm2/f18style.css
@@ -1,23 +1,28 @@
 @import url("dashboard_style.css");
 
 body,input,select,textarea { font-family:Arial, sans-serif; font-size:16px;}
+td {padding: 0;}
 textarea, .ui-dialog.ui-widget textarea { font-family:Courier; }
 input,textarea { border-style:ridge; }
-
+input.maininput { margin-left:10px; }
 #logo {
-  position:absolute; top:10px; left:52px; width:32px; height:32px; z-index:10;
+  position:absolute; top:6.5px; left:50px; width:32px; height:32px; z-index:10;
   background-image:url(../images/default/fhemicon.png);
   background-size: contain; background-repeat: no-repeat;
 }
-#menuBtn { top:10px; left:10px; width:32px; height:32px; }
-#hdr     { position:absolute; top:10px; left:48px; }
-#content { position:absolute; top:50px; left:10px; bottom:10px; right:10px; }
-body.small #content { left:10px; }
+#menuBtn { position: absolute; top:6.5px; left:10px; width:32px; height:32px; }
+#hdr     { position: absolute; top:10px; left:48px; }
+#content { 
+  position: absolute; top:50px; left:10px; bottom:0; right: 0; 
+  padding-right: 10px; 
+  padding-bottom: 10px;
+}
 #menu {
   top:50px; bottom:10px; left:-120%;
   z-index:20;
   display:inline-block;
   padding:0 0.5em 0.5em 0;
+  position: absolute;
 }
 #menu.visible  { left:10px!important; }
 #console { width:100%; top:2em; bottom:0px; position:absolute; overflow-y:auto;}
@@ -26,14 +31,15 @@ body.small #content { left:10px; }
 
 .devType { padding-top:20px; }
 a        { color:#278727; }
-img      { border-style:none; }
+img      { border-style:none; vertical-align: top;}
 .wide    { width:100%; }
 table.readings td:nth-child(2) { word-break: break-all; }
 
 table.block { border:1px solid gray; }
-table { border-radius:8px; }
+table { border-collapse: collapse; }
 table.room { border:1px solid gray; width: 100%;  }
-tr.column > td { padding:0; vertical-align:top;}
+tr.column > td { vertical-align:top;}
+
 .changed a, .changed { color:red; }
 .fhemlog { color:#278727; }
 .col2 { text-align:center; }
@@ -174,7 +180,7 @@ table.room,table.block.wide,table.fileList {
   border-top:1px solid gray;
   border-bottom:1px solid gray;
 }
-table.block.wide td > div { padding:0 4px; }
+table.block.wide td > div, #menu td td { padding:2px 4px; }
 
 #menuScrollArea { display:none; } /* commandref */
 body[fw_id] #menuScrollArea { display:block; } /* not commandref */
@@ -202,10 +208,46 @@ body.touch a { font-size: 20px; }
 body.touch #menu { font-size: 20px; } /* for the menuTree icon */
 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%; table-layout: fixed; }
-  .SVGplot { width: 100%; overflow-x: scroll }
+
+
+body.fixedInput #menu,
+body.fixedInput #menuBtn,
+body.fixedInput #content,
+body.fixedInput #hdr {
+	position: fixed;
+	overflow: auto;
+}
+
+@media screen and (max-width: 480px) and (orientation: portrait) {
+  #content > table { width: 100%; table-layout: fixed; }
+  #content > table, table.block.wide { width: 100%; }
+  table.block tr td:nth-child(2) { width: 0; }
+  table.block tr td:nth-child(n+3) { width: 0px; display: none; }
+ 
+  .SVGplot { width: 100%; overflow-x: auto;} 
+  
+  /* flex-collapsing table */
+  .wrapcolumns, 
+  .wrapcolumns thead, 
+  .wrapcolumns tbody, 
+  .wrapcolumns th, 
+  .wrapcolumns td {
+    display: block;
+  }
+
+  .wrapcolumns tr { 
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .wrapcolumns td { 
+    word-wrap: break-word; 
+    align-self: center;
+    max-width: 100%;
+  }
+
+  .wrapcolumns tr td:nth-child(1) { flex-grow: 1; }
+  .wrapcolumns tr td:nth-child(2) { width: auto!important; }
 }
 
 body.pinnedMenu #menuBtn { display:none; }