Cosmetic changes - part deux

Calculate colspans in casenumber of columns change again
"bytes" => "B" to reduce column width

1 files changed, 10 insertions, 5 deletions

diff --git a/src/usr/local/www/firewall_rules.php b/src/usr/local/www/firewall_rules.php
index 0e1e550..d1a1eb5 100644
--- a/src/usr/local/www/firewall_rules.php
+++ b/src/usr/local/www/firewall_rules.php
@@ -348,6 +348,9 @@ if (isset($config['interfaces'][$if]['blockbogons'])) {
 /* Load the counter data of each pf rule. */
 $rulescnt = pfSense_get_pf_rules();
 
+// Update this is you add or remove columns!
+$columns_in_table = 13;
+
 ?>
 <form method="post">
 	<div class="panel panel-default">
@@ -446,7 +449,7 @@ $seps = 0;
 // There can be a separator before any rules are listed
 if ($config['filter']['separator'][strtolower($if)]['sep0']['row'][0] == "fr-1") {
 	print('<tr class="ui-sortable-handle separator">' .
-		'<td bgcolor="#cce5ff" colspan="12">' . '<font color="#002699">' . $config['filter']['separator'][strtolower($if)]['sep0']['text'] . '</font></td>' .
+		'<td bgcolor="#cce5ff" colspan="' . ($columns_in_table -1 ) . '">' . '<font color="#002699">' . $config['filter']['separator'][strtolower($if)]['sep0']['text'] . '</font></td>' .
 		'<td  bgcolor="#cce5ff"><a href="#"><i class="fa fa-trash no-confirm sepdel" title="delete this separator"></i></a></td>' .
 		'</tr>' . "\n");
 }
@@ -764,7 +767,7 @@ for ($i = 0; isset($a_filter[$i]); $i++):
 				if ($rulesep['row']['0'] == "fr" . $nrules) {
 					$cellcolor = $rulesep['color'];
 					print('<tr class="ui-sortable-handle separator">' .
-						'<td class="' . $cellcolor . '" colspan="11">' . '<span class="' . $cellcolor . '">' . $rulesep['text'] . '</span></td>' .
+						'<td class="' . $cellcolor . '" colspan="' . ($columns_in_table -1) . '">' . '<span class="' . $cellcolor . '">' . $rulesep['text'] . '</span></td>' .
 						'<td  class="' . $cellcolor . '"><a href="#"><i class="fa fa-trash no-confirm sepdel" title="delete this separator"></i></a></td>' .
 						'</tr>' . "\n");
 				}
@@ -890,11 +893,11 @@ events.push(function() {
 
 		gColor = 'bg-info';
 		// Inset a temporary bar in which the user can enter some optional text
-		sepcols = $( "#ruletable tr td" ).length - 1;
+		sepcols = $( "#ruletable tr th" ).length - 2;
 
 		$('#ruletable > tbody:last').append('<tr>' +
 			'<td class="' + gColor + '" colspan="' + sepcols + '"><input id="newsep" placeholder="<?=gettext("Enter a description, Save, then drag to final location.")?>" class="col-md-12" type="text" /></td>' +
-			'<td class="' + gColor + '"><button class="btn btn-default btn-sm" id="btnnewsep"><?=gettext("Save")?></button>' +
+			'<td class="' + gColor + '" colspan="2"><button class="btn btn-default btn-sm" id="btnnewsep"><?=gettext("Save")?></button>' +
 			'<button class="btn btn-default btn-sm" id="btncncsep"><?=gettext("Cancel")?></button>' +
 			'&nbsp;&nbsp;&nbsp;&nbsp;' +
 			'&nbsp;&nbsp;<a href="#" id="sepclrblue" value="bg-info"><i class="fa fa-circle text-info"></i></a>' +
@@ -927,9 +930,11 @@ events.push(function() {
 		// user's text and a delete icon
 		$("#btnnewsep").click(function() {
 			var septext = escapeHtml($('#newsep').val());
+			sepcols = $( "#ruletable tr th" ).length - 1;
+
 			$('#ruletable > tbody:last >tr:last').remove();
 			$('#ruletable > tbody:last').append('<tr class="ui-sortable-handle separator">' +
-				'<td class="' + gColor + '" colspan="11">' + '<span class="' + gColor + '">' + septext + '</span></td>' +
+				'<td class="' + gColor + '" colspan="' + sepcols + '">' + '<span class="' + gColor + '">' + septext + '</span></td>' +
 				'<td class="' + gColor + '"><a href="#"><i class="fa fa-trash sepdel"></i></a>' +
 				'</td></tr>');