- Wrap form parts in panels

- Improved some form-groups
- Add .checkbox helper to form-groups containing checkboxes

1 files changed, 141 insertions, 116 deletions

diff --git a/usr/local/www/system.php b/usr/local/www/system.php
index 9326db5..91bc8b6 100644
--- a/usr/local/www/system.php
+++ b/usr/local/www/system.php
@@ -296,39 +296,49 @@ if ($savemsg)
 ?>
 <div id="container">
 	<form class="form-horizontal" action="system.php" method="post">
-		<h2><?=gettext("System"); ?></h2>
-		<div class="form-group">
-			<label for="hostname" class="col-sm-2 control-label"><?=gettext("Hostname"); ?></label>
-			<div class="col-sm-10">
-				<input type="text" class="form-control" id="hostname" value="<?=htmlspecialchars($pconfig['hostname']);?>" placeholder="firewall">
-				<span class="help-block">
-					<?=gettext("Name of the firewall host, without domain part"); ?>
-				</span>
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				<h2 class="panel-title"><?=gettext("System"); ?></h2>
 			</div>
-		</div>
 
-		<div class="form-group">
-			<label for="domain" class="col-sm-2 control-label"><?=gettext("Domain"); ?></label>
-			<div class="col-sm-10">
-				<input type="text" class="form-control" id="domain" value="<?=htmlspecialchars($pconfig['domain']);?>" placeholder="mycorp.com, home, office, private, etc.">
-				<span class="help-block">
-					<?=gettext("Do not use 'local' as a domain name. It will cause local hosts running mDNS (avahi, bonjour, etc.) to be unable to resolve local hosts not running mDNS."); ?>
-				</span>
+			<div class="panel-body">
+				<div class="form-group">
+					<label for="hostname" class="col-sm-2 control-label"><?=gettext("Hostname"); ?></label>
+					<div class="col-sm-10">
+						<input type="text" class="form-control" id="hostname" value="<?=htmlspecialchars($pconfig['hostname']);?>" placeholder="firewall">
+						<span class="help-block">
+							<?=gettext("Name of the firewall host, without domain part"); ?>
+						</span>
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label for="domain" class="col-sm-2 control-label"><?=gettext("Domain"); ?></label>
+					<div class="col-sm-10">
+						<input type="text" class="form-control" id="domain" value="<?=htmlspecialchars($pconfig['domain']);?>" placeholder="mycorp.com, home, office, private, etc.">
+						<span class="help-block">
+							<?=gettext("Do not use 'local' as a domain name. It will cause local hosts running mDNS (avahi, bonjour, etc.) to be unable to resolve local hosts not running mDNS."); ?>
+						</span>
+					</div>
+				</div>
 			</div>
 		</div>
 
-		<h2><?=gettext("DNS server settings"); ?></h2>
-		<div class="form-group">
-			<?php for ($dnscounter=1; $dnscounter<5; $dnscounter++): ?>
-				<label for="dns_server_<?=$dnscounter?>" class="col-sm-2 control-label"><?=gettext("DNS Server"); ?></label>
-				<div class="input-group row col-sm-10">
-					<div class="col-xs-4">
-						<input type="text" class="form-control" id="dns_server_<?=$dnscounter?>" value="<?=htmlspecialchars($pconfig['dns'.$dnscounter]);?>">
-					</div>
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				<h2 class="panel-title"><?=gettext("DNS server settings"); ?></h2>
+			</div>
 
-					<?php if ($multiwan): ?>
-						<div class="col-xs-4">
-							<select class="form-control" name="<?=$fldname;?>">
+			<div class="panel-body">
+				<?php for ($dnscounter=1; $dnscounter<5; $dnscounter++): ?>
+					<div class="form-group">
+						<label for="dns_server_<?=$dnscounter?>" class="col-sm-2 control-label"><?=gettext("DNS Server"); ?></label>
+						<div class="col-sm-4">
+							<input type="text" class="form-control" id="dns_server_<?=$dnscounter?>" value="<?=htmlspecialchars($pconfig['dns'.$dnscounter]);?>">
+						</div>
+						<div class="col-sm-3">
+						<?php if ($multiwan): ?>
+							<select name='<?=$fldname;?>' class="form-control">
 								<?php
 									$gwname = "none";
 									$dnsgw = "dns{$dnscounter}gw";
@@ -355,108 +365,123 @@ if ($savemsg)
 									}
 								?>
 							</select>
+						<?php endif; ?>
 						</div>
-					<?php endif; ?>
+					</div>
+				<?php endfor; ?>
+
+				<div class="form-group">
+					<span class="help-block col-sm-10 col-sm-offset-2">
+						<p>
+						<?=gettext("Enter IP addresses to be used by the system for DNS resolution. " .
+								"These are also used for the DHCP service, DNS forwarder and for PPTP VPN clients."); ?>
+						</p>
+						<?php if($multiwan): ?>
+							<p>
+							<?=gettext("In addition, optionally select the gateway for each DNS server. " .
+									"When using multiple WAN connections there should be at least one unique DNS server per gateway."); ?>
+							</p>
+						<?php endif; ?>
+					</span>
 				</div>
-			<?php endfor; ?>
-
-			<span class="help-block">
-				<?=gettext("Enter IP addresses to be used by the system for DNS resolution. " .
-							"These are also used for the DHCP service, DNS forwarder and for PPTP VPN clients."); ?>
-				<br />
-				<?php if($multiwan): ?>
-				<br />
-				<?=gettext("In addition, optionally select the gateway for each DNS server. " .
-							"When using multiple WAN connections there should be at least one unique DNS server per gateway."); ?>
-				<br />
-				<?php endif; ?>
-			</span>
-		</div>
 
-		<div class="form-group">
-			<label for="dnsallowoverride" class="col-sm-2 control-label"><?=gettext("DNS server override")?></label>
-			<div class="col-sm-10">
-				<input name="dnsallowoverride" type="checkbox" id="dnsallowoverride" value="yes" <?php if ($pconfig['dnsallowoverride']) echo "checked=\"checked\""; ?> />
-				<label for="dnsallowoverride" ><?=gettext("Allow DNS server list to be overridden by DHCP/PPP on WAN"); ?></label>
-				<span class="help-block">
-					<?php printf(gettext("If this option is set, %s will " .
-					"use DNS servers assigned by a DHCP/PPP server on WAN " .
-					"for its own purposes (including the DNS forwarder). " .
-					"However, they will not be assigned to DHCP and PPTP " .
-					"VPN clients."), $g['product_name']); ?>
-				</span>
-			</div>
-		</div>
+				<div class="form-group">
+					<label for="dnsallowoverride" class="col-sm-2 control-label"><?=gettext("DNS server override")?></label>
+					<div class="col-sm-10 checkbox">
+						<label for="dnsallowoverride" >
+							<input type="checkbox" id="dnsallowoverride" value="yes" <?php if ($pconfig['dnsallowoverride']) echo "checked=\"checked\""; ?> />
+							<?=gettext("Allow DNS server list to be overridden by DHCP/PPP on WAN"); ?>
+						</label>
+						<span class="help-block">
+							<?php printf(gettext("If this option is set, %s will " .
+							"use DNS servers assigned by a DHCP/PPP server on WAN " .
+							"for its own purposes (including the DNS forwarder). " .
+							"However, they will not be assigned to DHCP and PPTP " .
+							"VPN clients."), $g['product_name']); ?>
+						</span>
+					</div>
+				</div>
 
-		<div class="form-group">
-			<label for="dnslocalhost" class="col-sm-2 control-label"><?=gettext("Disable DNS forwarder"); ?></label>
-			<div class="col-sm-10">
-				<input name="dnslocalhost" type="checkbox" id="dnslocalhost" value="yes" <?php if ($pconfig['dnslocalhost']) echo "checked=\"checked\""; ?> />
-				<label for="dnslocalhost" ><?=gettext("Do not use the DNS Forwarder as a DNS server for the firewall"); ?></label>
-				<span class="help-block">
-					<?=gettext("By default localhost (127.0.0.1) will be used as the first DNS server where the DNS Forwarder or DNS Resolver is enabled and set to listen on Localhost, so system can use the local DNS service to perform lookups. ".
-						"Checking this box omits localhost from the list of DNS servers."); ?>
-				</span>
+				<div class="form-group">
+					<label for="dnslocalhost" class="col-sm-2 control-label"><?=gettext("Disable DNS forwarder"); ?></label>
+					<div class="col-sm-10 checkbox">
+						<label>
+							<input name="dnslocalhost" type="checkbox" id="dnslocalhost" value="yes" <?php if ($pconfig['dnslocalhost']) echo "checked=\"checked\""; ?> />
+							<?=gettext("Do not use the DNS Forwarder as a DNS server for the firewall"); ?>
+						</label>
+						<span class="help-block">
+							<?=gettext("By default localhost (127.0.0.1) will be used as the first DNS server where the DNS Forwarder or DNS Resolver is enabled and set to listen on Localhost, so system can use the local DNS service to perform lookups. ".
+								"Checking this box omits localhost from the list of DNS servers."); ?>
+						</span>
+					</div>
+				</div>
 			</div>
 		</div>
 
-		<h2><?=gettext("Localization"); ?></h2>
-		<div class="form-group">
-			<label for="timezone" class="col-sm-2 control-label"><?=gettext("Time zone"); ?></label>
-			<div class="col-sm-10">
-				<select name="timezone" id="timezone" class="form-control">
-					<?php foreach ($timezonelist as $value): ?>
-					<?php if(strstr($value, "GMT")) continue; ?>
-					<option value="<?=htmlspecialchars($value);?>" <?php if ($value == $pconfig['timezone']) echo "selected=\"selected\""; ?>>
-						<?=htmlspecialchars($value);?>
-					</option>
-					<?php endforeach; ?>
-				</select>
-
-				<span class="help-block">
-					<?=gettext("Select the location closest to you"); ?>
-				</span>
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				<h2 class="panel-title"><?=gettext("Localization"); ?></h2>
 			</div>
-		</div>
 
-		<div class="form-group">
-			<label for="timeservers" class="col-sm-2 control-label"><?=gettext("NTP time server"); ?></label>
-			<div class="col-sm-10">
-				<input name="timeservers" type="text" id="timeservers" value="<?=htmlspecialchars($pconfig['timeservers']);?>" class="form-control" />
+			<div class="panel-body">
+				<div class="form-group">
+					<label for="timezone" class="col-sm-2 control-label"><?=gettext("Time zone"); ?></label>
+					<div class="col-sm-10">
+						<select name="timezone" id="timezone" class="form-control">
+							<?php foreach ($timezonelist as $value): ?>
+							<?php if(strstr($value, "GMT")) continue; ?>
+							<option value="<?=htmlspecialchars($value);?>" <?php if ($value == $pconfig['timezone']) echo "selected=\"selected\""; ?>>
+								<?=htmlspecialchars($value);?>
+							</option>
+							<?php endforeach; ?>
+						</select>
+
+						<span class="help-block">
+							<?=gettext("Select the location closest to you"); ?>
+						</span>
+					</div>
+				</div>
 
-				<span class="help-block">
-					<?=gettext("Use a space to separate multiple hosts (only one " .
-						"required). Remember to set up at least one DNS server " .
-						"if you enter a host name here!"); ?>
-				</span>
-			</div>
-		</div>
+				<div class="form-group">
+					<label for="timeservers" class="col-sm-2 control-label"><?=gettext("NTP time server"); ?></label>
+					<div class="col-sm-10">
+						<input name="timeservers" type="text" id="timeservers" value="<?=htmlspecialchars($pconfig['timeservers']);?>" class="form-control" />
 
-		<div class="form-group">
-			<label for="language" class="col-sm-2 control-label"><?=gettext("Language"); ?></label>
-			<div class="col-sm-10">
-				<select name="language" class="form-control">
-					<?php
-					foreach(get_locale_list() as $lcode => $ldesc) {
-						$selected = ' selected="selected"';
-						if($lcode != $pconfig['language'])
-							$selected = '';
-						echo "<option value=\"{$lcode}\"{$selected}>{$ldesc}</option>";
-					}
-					?>
-				</select>
+						<span class="help-block">
+							<?=gettext("Use a space to separate multiple hosts (only one " .
+							"required). Remember to set up at least one DNS server " .
+							"if you enter a host name here!"); ?>
+						</span>
+					</div>
+				</div>
 
-				<span class="help-block">
-						<?=gettext("Choose a language for the webConfigurator"); ?>
-				</span>
-			</div>
-		</div>
+				<div class="form-group">
+					<label for="language" class="col-sm-2 control-label"><?=gettext("Language"); ?></label>
+					<div class="col-sm-10">
+						<select name="language" class="form-control">
+							<?php
+							foreach(get_locale_list() as $lcode => $ldesc) {
+								$selected = ' selected="selected"';
+								if($lcode != $pconfig['language'])
+									$selected = '';
+								echo "<option value=\"{$lcode}\"{$selected}>{$ldesc}</option>";
+							}
+							?>
+						</select>
+
+						<span class="help-block">
+								<?=gettext("Choose a language for the webConfigurator"); ?>
+						</span>
+					</div>
+				</div>
 
-		<div class="form-group">
-			<div class="col-sm-offset-2 col-sm-10">
-				<button type="submit" class="btn btn-primary"><?=gettext("Save");?></button>
+				<div class="form-group">
+					<div class="col-sm-offset-2 col-sm-10">
+						<button type="submit" class="btn btn-primary"><?=gettext("Save");?></button>
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
-</form>
+	</form>
+</div>
 <?php include("foot.inc"); ?>
\ No newline at end of file