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 '
'; require 'includes/device-header.inc.php'; 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';