From b6cb512ee0fda84db1cf68de691c1985c1d2c49f Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Sun, 3 May 2020 12:18:00 +0000
Subject: [PATCH] f18.js: add widePortrait=>show all columns in portrait mode
 (Forum #82351)

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

diff --git a/fhem/www/pgm2/f18.js b/fhem/www/pgm2/f18.js
index 4851cd4d7..c9ef3d277 100644
--- a/fhem/www/pgm2/f18.js
+++ b/fhem/www/pgm2/f18.js
@@ -72,6 +72,7 @@ $(document).ready(function(){
   
   f18_setWrapColumns();
   f18_setFixedInput();
+  f18_setWidePortrait();
 });
 
 function
@@ -372,6 +373,8 @@ f18_special()
     addHider("fixedInput", false, "Fixed input and menu", f18_setFixedInput);
     addHider("wrapcolumns",false,"Wrap columns<br>on small screen",
                         f18_setWrapColumns);
+    addHider("widePortrait",true,"Show all columns<br>in portrait mode",
+                        f18_setWidePortrait);
 
     $("div.f18colors").css("margin-top", "20px");
     $("tr.f18 div.fileList").each(function(e){ f18_addPinToStyleDiv(this) });
@@ -397,6 +400,12 @@ f18_setWrapColumns()
   $("table.block").toggleClass("wrapcolumns", f18_getAttr("wrapcolumns"));
 }
 
+function
+f18_setWidePortrait()
+{
+  $("#content").toggleClass("slim", !f18_getAttr("widePortrait"));
+}
+
 function
 f18_addPinToStyleDiv(el)
 {
diff --git a/fhem/www/pgm2/f18style.css b/fhem/www/pgm2/f18style.css
index b046da40e..4f205f20d 100644
--- a/fhem/www/pgm2/f18style.css
+++ b/fhem/www/pgm2/f18style.css
@@ -233,8 +233,8 @@ body.fixedInput #hdr {
 @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; }
+  #content.slim table.block tr td:nth-child(2) { width: 0; }
+  #content.slim table.block tr td:nth-child(n+3) { width: 0px; display: none; }
  
   .SVGplot { overflow-x: auto;}