zoneconf: reduce the width of inputs for vlanid

Message ID 20190901224729.24567-1-ipfire@starkstromkonsument.de
State Accepted
Commit 7f44ec0478285bc16c5ff9336f604a0e45678130
Headers
Series zoneconf: reduce the width of inputs for vlanid |

Commit Message

Alexander Koch Sept. 1, 2019, 10:47 p.m. UTC
  The inputs for the vlanids are overlapping the borders of their cells (using a recent Firefox on Linux Mint, Android or Windows 7). This patch fixes this by limiting the width to a fixed value.

Signed-off-by: Alex Koch <ipfire@starkstromkonsument.de>
---
 html/cgi-bin/zoneconf.cgi | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)
  

Comments

Michael Tremer Sept. 2, 2019, 11:32 a.m. UTC | #1
Hi,

Just for my own illustration, could you send a screenshot?

Best,
-Michael

> On 1 Sep 2019, at 23:47, Alex Koch <ipfire@starkstromkonsument.de> wrote:
> 
> The inputs for the vlanids are overlapping the borders of their cells (using a recent Firefox on Linux Mint, Android or Windows 7). This patch fixes this by limiting the width to a fixed value.
> 
> Signed-off-by: Alex Koch <ipfire@starkstromkonsument.de>
> ---
> html/cgi-bin/zoneconf.cgi | 6 +++++-
> 1 file changed, 5 insertions(+), 1 deletion(-)
> 
> diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
> index 40239c14e..6b8642818 100644
> --- a/html/cgi-bin/zoneconf.cgi
> +++ b/html/cgi-bin/zoneconf.cgi
> @@ -93,6 +93,10 @@ my $css = <<END
> 		text-align: center;
> 	}
> 
> +	input.vlanid {
> +		width: 4em;
> +	}
> +
> 	#submit-container {
> 		width: 100%;
> 		padding-top: 20px;
> @@ -432,7 +436,7 @@ foreach (@nics) {
> 					<option value="NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
> 					<option value="VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>
> 				</select>
> -				<input type="number" id="TAG $uc $mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
> +				<input type="number" class="vlanid" id="TAG $uc $mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
> 			</td>
> END
> ;
> -- 
> 2.17.1
>
  
Alexander Koch Sept. 3, 2019, 6:50 p.m. UTC | #2
Hi,

the Problem occurs if you use four zones and the "ipfire-legacy"-Theme. 
But the "ipfire"-Theme also renders the vlanid-input pretty wide and 
wraps the line inside the cell. There actually is no need for this, as 
an VLAN-ID has a maximum length of four digits.

Some Screenshots: https://starkstromlahn.spdns.org/s/qb4iFZmxCQqxb7f

Regards, Alex


-------- Original Message --------
From: Michael Tremer [mailto:michael.tremer@ipfire.org]
Sent: Monday, 2 September 2019, 13:32 CEST
To: Alex Koch <ipfire@starkstromkonsument.de>
Cc: development@lists.ipfire.org
Subject: [PATCH] zoneconf: reduce the width of inputs for vlanid

Hi,

Just for my own illustration, could you send a screenshot?

Best,
-Michael

On 1 Sep 2019, at 23:47, Alex Koch <ipfire@starkstromkonsument.de> wrote:

The inputs for the vlanids are overlapping the borders of their cells 
(using a recent Firefox on Linux Mint, Android or Windows 7). This patch 
fixes this by limiting the width to a fixed value.

Signed-off-by: Alex Koch <ipfire@starkstromkonsument.de>
---
html/cgi-bin/zoneconf.cgi | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
index 40239c14e..6b8642818 100644
--- a/html/cgi-bin/zoneconf.cgi
+++ b/html/cgi-bin/zoneconf.cgi
@@ -93,6 +93,10 @@ my $css = <<END
		text-align: center;
	}

+	input.vlanid {
+		width: 4em;
+	}
+
	#submit-container {
		width: 100%;
		padding-top: 20px;
@@ -432,7 +436,7 @@ foreach (@nics) {
					<option value="NATIVE" 
$access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
					<option value="VLAN" $access_selected{"VLAN"} 
$vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>
				</select>
-				<input type="number" id="TAG $uc $mac" name="TAG $uc $mac" min="1" 
max="4095" value="$zone_vlan_id" $field_disabled>
+				<input type="number" class="vlanid" id="TAG $uc $mac" name="TAG $uc 
$mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
			</td>
END
;
  
Michael Tremer Sept. 5, 2019, 9:33 a.m. UTC | #3
Hi,

> On 3 Sep 2019, at 19:50, Alexander Koch <ipfire@starkstromkonsument.de> wrote:
> 
> Hi,
> 
> the Problem occurs if you use four zones and the "ipfire-legacy"-Theme. But the "ipfire"-Theme also renders the vlanid-input pretty wide and wraps the line inside the cell. There actually is no need for this, as an VLAN-ID has a maximum length of four digits.
> 
> Some Screenshots: https://starkstromlahn.spdns.org/s/qb4iFZmxCQqxb7f

The old theme is practically unmaintainable, but good to take a little bit of care here as well.

Acked-by: Michael Tremer <michael.tremer@ipfire.org>

-Michael

> 
> Regards, Alex
> 
> 
> -------- Original Message --------
> From: Michael Tremer [mailto:michael.tremer@ipfire.org]
> Sent: Monday, 2 September 2019, 13:32 CEST
> To: Alex Koch <ipfire@starkstromkonsument.de>
> Cc: development@lists.ipfire.org
> Subject: [PATCH] zoneconf: reduce the width of inputs for vlanid
> 
> Hi,
> 
> Just for my own illustration, could you send a screenshot?
> 
> Best,
> -Michael
> 
> On 1 Sep 2019, at 23:47, Alex Koch <ipfire@starkstromkonsument.de> wrote:
> 
> The inputs for the vlanids are overlapping the borders of their cells (using a recent Firefox on Linux Mint, Android or Windows 7). This patch fixes this by limiting the width to a fixed value.
> 
> Signed-off-by: Alex Koch <ipfire@starkstromkonsument.de>
> ---
> html/cgi-bin/zoneconf.cgi | 6 +++++-
> 1 file changed, 5 insertions(+), 1 deletion(-)
> 
> diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
> index 40239c14e..6b8642818 100644
> --- a/html/cgi-bin/zoneconf.cgi
> +++ b/html/cgi-bin/zoneconf.cgi
> @@ -93,6 +93,10 @@ my $css = <<END
> 		text-align: center;
> 	}
> 
> +	input.vlanid {
> +		width: 4em;
> +	}
> +
> 	#submit-container {
> 		width: 100%;
> 		padding-top: 20px;
> @@ -432,7 +436,7 @@ foreach (@nics) {
> 					<option value="NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
> 					<option value="VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>
> 				</select>
> -				<input type="number" id="TAG $uc $mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
> +				<input type="number" class="vlanid" id="TAG $uc $mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
> 			</td>
> END
> ;
> -- 
> 2.17.1
> 
> 
>
  

Patch

diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
index 40239c14e..6b8642818 100644
--- a/html/cgi-bin/zoneconf.cgi
+++ b/html/cgi-bin/zoneconf.cgi
@@ -93,6 +93,10 @@  my $css = <<END
 		text-align: center;
 	}
 
+	input.vlanid {
+		width: 4em;
+	}
+
 	#submit-container {
 		width: 100%;
 		padding-top: 20px;
@@ -432,7 +436,7 @@  foreach (@nics) {
 					<option value="NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
 					<option value="VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>
 				</select>
-				<input type="number" id="TAG $uc $mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
+				<input type="number" class="vlanid" id="TAG $uc $mac" name="TAG $uc $mac" min="1" max="4095" value="$zone_vlan_id" $field_disabled>
 			</td>
 END
 ;