From mboxrd@z Thu Jan  1 00:00:00 1970
From: Leo-Andres Hofmann <hofmann@leo-andres.de>
To: development@lists.ipfire.org
Subject: [PATCH 3/4] zoneconf.cgi: Improve CSS
Date: Tue, 17 Nov 2020 07:29:03 +0100
Message-ID: <20201117062904.1547-3-hofmann@leo-andres.de>
In-Reply-To: <20201117062904.1547-1-hofmann@leo-andres.de>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============5194829733831693322=="
List-Id: <development.lists.ipfire.org>

--===============5194829733831693322==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

- Add an element id so that the styling only affects the zone table
- Alternating row colors are now generated by CSS, remove unneeded Perl code

Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
---
 html/cgi-bin/zoneconf.cgi | 73 ++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 40 deletions(-)

diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
index 2346aa829..ef361af95 100644
--- a/html/cgi-bin/zoneconf.cgi
+++ b/html/cgi-bin/zoneconf.cgi
@@ -28,63 +28,64 @@ require "${General::swroot}/header.pl";
=20
 my $css =3D <<END
 <style>
-	table {
+	table#zoneconf {
 		width: 100%;
 		border-collapse: collapse;
 		table-layout: fixed;
 	}
=20
-	tr {
+	#zoneconf tr {
 		height: 4em;
 	}
=20
-	td.narrow {
-		width: 11em;
+	#zoneconf td {
+		padding: 5px 10px;
+		border: 0.5px solid black;
+		text-align: center;
 	}
=20
-	td {
-		padding: 5px;
-		padding-left: 10px;
-		padding-right: 10px;
-		border: 0.5px solid black;
+	/* dark grey header cells */
+	#zoneconf td.heading {
+		background-color: grey;
+		color: white;
+	}=09
+	#zoneconf td.heading::first-line {
+		font-weight: bold;
+		line-height: 1.6;
 	}
=20
-	td.slightlygrey {
-		background-color: #F0F0F0;
+	/* narrow left column */
+	#zoneconf tr > td:first-child {
+		width: 11em;
 	}
=20
-	td.h {
-		background-color: grey;
-		color: white;
-		font-weight: 800;
+	/* alternating row background color */
+	#zoneconf tr:nth-child(2n+3) {
+		background-color: #F0F0F0;
 	}
=20
-	td.green {
+	#zoneconf td.green {
 		background-color: $Header::colourgreen;
 	}
=20
-	td.red {
+	#zoneconf td.red {
 		background-color: $Header::colourred;
 	}
=20
-	td.blue {
+	#zoneconf td.blue {
 		background-color: $Header::colourblue;
 	}
=20
-	td.orange {
+	#zoneconf td.orange {
 		background-color: $Header::colourorange;
 	}
=20
-	td.topleft {
-		background-color: white;
+	#zoneconf td.topleft {
+		background-color: $Header::pagecolour;
 		border-top-style: none;
 		border-left-style: none;
 	}
=20
-	td.textcenter {
-		text-align: center;
-	}
-
 	input.vlanid {
 		width: 4em;
 	}
@@ -299,9 +300,9 @@ if ($cgiparams{"ACTION"} eq $Lang::tr{"save"}) {
=20
 print <<END
 <form method=3D'post' enctype=3D'multipart/form-data'>
-	<table>
+	<table id=3D"zoneconf">
 	<tr>
-		<td class=3D"h narrow topleft"></td>
+		<td class=3D"topleft"></td>
 END
 ;
=20
@@ -320,7 +321,7 @@ foreach (@zones) {
 		my $red_restricted =3D ($uc eq "RED" && ! ($red_type eq "STATIC" || $red_t=
ype eq "DHCP"));
=20
 		if ($red_restricted) {
-			print "\t\t<td class=3D'h textcenter $_'>$uc ($red_type)</td>\n";
+			print "\t\t<td class=3D'heading $_'>$uc ($red_type)</td>\n";
=20
 			next; # We're done here
 		}
@@ -338,7 +339,7 @@ foreach (@zones) {
 	}
=20
 	print <<END
-		<td class=3D'h textcenter $_'>$uc<br>
+		<td class=3D'heading $_'>$uc<br>
 			<select name=3D"MODE $uc">
 				<option value=3D"DEFAULT" $mode_selected{"DEFAULT"}>$Lang::tr{"zoneconf =
nicmode default"}</option>
 				<option value=3D"BRIDGE" $mode_selected{"BRIDGE"}>$Lang::tr{"zoneconf ni=
cmode bridge"}</option>
@@ -351,15 +352,13 @@ END
=20
 print "\t</tr>\n";
=20
-my $slightlygrey =3D "";
-
 foreach (@nics) {
 	my $mac =3D $_->[0];
 	my $nic =3D $_->[1];
 	my $wlan =3D $_->[2];
=20
 	print "\t<tr>\n";
-	print "\t\t<td class=3D'h narrow textcenter'>$nic<br>$mac</td>\n";
+	print "\t\t<td class=3D'heading'>$nic<br>$mac</td>\n";
=20
 	# Iterate through all zones and check if the current NIC is assigned to it
 	foreach (@zones) {
@@ -383,7 +382,7 @@ foreach (@nics) {
 				}
=20
 				print <<END
-		<td class=3D"textcenter $slightlygrey">
+		<td class=3D"">
 			<input type=3D"radio" name=3D"PPPACCESS" value=3D"$mac" $checked>
 		</td>
 END
@@ -426,7 +425,7 @@ END
 		my $vlan_disabled =3D ($wlan) ? "disabled" : "";
=20
 		print <<END
-		<td class=3D"textcenter $slightlygrey">
+		<td class=3D"">
 			<select name=3D"ACCESS $uc $mac" onchange=3D"document.getElementById('TAG=
-$uc-$mac').disabled =3D (this.value =3D=3D=3D 'VLAN' ? false : true)">
 				<option value=3D"NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf ac=
cess none"} -</option>
 				<option value=3D"NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf =
access native"}</option>
@@ -439,12 +438,6 @@ END
 	}
=20
 	print "\t</tr>\n";
-
-	if ($slightlygrey) {
-		$slightlygrey =3D "";
-	} else {
-		$slightlygrey =3D "slightlygrey";
-	}
 }
=20
 print <<END
--=20
2.27.0.windows.1


--===============5194829733831693322==--