Merge pull request #2510 from Alucardfh/useMoreWidthRebased

Use more width rebased

html/ajax_setresolution.php

@@ -0,0 +1,8 @@
+<?php
+session_start();
+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'];

html/css/styles.css

@@ -1765,6 +1765,59 @@ 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;
+    }
+    .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) {
+}

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 />'.generate_link($device['location'], array('page' => 'devices', 'location' => $device['location'])).'</td>
              <td>';

html/includes/functions.inc.php

@@ -476,7 +476,7 @@ function generate_lazy_graph_tag($args) {
         $urlargs[] = $key."=".urlencode($arg);
     }
 
-    return '<img class="lazy" width="'.$w.'" height="'.$h.'" data-original="graph.php?' . implode('&amp;',$urlargs).'" border="0" />';
+    return '<img class="lazy graphs" width="'.$w.'" height="'.$h.'" data-original="graph.php?' . implode('&amp;',$urlargs).'" border="0" />';
 
 }//end generate_lazy_graph_tag()
 

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();

html/index.php

@@ -184,6 +184,10 @@ else {
 
 <?php
 
+if(empty($_SESSION['screen_width']) && empty($_SESSION['screen_height'])) {
+    echo "<script>updateResolution();</script>";
+}
+
 if ((isset($vars['bare']) && $vars['bare'] != "yes") || !isset($vars['bare'])) {
     if ($_SESSION['authenticated']) {
         require 'includes/print-menubar.php';

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');
-}
+    $(this).removeAttr('height').removeClass('lazy');
+}

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();
 });
-

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>';

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];
@@ -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("<hr />");
 
     include_once 'includes/print-date-selector.inc.php';