mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use media query to reduce font and img size when width is < 960px

Browse Source 
Avoid having horizontal scrollbars.
This commit is contained in:
Louis Bailleul
2015-11-23 12:08:09 +00:00
parent 8f2ddb243d
commit 8961a5f2c1
4 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
html/css/styles.css
View File

@@ -1776,14 +1776,30 @@ label {
max-width: 45px; max-width: 45px;
max-height: 50px; 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 b { font-size : 8px;}
.thumbnail_graph_table img { .thumbnail_graph_table img {
max-width: 60px; max-width: 60px;
max-height: 55px; 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;}
} }

2
html/includes/device-header.inc.php
View File

@@ -24,7 +24,7 @@ $image = getImage($device);
echo ' echo '
<tr bgcolor="'.$device_colour.'" class="alert '.$class.'"> <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> <td valign=middle style="padding: 0 15px;"><span style="font-size: 20px;">'.generate_device_link($device).'</span>
<br />'.$device['location'].'</td> <br />'.$device['location'].'</td>
<td>'; <td>';

11
html/includes/print-graphrow.inc.php
View File

@@ -38,8 +38,8 @@ else {
}//end if }//end if
if($_SESSION['screen_width']) { if($_SESSION['screen_width']) {
if($_SESSION['screen_width'] >= 800) { if($_SESSION['screen_width'] > 800) {
$graph_array['width'] = ($_SESSION['screen_width'] - 420 )/count($periods)+1; $graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1;
} }
else { else {
$graph_array['width'] = $_SESSION['screen_width'] - 155; $graph_array['width'] = $_SESSION['screen_width'] - 155;
@@ -47,7 +47,12 @@ if($_SESSION['screen_width']) {
} }
if($_SESSION['screen_height']) { 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;
}
} }

2
html/pages/device.inc.php
View File

@@ -33,7 +33,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
} }
echo '<div class="panel panel-default">'; 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'; require 'includes/device-header.inc.php';
echo '</table>'; echo '</table>';
echo '</div>'; echo '</div>';