diff --git a/html/ajax_setresolution.php b/html/ajax_setresolution.php
new file mode 100644
index 000000000..b72bd748e
--- /dev/null
+++ b/html/ajax_setresolution.php
@@ -0,0 +1,8 @@
+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;
+ }
+ .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) {
+ .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;}
+}
+
+
+@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/includes/device-header.inc.php b/html/includes/device-header.inc.php
index 17ba8b602..456646f8d 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).'
'.generate_link($device['location'], array('page' => 'devices', 'location' => $device['location'])).' |
';
diff --git a/html/includes/functions.inc.php b/html/includes/functions.inc.php
index dc23186a9..7588f237d 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/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php
index 2ee411551..f6157a953 100644
--- a/html/includes/print-graphrow.inc.php
+++ b/html/includes/print-graphrow.inc.php
@@ -37,6 +37,22 @@ else {
);
}//end if
+if($_SESSION['screen_width']) {
+ if($_SESSION['screen_width'] < 1024 && $_SESSION['screen_width'] > 700) {
+ $graph_array['width'] = round(($_SESSION['screen_width'] - 90 )/2,0);
+ }
+ else {
+ 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;
+ }
+ }
+}
+
+$graph_array['height'] = round($graph_array['width'] /2.15);
+
$graph_array['to'] = $config['time']['now'];
$graph_data = array();
diff --git a/html/index.php b/html/index.php
index 6499e2c27..aee20f1d7 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/lazyload.js b/html/js/lazyload.js
index 723d4e7e6..ec261f8ce 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');
+}
diff --git a/html/js/librenms.js b/html/js/librenms.js
index 9bffaffca..034f1a945 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) {
@@ -136,6 +140,68 @@ function submitCustomRange(frmdata) {
return true;
}
+function updateResolution(refresh)
+{
+ $.post('ajax_setresolution.php',
+ {
+ width: $(window).width(),
+ height:$(window).height()
+ },
+ function(data) {
+ if(refresh == true) {
+ location.reload();
+ }
+ },'json'
+ );
+}
+
+var rtime;
+var timeout = false;
+var delta = 500;
+var newH;
+var newW;
+
+$(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 {
+ newH=$(window).height();
+ newW=$(window).width();
+ timeout = false;
+ if(Math.abs(oldW - newW) >= 200)
+ {
+ refresh = true;
+ }
+ else {
+ refresh = false;
+ resizeGraphs();
+ }
+ updateResolution(refresh);
+ }
+};
+
+function resizeGraphs() {
+ 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);
@@ -143,15 +209,13 @@ $(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');
}
list.toggle();
continued.toggle();
});
-
diff --git a/html/pages/device.inc.php b/html/pages/device.inc.php
index 688a18900..1a68f9dbf 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 '';
echo '';
diff --git a/html/pages/graphs.inc.php b/html/pages/graphs.inc.php
index 6385ea969..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('');
+ echo('');
foreach ($thumb_array as $period => $text) {
$graph_array['from'] = $config['time'][$period];
@@ -111,6 +111,24 @@ else {
$graph_array['height'] = "300";
$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));
+ }
+ }
+
+ 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));
+ }
+ }
+
echo(" ");
include_once 'includes/print-date-selector.inc.php';
|