From fc9f7eade8540cdf25f101f67ca772cf97bf2013 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 19 Nov 2015 13:39:32 +0000 Subject: [PATCH 01/24] Store browser height and width in session using ajax call Modify html/includes/print-graphrow.inc.php to make use of the new Session variable --- html/ajax_setresolution.php | 9 +++++++++ html/includes/print-graphrow.inc.php | 11 +++++++++++ html/js/librenms.js | 4 ++++ 3 files changed, 24 insertions(+) create mode 100644 html/ajax_setresolution.php diff --git a/html/ajax_setresolution.php b/html/ajax_setresolution.php new file mode 100644 index 0000000000..3bf071e52a --- /dev/null +++ b/html/ajax_setresolution.php @@ -0,0 +1,9 @@ + diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 2ee411551a..3a536c8493 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -37,6 +37,17 @@ else { ); }//end if +if($_SESSION['screen_width']) +{ + $graph_array['width'] = $_SESSION['screen_width']/5.5; +} + +if($_SESSION['screen_height']) +{ + $graph_array['height'] = $_SESSION['screen_height']/6; +} + + $graph_array['to'] = $config['time']['now']; $graph_data = array(); diff --git a/html/js/librenms.js b/html/js/librenms.js index 9bffaffcaf..d9f74ec077 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -155,3 +155,7 @@ $(document).on("click", '.collapse-neighbors', function(event) continued.toggle(); }); +$(function() { + $.post('ajax_setresolution.php', { width: $(window).width() , height:$(window).height() }, function(json) { + },'json'); +}); From 6116f00e58dd009bde9e27de288dbd33c694a999 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 19 Nov 2015 13:58:17 +0000 Subject: [PATCH 02/24] Divide the width by the number of graphs in a row reduced by an arbitrary value to allow margins Only display one graph per line if width is < 800px --- html/includes/print-graphrow.inc.php | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 3a536c8493..d3000844f9 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -39,12 +39,18 @@ else { if($_SESSION['screen_width']) { - $graph_array['width'] = $_SESSION['screen_width']/5.5; + if($_SESSION['screen_width'] >= 800) + { + $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1; + }else + { + $graph_array['width'] = $_SESSION['screen_width'] - 155; + } } if($_SESSION['screen_height']) { - $graph_array['height'] = $_SESSION['screen_height']/6; + $graph_array['height'] = ($_SESSION['screen_height'] - 250)/4; } From bafdeaf9eea915f436d98168d5c0844014551ad9 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 19 Nov 2015 14:14:29 +0000 Subject: [PATCH 03/24] Update the session variables for browser width and height when browser is resized --- html/js/librenms.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/html/js/librenms.js b/html/js/librenms.js index d9f74ec077..f84dad6f36 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -123,6 +123,7 @@ $(document).ready(function() { }); }); + updateResolution(); }); function submitCustomRange(frmdata) { @@ -155,7 +156,12 @@ $(document).on("click", '.collapse-neighbors', function(event) continued.toggle(); }); -$(function() { - $.post('ajax_setresolution.php', { width: $(window).width() , height:$(window).height() }, function(json) { +function updateResolution() +{ + $.post('ajax_setresolution.php', { width: $(window).width() , height:$(window).height() }, function(json) { },'json'); -}); +} + +$(window).on('resize', function(){ updateResolution();}); + + From 4731e8621b09f6c315d2503883fde2acc04c01e4 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Fri, 20 Nov 2015 12:02:51 +0000 Subject: [PATCH 04/24] Correct code to match code standards --- html/ajax_setresolution.php | 3 --- html/includes/print-graphrow.inc.php | 12 ++++-------- html/js/librenms.js | 26 ++++++++++++++------------ 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/html/ajax_setresolution.php b/html/ajax_setresolution.php index 3bf071e52a..e2dc12eba1 100644 --- a/html/ajax_setresolution.php +++ b/html/ajax_setresolution.php @@ -4,6 +4,3 @@ if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) { $_SESSION['screen_width'] = $_REQUEST['width']; $_SESSION['screen_height'] = $_REQUEST['height']; } - -echo $_SESSION['screen_width']; -?> diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index d3000844f9..0e4c7d9d04 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -37,19 +37,15 @@ else { ); }//end if -if($_SESSION['screen_width']) -{ - if($_SESSION['screen_width'] >= 800) - { +if($_SESSION['screen_width']) { + if($_SESSION['screen_width'] >= 800) { $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1; - }else - { + }else { $graph_array['width'] = $_SESSION['screen_width'] - 155; } } -if($_SESSION['screen_height']) -{ +if($_SESSION['screen_height']) { $graph_array['height'] = ($_SESSION['screen_height'] - 250)/4; } diff --git a/html/js/librenms.js b/html/js/librenms.js index f84dad6f36..3918c14a99 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -137,6 +137,18 @@ function submitCustomRange(frmdata) { return true; } +function updateResolution() +{ + $.post( + 'ajax_setresolution.php', + {width: $(window).width(),height:$(window).height()}, + function(json) {}, + 'json' + ); +} + +$(window).on('resize', function(){ updateResolution();}); + $(document).on("click", '.collapse-neighbors', function(event) { var caller = $(this); @@ -144,11 +156,9 @@ $(document).on("click", '.collapse-neighbors', function(event) var list = caller.find('.neighbors-interface-list'); var continued = caller.find('.neighbors-list-continued'); - if(button.hasClass("glyphicon-plus")) - { + if(button.hasClass("glyphicon-plus")) { button.addClass('glyphicon-minus').removeClass('glyphicon-plus'); - }else - { + }else { button.addClass('glyphicon-plus').removeClass('glyphicon-minus'); } @@ -156,12 +166,4 @@ $(document).on("click", '.collapse-neighbors', function(event) continued.toggle(); }); -function updateResolution() -{ - $.post('ajax_setresolution.php', { width: $(window).width() , height:$(window).height() }, function(json) { - },'json'); -} - -$(window).on('resize', function(){ updateResolution();}); - From b1fd1b3137a7f41e1e70546fa79c2a8ec13ae707 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Fri, 20 Nov 2015 12:47:56 +0000 Subject: [PATCH 05/24] Only update resolution if session variables don't exist Tune print-graphrow.inc.php to avoid last graph going to a new line in certain cases --- html/includes/print-graphrow.inc.php | 2 +- html/index.php | 4 ++++ html/js/librenms.js | 1 - 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 0e4c7d9d04..362e2a5433 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -39,7 +39,7 @@ else { if($_SESSION['screen_width']) { if($_SESSION['screen_width'] >= 800) { - $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1; + $graph_array['width'] = ($_SESSION['screen_width'] - 420 )/count($periods)+1; }else { $graph_array['width'] = $_SESSION['screen_width'] - 155; } diff --git a/html/index.php b/html/index.php index 6499e2c27e..aee20f1d73 100644 --- a/html/index.php +++ b/html/index.php @@ -184,6 +184,10 @@ else { updateResolution();"; +} + if ((isset($vars['bare']) && $vars['bare'] != "yes") || !isset($vars['bare'])) { if ($_SESSION['authenticated']) { require 'includes/print-menubar.php'; diff --git a/html/js/librenms.js b/html/js/librenms.js index 3918c14a99..2c4cee311a 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -123,7 +123,6 @@ $(document).ready(function() { }); }); - updateResolution(); }); function submitCustomRange(frmdata) { From 9ad6763c86fd8f28aad9c74b3fa6a4345fc90468 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Fri, 20 Nov 2015 14:39:19 +0000 Subject: [PATCH 06/24] Make graph page use session variable to compute graph size --- html/pages/graphs.inc.php | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/html/pages/graphs.inc.php b/html/pages/graphs.inc.php index 6385ea969e..c844fa0d64 100644 --- a/html/pages/graphs.inc.php +++ b/html/pages/graphs.inc.php @@ -111,6 +111,14 @@ else { $graph_array['height'] = "300"; $graph_array['width'] = $graph_width; + if($_SESSION['screen_width']) { + $graph_array['width'] = ($_SESSION['screen_width'] - ($_SESSION['screen_width']/12)); + } + + if($_SESSION['screen_height']) { + $graph_array['height'] = ($_SESSION['screen_height'] - ($_SESSION['screen_height']/2)); + } + echo("
"); include_once 'includes/print-date-selector.inc.php'; From 12e37a20ee3714b18194f1c0154799bedb03192c Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Fri, 20 Nov 2015 14:47:59 +0000 Subject: [PATCH 07/24] Fix syntax --- html/includes/print-graphrow.inc.php | 3 ++- html/js/librenms.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 362e2a5433..e37cd3125a 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -40,7 +40,8 @@ else { if($_SESSION['screen_width']) { if($_SESSION['screen_width'] >= 800) { $graph_array['width'] = ($_SESSION['screen_width'] - 420 )/count($periods)+1; - }else { + } + else { $graph_array['width'] = $_SESSION['screen_width'] - 155; } } diff --git a/html/js/librenms.js b/html/js/librenms.js index 2c4cee311a..71f017d242 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -157,7 +157,8 @@ $(document).on("click", '.collapse-neighbors', function(event) if(button.hasClass("glyphicon-plus")) { button.addClass('glyphicon-minus').removeClass('glyphicon-plus'); - }else { + } + else { button.addClass('glyphicon-plus').removeClass('glyphicon-minus'); } From 8f2ddb243d41f85fae6a629512b56d7d79e92817 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Mon, 23 Nov 2015 11:23:04 +0000 Subject: [PATCH 08/24] 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 150e1eace8..03ed6b3c6f 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 c844fa0d64..bcb1c92437 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(''); + echo('
'); 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("
"); From 8961a5f2c105038979b765beb8d10c79c0d15b04 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Mon, 23 Nov 2015 12:08:09 +0000 Subject: [PATCH 09/24] 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 ' - +
'.$image.''.$image.' '.generate_device_link($device).'
'.$device['location'].'		 '; 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 '
'; - echo ''; + echo '
'; require 'includes/device-header.inc.php'; echo '
'; echo '
'; From 6e1d234312a9ff755bfd3ba3cb41dbadbbe14f2c Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 19 Nov 2015 13:58:17 +0000 Subject: [PATCH 10/24] Divide the width by the number of graphs in a row reduced by an arbitrary value to allow margins Only display one graph per line if width is < 800px --- html/includes/print-graphrow.inc.php | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 5f8768e240..9d5c7d49eb 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -37,11 +37,13 @@ else { ); }//end if -if($_SESSION['screen_width']) { - if($_SESSION['screen_width'] > 800) { +if($_SESSION['screen_width']) +{ + if($_SESSION['screen_width'] >= 800) + { $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1; - } - else { + }else + { $graph_array['width'] = $_SESSION['screen_width'] - 155; } } From ce8e79c63a0da087843744c2b449b15c5f2ed7f2 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 19 Nov 2015 14:14:29 +0000 Subject: [PATCH 11/24] Update the session variables for browser width and height when browser is resized --- html/includes/print-graphrow.inc.php | 9 +++------ html/js/librenms.js | 3 +-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 9d5c7d49eb..e1d52bb93b 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -37,13 +37,10 @@ else { ); }//end if -if($_SESSION['screen_width']) -{ - if($_SESSION['screen_width'] >= 800) - { +if($_SESSION['screen_width']) { + if($_SESSION['screen_width'] >= 800) { $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1; - }else - { + }else { $graph_array['width'] = $_SESSION['screen_width'] - 155; } } diff --git a/html/js/librenms.js b/html/js/librenms.js index 71f017d242..95108fa04b 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -123,6 +123,7 @@ $(document).ready(function() { }); }); + updateResolution(); }); function submitCustomRange(frmdata) { @@ -165,5 +166,3 @@ $(document).on("click", '.collapse-neighbors', function(event) list.toggle(); continued.toggle(); }); - - From 961a9fff4b107a46cf22d2a327b3d6edb642cc99 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Fri, 20 Nov 2015 14:39:19 +0000 Subject: [PATCH 12/24] Make graph page use session variable to compute graph size --- html/includes/print-graphrow.inc.php | 5 +++-- html/pages/graphs.inc.php | 14 ++------------ 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index e1d52bb93b..ab54dd6c5b 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -39,8 +39,9 @@ else { if($_SESSION['screen_width']) { if($_SESSION['screen_width'] >= 800) { - $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1; - }else { + $graph_array['width'] = ($_SESSION['screen_width'] - 420 )/count($periods)+1; + } + else { $graph_array['width'] = $_SESSION['screen_width'] - 155; } } diff --git a/html/pages/graphs.inc.php b/html/pages/graphs.inc.php index bcb1c92437..075fd59688 100644 --- a/html/pages/graphs.inc.php +++ b/html/pages/graphs.inc.php @@ -112,21 +112,11 @@ else { $graph_array['width'] = $graph_width; if($_SESSION['screen_width']) { - 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)); - } + $graph_array['width'] = ($_SESSION['screen_width'] - ($_SESSION['screen_width']/12)); } if($_SESSION['screen_height']) { - 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)); - } + $graph_array['height'] = ($_SESSION['screen_height'] - ($_SESSION['screen_height']/2)); } echo("
"); From ccfc9450ae93677dedddc2a81ad80f17623b015e Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Mon, 23 Nov 2015 11:23:04 +0000 Subject: [PATCH 13/24] 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 | 18 +----------------- html/pages/graphs.inc.php | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/html/css/styles.css b/html/css/styles.css index 3c2de2ca70..03ed6b3c6f 100644 --- a/html/css/styles.css +++ b/html/css/styles.css @@ -1776,30 +1776,14 @@ 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: 768px) and (min-width: 481px) { +@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; } - .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/pages/graphs.inc.php b/html/pages/graphs.inc.php index 075fd59688..bcb1c92437 100644 --- a/html/pages/graphs.inc.php +++ b/html/pages/graphs.inc.php @@ -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("
"); From 6bd84ee94f8504f3adef637fe6fbb80d994523a0 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Mon, 23 Nov 2015 12:08:09 +0000 Subject: [PATCH 14/24] Use media query to reduce font and img size when width is < 960px Avoid having horizontal scrollbars. --- html/css/styles.css | 18 +++++++++++++++++- html/includes/print-graphrow.inc.php | 4 ++-- 2 files changed, 19 insertions(+), 3 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/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index ab54dd6c5b..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; From c4d774e8d715b7dca04e45bd7dae97d67f31cfe6 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Tue, 24 Nov 2015 16:44:49 +0000 Subject: [PATCH 15/24] Add more padding to accomodate row of graphs that have large y-axis text Slightly reduced the height of rows of graphs --- html/includes/print-graphrow.inc.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 5f8768e240..9fe0cc8565 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -39,7 +39,7 @@ else { if($_SESSION['screen_width']) { if($_SESSION['screen_width'] > 800) { - $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1; + $graph_array['width'] = ($_SESSION['screen_width'] - 430 )/count($periods)+1; } else { $graph_array['width'] = $_SESSION['screen_width'] - 155; @@ -48,7 +48,7 @@ if($_SESSION['screen_width']) { if($_SESSION['screen_height']) { if($_SESSION['screen_width'] > 960) { - $graph_array['height'] = ($_SESSION['screen_height'] - 250)/4; + $graph_array['height'] = ($_SESSION['screen_height'] - 250)/5; } else { $graph_array['height'] = ($_SESSION['screen_height'] - 250)/2; From 64b5fa3c4c325ab337a96e5e1fac4cd90a0eac50 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Wed, 25 Nov 2015 11:06:16 +0000 Subject: [PATCH 16/24] Round the width and height to prevent weird behavior --- html/includes/print-graphrow.inc.php | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 9fe0cc8565..5f8486d924 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -39,22 +39,31 @@ else { if($_SESSION['screen_width']) { if($_SESSION['screen_width'] > 800) { - $graph_array['width'] = ($_SESSION['screen_width'] - 430 )/count($periods)+1; + $graph_array['width'] = round(($_SESSION['screen_width'] - 430 )/count($periods)+1,0); } else { $graph_array['width'] = $_SESSION['screen_width'] - 155; } } +echo $graph_array['width']; + +if( $graph_array['width'] < 215) { + $graph_array['width'] = 215; +} + if($_SESSION['screen_height']) { if($_SESSION['screen_width'] > 960) { - $graph_array['height'] = ($_SESSION['screen_height'] - 250)/5; + $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/5,0); } else { - $graph_array['height'] = ($_SESSION['screen_height'] - 250)/2; + $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/2,0); } } +if($graph_array['height'] < 100 ) { + $graph_array['height'] = 100; +} $graph_array['to'] = $config['time']['now']; From 8e271ace83c26a52815a4108c42a6441f4813e1e Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Wed, 25 Nov 2015 11:58:25 +0000 Subject: [PATCH 17/24] Remove debug echo --- html/includes/print-graphrow.inc.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 5f8486d924..90fbd2fca9 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -46,8 +46,6 @@ if($_SESSION['screen_width']) { } } -echo $graph_array['width']; - if( $graph_array['width'] < 215) { $graph_array['width'] = 215; } From 66cf9dfffc1ecf043fe61161e8c91c6ee7b88899 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Wed, 25 Nov 2015 17:26:54 +0000 Subject: [PATCH 18/24] Only remove the height tag from the lazy loaded images --- html/js/lazyload.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/html/js/lazyload.js b/html/js/lazyload.js index 723d4e7e6b..ec261f8ceb 100644 --- a/html/js/lazyload.js +++ b/html/js/lazyload.js @@ -32,5 +32,5 @@ $(document).ready(function(){ function lazyload_done() { //Since RRD takes the width and height params for only the canvas, we must unset them //from the final (larger) image to prevent the browser from resizing them. - $(this).removeAttr('width').removeAttr('height').removeClass('lazy'); -} \ No newline at end of file + $(this).removeAttr('height').removeClass('lazy'); +} From a62067a5b9dc0218e05d3be0ffaf9bf182dc0781 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Wed, 25 Nov 2015 17:27:24 +0000 Subject: [PATCH 19/24] Rework the padding and ratio to better fit the lazy loading --- html/includes/print-graphrow.inc.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 90fbd2fca9..26d51a2e29 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -39,10 +39,10 @@ else { if($_SESSION['screen_width']) { if($_SESSION['screen_width'] > 800) { - $graph_array['width'] = round(($_SESSION['screen_width'] - 430 )/count($periods)+1,0); + $graph_array['width'] = round(($_SESSION['screen_width'] - 90 )/count($periods)+1,0); } else { - $graph_array['width'] = $_SESSION['screen_width'] - 155; + $graph_array['width'] = $_SESSION['screen_width'] - 70; } } @@ -51,11 +51,11 @@ if( $graph_array['width'] < 215) { } if($_SESSION['screen_height']) { - if($_SESSION['screen_width'] > 960) { - $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/5,0); + if($_SESSION['screen_height'] > 960) { + $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/4,0); } else { - $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/2,0); + $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/3,0); } } From 4d6e194a528ef3bdcddedf36bffefe56eee13cb8 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 26 Nov 2015 12:14:57 +0000 Subject: [PATCH 20/24] Add reload on resize event to regenerate the graphs correctly --- html/ajax_setresolution.php | 2 ++ html/js/librenms.js | 34 ++++++++++++++++++++++++++++------ 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/html/ajax_setresolution.php b/html/ajax_setresolution.php index e2dc12eba1..b72bd748ee 100644 --- a/html/ajax_setresolution.php +++ b/html/ajax_setresolution.php @@ -4,3 +4,5 @@ if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) { $_SESSION['screen_width'] = $_REQUEST['width']; $_SESSION['screen_height'] = $_REQUEST['height']; } +echo $_SESSION['screen_width']; +echo $_SESSION['screen_height']; diff --git a/html/js/librenms.js b/html/js/librenms.js index 95108fa04b..a89c37c829 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -139,15 +139,37 @@ function submitCustomRange(frmdata) { function updateResolution() { - $.post( - 'ajax_setresolution.php', - {width: $(window).width(),height:$(window).height()}, - function(json) {}, - 'json' + $.post('ajax_setresolution.php', + { + width: $(window).width(), + height:$(window).height() + }, + function(data) { + location.reload(); + },'json' ); } -$(window).on('resize', function(){ updateResolution();}); +var rtime; +var timeout = false; +var delta = 300; + +$(window).on('resize', function(){ + rtime = new Date(); + if (timeout === false) { + timeout = true; + setTimeout(resizeend, delta); + } +}); + +function resizeend() { + if (new Date() - rtime < delta) { + setTimeout(resizeend, delta); + } else { + timeout = false; + updateResolution(); + } +}; $(document).on("click", '.collapse-neighbors', function(event) { From 3f25aa4592c4a427732372935b2d6daa62ce11d5 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 26 Nov 2015 12:16:02 +0000 Subject: [PATCH 21/24] Calculate the height as width/2.15 to respect the old aspect ratio Only display two graphs per line for resolution with width between 700x and 1024px --- html/includes/print-graphrow.inc.php | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index 26d51a2e29..f6157a953a 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -38,30 +38,20 @@ else { }//end if if($_SESSION['screen_width']) { - if($_SESSION['screen_width'] > 800) { - $graph_array['width'] = round(($_SESSION['screen_width'] - 90 )/count($periods)+1,0); - } - else { - $graph_array['width'] = $_SESSION['screen_width'] - 70; - } -} - -if( $graph_array['width'] < 215) { - $graph_array['width'] = 215; -} - -if($_SESSION['screen_height']) { - if($_SESSION['screen_height'] > 960) { - $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/4,0); + if($_SESSION['screen_width'] < 1024 && $_SESSION['screen_width'] > 700) { + $graph_array['width'] = round(($_SESSION['screen_width'] - 90 )/2,0); } else { - $graph_array['height'] = round(($_SESSION['screen_height'] - 250)/3,0); + if($_SESSION['screen_width'] > 1024) { + $graph_array['width'] = round(($_SESSION['screen_width'] - 90 )/count($periods)+1,0); + } + else { + $graph_array['width'] = $_SESSION['screen_width'] - 70; + } } } -if($graph_array['height'] < 100 ) { - $graph_array['height'] = 100; -} +$graph_array['height'] = round($graph_array['width'] /2.15); $graph_array['to'] = $config['time']['now']; From ef1c7a58e3c60ed8a9cc9f70c8c7a5f846bca4cc Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Thu, 26 Nov 2015 17:41:41 +0000 Subject: [PATCH 22/24] Fix infinite reload loop due to bad cherry pick Fix code to respect coding standard --- html/js/librenms.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/html/js/librenms.js b/html/js/librenms.js index a89c37c829..264dab25ca 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -123,7 +123,6 @@ $(document).ready(function() { }); }); - updateResolution(); }); function submitCustomRange(frmdata) { @@ -165,7 +164,8 @@ $(window).on('resize', function(){ function resizeend() { if (new Date() - rtime < delta) { setTimeout(resizeend, delta); - } else { + } + else { timeout = false; updateResolution(); } From 094f7d50da96060b964c0cbdcd9b282c249d6744 Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Fri, 27 Nov 2015 11:58:56 +0000 Subject: [PATCH 23/24] Replace the reload on browser resize by a graph width resize --- html/includes/functions.inc.php | 2 +- html/js/librenms.js | 24 ++++++++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/html/includes/functions.inc.php b/html/includes/functions.inc.php index dc23186a9e..7588f237d6 100644 --- a/html/includes/functions.inc.php +++ b/html/includes/functions.inc.php @@ -476,7 +476,7 @@ function generate_lazy_graph_tag($args) { $urlargs[] = $key."=".urlencode($arg); } - return ''; + return ''; }//end generate_lazy_graph_tag() diff --git a/html/js/librenms.js b/html/js/librenms.js index 264dab25ca..ef1d6e5824 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -1,3 +1,5 @@ +var oldH; +var oldW; $(document).ready(function() { // Device override ajax calls $("[name='override_config']").bootstrapSwitch('offColor','danger'); @@ -123,6 +125,8 @@ $(document).ready(function() { }); }); + oldW=$(window).width(); + oldH=$(window).height(); }); function submitCustomRange(frmdata) { @@ -144,14 +148,13 @@ function updateResolution() height:$(window).height() }, function(data) { - location.reload(); },'json' ); } var rtime; var timeout = false; -var delta = 300; +var delta = 500; $(window).on('resize', function(){ rtime = new Date(); @@ -168,9 +171,26 @@ function resizeend() { else { timeout = false; updateResolution(); + resizeGraphs(); } }; +function resizeGraphs() { + newH=$(window).height(); + newW=$(window).width(); + + ratioW=newW/oldW; + ratioH=newH/oldH; + + $('.graphs').each(function (){ + var img = jQuery(this); + img.attr('width',img.width() * ratioW); + }); + oldH=newH; + oldW=newW; +} + + $(document).on("click", '.collapse-neighbors', function(event) { var caller = $(this); From 8d0976de51bee5707835920ed99a13244e35792d Mon Sep 17 00:00:00 2001 From: Louis Bailleul Date: Mon, 30 Nov 2015 11:10:35 +0000 Subject: [PATCH 24/24] Only resize graphs if browser resize width is less than 200px, refresh the page otherwise --- html/js/librenms.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/html/js/librenms.js b/html/js/librenms.js index ef1d6e5824..034f1a9452 100644 --- a/html/js/librenms.js +++ b/html/js/librenms.js @@ -140,7 +140,7 @@ function submitCustomRange(frmdata) { return true; } -function updateResolution() +function updateResolution(refresh) { $.post('ajax_setresolution.php', { @@ -148,6 +148,9 @@ function updateResolution() height:$(window).height() }, function(data) { + if(refresh == true) { + location.reload(); + } },'json' ); } @@ -155,6 +158,8 @@ function updateResolution() var rtime; var timeout = false; var delta = 500; +var newH; +var newW; $(window).on('resize', function(){ rtime = new Date(); @@ -169,16 +174,22 @@ function resizeend() { setTimeout(resizeend, delta); } else { + newH=$(window).height(); + newW=$(window).width(); timeout = false; - updateResolution(); - resizeGraphs(); + if(Math.abs(oldW - newW) >= 200) + { + refresh = true; + } + else { + refresh = false; + resizeGraphs(); + } + updateResolution(refresh); } }; function resizeGraphs() { - newH=$(window).height(); - newW=$(window).width(); - ratioW=newW/oldW; ratioH=newH/oldH;