From 8961a5f2c105038979b765beb8d10c79c0d15b04 Mon Sep 17 00:00:00 2001
From: Louis Bailleul <louis.bailleul@pgs.com>
Date: Mon, 23 Nov 2015 12:08:09 +0000
Subject: [PATCH] Use media query to reduce font and img size when width is <
 960px Avoid having horizontal scrollbars.

---
 html/css/styles.css                  | 18 +++++++++++++++++-
 html/includes/device-header.inc.php  |  2 +-
 html/includes/print-graphrow.inc.php | 11 ++++++++---
 html/pages/device.inc.php            |  2 +-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/html/css/styles.css b/html/css/styles.css
index 03ed6b3c6f..3c2de2ca70 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -1776,14 +1776,30 @@ label {
         max-width: 45px;
         max-height: 50px;
     }
+    .device-header-table .device_icon img {
+       max-width: 20px;
+       max-height: 20px;
+    }
+    .device-header-table img {
+       max-width: 115px;
+       max-height: 40px;
+    }
+    .device-header-table {font-size : 8px;}
+    .device-header-table a {font-size : 11px;}
 }
 
-@media only screen and (max-width: 720px) and (min-width: 481px) {
+@media only screen and (max-width: 768px) and (min-width: 481px) {
     .thumbnail_graph_table b { font-size : 8px;}
     .thumbnail_graph_table img {
         max-width: 60px;
         max-height: 55px;
     }
+    .device-header-table img {
+       max-width: 150px;
+       max-height: 50px;
+    }
+    .device-header-table {font-size : 10px;}
+    .device-header-table a {font-size : 17px;}
 }
 
 
diff --git a/html/includes/device-header.inc.php b/html/includes/device-header.inc.php
index 8c6775930c..9109c4467b 100644
--- a/html/includes/device-header.inc.php
+++ b/html/includes/device-header.inc.php
@@ -24,7 +24,7 @@ $image = getImage($device);
 
 echo '
             <tr bgcolor="'.$device_colour.'" class="alert '.$class.'">
-             <td width="40" align=center valign=middle style="padding: 21px;">'.$image.'</td>
+             <td width="40" align=center valign=middle style="padding: 21px;"><span class="device_icon">'.$image.'</span></td>
              <td valign=middle style="padding: 0 15px;"><span style="font-size: 20px;">'.generate_device_link($device).'</span>
              <br />'.$device['location'].'</td>
              <td>';
diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php
index e37cd3125a..5f8768e240 100644
--- a/html/includes/print-graphrow.inc.php
+++ b/html/includes/print-graphrow.inc.php
@@ -38,8 +38,8 @@ else {
 }//end if
 
 if($_SESSION['screen_width']) {
-   if($_SESSION['screen_width'] >= 800) {
-	   $graph_array['width'] = ($_SESSION['screen_width'] - 420 )/count($periods)+1;
+   if($_SESSION['screen_width'] > 800) {
+	   $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1;
    }
    else {
 	$graph_array['width'] = $_SESSION['screen_width'] - 155;
@@ -47,7 +47,12 @@ if($_SESSION['screen_width']) {
 }
 
 if($_SESSION['screen_height']) {
-  $graph_array['height'] = ($_SESSION['screen_height'] - 250)/4;
+    if($_SESSION['screen_width'] > 960) {
+        $graph_array['height'] = ($_SESSION['screen_height'] - 250)/4;
+    }
+    else {
+        $graph_array['height'] = ($_SESSION['screen_height'] - 250)/2;
+    }
 }
 
 
diff --git a/html/pages/device.inc.php b/html/pages/device.inc.php
index 688a18900a..1a68f9dbf3 100644
--- a/html/pages/device.inc.php
+++ b/html/pages/device.inc.php
@@ -33,7 +33,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
     }
 
     echo '<div class="panel panel-default">';
-        echo '<table style="margin: 0px 7px 7px 7px;" cellspacing="0" class="devicetable" width="99%">';
+        echo '<table class="device-header-table" style="margin: 0px 7px 7px 7px;" cellspacing="0" class="devicetable" width="99%">';
         require 'includes/device-header.inc.php';
     echo '</table>';
     echo '</div>';