From 8f2ddb243d41f85fae6a629512b56d7d79e92817 Mon Sep 17 00:00:00 2001
From: Louis Bailleul <louis.bailleul@pgs.com>
Date: Mon, 23 Nov 2015 11:23:04 +0000
Subject: [PATCH] Add media query to cahnge the size of the thumbnails This
 prevent the scrollbar on graph.inc.php Tweaked the graphs sizing to fit
 better on the screen

---
 html/css/styles.css       | 37 +++++++++++++++++++++++++++++++++++++
 html/pages/graphs.inc.php | 16 +++++++++++++---
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/html/css/styles.css b/html/css/styles.css
index 150e1eace..03ed6b3c6 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -1765,6 +1765,43 @@ tr.search:nth-child(odd) {
 label {
     font-weight: normal;
 }
+
 .nav>li>a.dropdown-toggle {
     padding: 15px 6px;
 }
+
+@media only screen and (max-width: 480px) {
+    .thumbnail_graph_table b { font-size : 6px;}
+    .thumbnail_graph_table img {
+        max-width: 45px;
+        max-height: 50px;
+    }
+}
+
+@media only screen and (max-width: 720px) and (min-width: 481px) {
+    .thumbnail_graph_table b { font-size : 8px;}
+    .thumbnail_graph_table img {
+        max-width: 60px;
+        max-height: 55px;
+    }
+}
+
+
+@media only screen and (max-width: 800px) and (min-width: 721px) {
+    .thumbnail_graph_table b { font-size : 8px;}
+    .thumbnail_graph_table img {
+        max-width: 75px;
+        max-height: 60px;
+    }
+}
+
+@media only screen and (max-width: 1024px) and (min-width: 801px) {
+    .thumbnail_graph_table b { font-size : 9px;}
+    .thumbnail_graph_table img {
+        max-width: 105px;
+        max-height: 70px;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+}
diff --git a/html/pages/graphs.inc.php b/html/pages/graphs.inc.php
index c844fa0d6..bcb1c9243 100644
--- a/html/pages/graphs.inc.php
+++ b/html/pages/graphs.inc.php
@@ -85,7 +85,7 @@ else {
     $thumb_array = array('sixhour' => '6 Hours', 'day' => '24 Hours', 'twoday' => '48 Hours', 'week' => 'One Week', 'twoweek' => 'Two Weeks',
         'month' => 'One Month', 'twomonth' => 'Two Months','year' => 'One Year', 'twoyear' => 'Two Years');
 
-    echo('<table width=100%><tr>');
+     echo('<table width=100% class="thumbnail_graph_table"><tr>');
 
     foreach ($thumb_array as $period => $text) {
         $graph_array['from']   = $config['time'][$period];
@@ -112,11 +112,21 @@ else {
     $graph_array['width']  = $graph_width;
 
     if($_SESSION['screen_width']) {
-        $graph_array['width'] = ($_SESSION['screen_width'] - ($_SESSION['screen_width']/12));
+        if($_SESSION['screen_width'] > 800) {
+            $graph_array['width'] = ($_SESSION['screen_width'] - ($_SESSION['screen_width']/10));
+        }
+        else {
+            $graph_array['width'] = ($_SESSION['screen_width'] - ($_SESSION['screen_width']/4));
+        }
     }
 
     if($_SESSION['screen_height']) {
-        $graph_array['height'] = ($_SESSION['screen_height'] - ($_SESSION['screen_height']/2));
+        if($_SESSION['screen_height'] > 960 ) { 
+            $graph_array['height'] = ($_SESSION['screen_height'] - ($_SESSION['screen_height']/2));
+        }
+        else {
+            $graph_array['height'] = ($_SESSION['screen_height'] - ($_SESSION['screen_height']/1.5));
+        }
     }
 
     echo("<hr />");