From cb4fb306c256362e179364a260ffd48374ea26bc Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Sat, 13 Dec 2014 17:45:45 +0000
Subject: [PATCH] FHEMWEB: scmallscreenCommands from fhainz (Forum #30155)

git-svn-id: https://svn.fhem.de/fhem/trunk@7196 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/FHEM/01_FHEMWEB.pm                | 16 ++++++++++++++-
 fhem/www/pgm2/darksmallscreenstyle.css | 20 ++++++++++++++++++
 fhem/www/pgm2/ios7smallscreenstyle.css | 25 +++++++++++++++++++++++
 fhem/www/pgm2/smallscreenstyle.css     | 28 ++++++++++++++++++++++++--
 4 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/fhem/FHEM/01_FHEMWEB.pm b/fhem/FHEM/01_FHEMWEB.pm
index 7ee80c92c..3213cef3e 100755
--- a/fhem/FHEM/01_FHEMWEB.pm
+++ b/fhem/FHEM/01_FHEMWEB.pm
@@ -162,6 +162,7 @@ FHEMWEB_Initialize($)
     roomIcons
     sortRooms
     smallscreen:unused
+    smallscreenCommands:0,1
     stylesheetPrefix
     touchpad:unused
     webname
@@ -1336,7 +1337,8 @@ FW_showRoom()
 
         ######
         # Commands, slider, dropdown
-        if(!$FW_ss && $cmdlist) {
+        my $smallscreenCommands = AttrVal($FW_wname, "smallscreenCommands", "");
+        if((!$FW_ss || $smallscreenCommands) && $cmdlist) {
           foreach my $cmd (split(":", $cmdlist)) {
             my $htmlTxt;
             my @c = split(' ', $cmd);   # @c==0 if $cmd==" ";
@@ -3180,6 +3182,12 @@ FW_widgetOverride($$)
         Default is not active.
         </li><br>
 
+     <a name="smallscreenCommands"></a>
+     <li>smallscreenCommands<br>
+        If set to 1, commands, slider and dropdown menues will appear in
+        smallscreen landscape mode.
+        </li><br>
+
 
     </ul>
   </ul>
@@ -3758,6 +3766,12 @@ FW_widgetOverride($$)
         Default ist leer, also nicht aktiv.
         </li><br>
 
+     <a name="smallscreenCommands"></a>
+     <li>smallscreenCommands<br>
+        Falls auf 1 gesetzt werden Kommandos, Slider und Dropdown Men&uuml;s im
+        Smallscreen Landscape Modus angezeigt.
+        </li><br>
+
     </ul>
   </ul>
 
diff --git a/fhem/www/pgm2/darksmallscreenstyle.css b/fhem/www/pgm2/darksmallscreenstyle.css
index 102cf608f..f169610d3 100644
--- a/fhem/www/pgm2/darksmallscreenstyle.css
+++ b/fhem/www/pgm2/darksmallscreenstyle.css
@@ -97,3 +97,23 @@ div.dname, div.dval  {
   font-size:16px;
 }
 div.tiny { font-size:10px; }
+
+/* Portrait mode */
+@media all and (orientation:portrait) {
+	table.block tr td:nth-child(n+3) { width: 0px; display: none; }
+	
+	table.block select,
+	table.block input,
+	.handle { width: 0px; display: none; }
+}
+
+/* Landscape mode */
+@media all and (orientation:landscape) {
+  table.block{ width: 600px; }
+	table.block input { text-align: center; }
+	table.block tr td:nth-child(3) { text-align: center; }
+
+	table.block div.slider { width: 108px; text-align: center; }
+	table.block slider { float: none; }
+	table.block select { text-align: center; }
+}
diff --git a/fhem/www/pgm2/ios7smallscreenstyle.css b/fhem/www/pgm2/ios7smallscreenstyle.css
index 606696293..1f996285a 100644
--- a/fhem/www/pgm2/ios7smallscreenstyle.css
+++ b/fhem/www/pgm2/ios7smallscreenstyle.css
@@ -99,3 +99,28 @@ button.dist { margin:5px; background:transparent; border:0px; cursor:pointer; }
           border:3px solid; color:#278727; text-align:center; } 
 
 svg { height:32px; width:32px; fill:#1c7efb; vertical-align:middle; margin:2px 0; }
+
+/* Portrait mode */
+@media all and (orientation:portrait) {
+	table.block tr td:nth-child(n+3) { width: 0px; display: none; }
+	table.block tr td div.col1 { width: 270px; }
+	table.block svg.icon { margin-right: 5px; }
+	
+	table.block select,
+	table.block input,
+	.handle { width: 0px; display: none; }
+}
+
+/* Landscape mode */
+@media all and (orientation:landscape) {
+	table.block input { text-align: center; }
+	table.block tr td:first-child  { width: 60%; }
+  table.block tr td:nth-child(2) { width: 10%; }
+	table.block tr td:nth-child(3) { width: 25%; text-align: center; }
+  table.block tr td div.col1 { width: 270px; }
+  table.block svg.icon { margin-right: 5px; }
+	
+	table.block div.slider { width: 180px; text-align: center; }
+	table.block slider { float: none; }
+	table.block select { text-align: center; }
+}
diff --git a/fhem/www/pgm2/smallscreenstyle.css b/fhem/www/pgm2/smallscreenstyle.css
index 4a6f3bb2a..5949b7767 100644
--- a/fhem/www/pgm2/smallscreenstyle.css
+++ b/fhem/www/pgm2/smallscreenstyle.css
@@ -19,7 +19,8 @@ div.col2 { width: 108px; height: 30px;
   white-space: wrap;
   font-size:16px;
 }
-div.col1, div.col2 {
+
+div.col1, div.col2, div.col3 {
   overflow: hidden; text-overflow: ellipsis;
 
   padding-top: 10px; padding-bottom: 10px;
@@ -42,7 +43,7 @@ div.tiny { font-size:10px; }
 
 table.block { width: 320px; border-spacing:0px; border:0; } 
 table.block tr { border:1px solid gray; border-spacing:0px; }
-table.block td { width: 150px; };
+table.block td { width: 150px; }
 
 #menu #block { visibility: hidden; }
 button.dist { margin:5px; }
@@ -51,3 +52,26 @@ button.dist { margin:5px; }
 .set .slider,.get slider,.attr .slider { background:#F0F0D8; }
 
 #cloudfree { display:none; }
+
+/* Portrait mode */
+@media all and (orientation:portrait) {
+	table.block tr td:nth-child(n+3) { width: 0px; display: none; }
+	
+	table.block select,
+	table.block input,
+	.handle { width: 0px; display: none; }
+}
+
+/* Landscape mode */
+@media all and (orientation:landscape) {
+  div.col1 { width: 282px; }
+  div.col2 { width: 108px; }
+  div.col3 { width: 108px; height: 30px; }
+
+	table.block input { text-align: center; }
+	table.block tr td:nth-child(3) { text-align: center; }
+
+	table.block div.slider { width: 108px; text-align: center; }
+	table.block slider { float: none; }
+	table.block select { text-align: center; }
+}