From 4dd5ec41f93cdb8434e5d98bfda636d5d25ef2fb Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Tue, 5 Jan 2021 21:07:40 +1100
Subject: [PATCH] Ditto

---
 html/index.html | 234 ++++++++++++++++++++++++++----------------------
 html/index.js   |   2 +-
 html/main.css   |  11 ++-
 3 files changed, 134 insertions(+), 113 deletions(-)

diff --git a/html/index.html b/html/index.html
index f2d1f90..42cfa39 100644
--- a/html/index.html
+++ b/html/index.html
@@ -44,110 +44,104 @@
 		</div>
 		
 		<div id="divAdvancedOptions" class="menudiv" style="display: none;">
-			<label class="padafter">
-				Numbers:
-				<select id="selNumbers">
-					<option value="native">Native</option>
-					<option value="rational">Rational</option>
-					<option value="fixed" selected>Fixed</option>
-				</select>
-			</label>
-			<label>
-				Decimal places (if Numbers = Fixed):
-				<input type="number" id="txtDP" value="5" style="width: 3em;">
-			</label>
-			<br>
-			<label>
-				Quota:
-				<select id="selQuotaCriterion">
-					<option value="geq" selected>&gt;=</option>
-					<option value="gt">&gt;</option>
-				</select>
-			</label>
-			<label>
-				<select id="selQuota">
-					<option value="droop" selected>Droop</option>
-					<option value="droop_exact">Droop (exact)</option>
-					<option value="hare">Hare</option>
-					<option value="hare_exact">Hare (exact)</option>
-				</select>
-			</label>
-			<label class="padafter">
-				<select id="selQuotaMode">
-					<option value="static" selected>Static quota</option>
-					<option value="progressive">Progressive quota</option>
-					<option value="ers97">Static with ERS97 rules</option>
-				</select>
-			</label>
-			<label class="padafter">
+			<div class="col-6">
+				<label>
+					Numbers:
+					<select id="selNumbers">
+						<option value="native">Native</option>
+						<option value="rational">Rational</option>
+						<option value="fixed" selected>Fixed</option>
+					</select>
+				</label>
+				<label>
+					Decimal places (if Numbers = Fixed):
+					<input type="number" id="txtDP" value="5" style="width: 3em;">
+				</label>
+			</div>
+			<label class="col-3">
 				<input type="checkbox" id="chkBulkElection" checked>
 				Bulk election
 			</label>
-			<label class="padafter">
+			<label class="col-3">
 				<input type="checkbox" id="chkBulkExclusion">
 				Bulk exclusion
 			</label>
-			<label class="padafter">
+			<!-- Row -->
+			<div class="col-6">
+				<label>
+					Quota:
+					<select id="selQuotaCriterion">
+						<option value="geq" selected>&gt;=</option>
+						<option value="gt">&gt;</option>
+					</select>
+				</label>
+				<label>
+					<select id="selQuota">
+						<option value="droop" selected>Droop</option>
+						<option value="droop_exact">Droop (exact)</option>
+						<option value="hare">Hare</option>
+						<option value="hare_exact">Hare (exact)</option>
+					</select>
+				</label>
+				<label>
+					<select id="selQuotaMode">
+						<option value="static" selected>Static quota</option>
+						<option value="progressive">Progressive quota</option>
+						<option value="ers97">Static with ERS97 rules</option>
+					</select>
+				</label>
+			</div>
+			<label class="col-6">
 				<input type="checkbox" id="chkDeferSurpluses">
 				Defer surpluses
 			</label>
-			<br>
-			<label>
-				<input type="checkbox" id="chkRoundQuota" checked>
-				Round quota to
-			</label>
-			<label class="padafter">
-				<input type="number" id="txtRoundQuota" value="0" min="0" style="width: 3em;">
-				d.p.
-			</label>
-			<label>
-				<input type="checkbox" id="chkRoundVotes">
-				Round votes to
-			</label>
-			<label class="padafter">
-				<input type="number" id="txtRoundVotes" value="0" min="0" style="width: 3em;">
-				d.p.
-			</label>
-			<label>
-				<input type="checkbox" id="chkRoundTVs">
-				Round transfer values to
-			</label>
-			<label class="padafter">
-				<input type="number" id="txtRoundTVs" value="0" min="0" style="width: 3em;">
-				d.p.
-			</label>
-			<label>
-				<input type="checkbox" id="chkRoundWeights">
-				Round ballot weights to
-			</label>
-			<label>
-				<input type="number" id="txtRoundWeights" value="0" min="0" style="width: 3em;">
-				d.p.
-			</label>
-			<br>
-			<label class="padafter">
-				Surplus order:
-				<select id="selSurplus">
-					<option value="size" selected>By size</option>
-					<option value="order">By order</option>
-				</select>
-			</label>
-			<label>
-				Method:
-				<select id="selTransfers">
-					<option value="wig" selected>Weighted inclusive Gregory</option>
-					<option value="uig">Unweighted inclusive Gregory</option>
-					<option value="eg">Exclusive Gregory (last bundle)</option>
-					<option value="wright">Wright STV</option>
-				</select>
-			</label>
-			<label class="padafter">
-				<select id="selPapers">
-					<option value="both" selected>Include non-transferable papers</option>
-					<option value="transferable">Use transferable papers only</option>
-				</select>
-			</label>
-			<label>
+			<!-- Row -->
+			<div class="col-6">
+				<label>
+					Surplus order:
+					<select id="selSurplus">
+						<option value="size" selected>By size</option>
+						<option value="order">By order</option>
+					</select>
+				</label>
+				<label>
+					Method:
+					<select id="selTransfers">
+						<option value="wig" selected>Weighted inclusive Gregory</option>
+						<option value="uig">Unweighted inclusive Gregory</option>
+						<option value="eg">Exclusive Gregory (last bundle)</option>
+						<option value="wright">Wright STV</option>
+					</select>
+				</label>
+				<label>
+					<select id="selPapers">
+						<option value="both" selected>Include non-transferable papers</option>
+						<option value="transferable">Use transferable papers only</option>
+					</select>
+				</label>
+			</div>
+			<div class="col-3">
+				<label>
+					<input type="checkbox" id="chkRoundQuota" checked>
+					Round quota to
+				</label>
+				<label>
+					<input type="number" id="txtRoundQuota" value="0" min="0" style="width: 3em;">
+					d.p.
+				</label>
+			</div>
+			<div class="col-3">
+				<label>
+					<input type="checkbox" id="chkRoundVotes">
+					Round votes to
+				</label>
+				<label>
+					<input type="number" id="txtRoundVotes" value="0" min="0" style="width: 3em;">
+					d.p.
+				</label>
+			</div>
+			<!-- Row -->
+			<label class="col-6">
 				Exclusion:
 				<select id="selExclusion">
 					<option value="one_round" selected>Exclude in one round</option>
@@ -157,20 +151,42 @@
 					<option value="wright">Wright method (re-iterate)</option>
 				</select>
 			</label>
-			<br>
-			<label class="padafter">
-				Ties:
-				<select id="selTies">
-					<option value="backwards_random" selected>Backwards then random</option>
-					<option value="forwards_random">Forwards then random</option>
-					<option value="random">Random</option>
-					<option value="prompt">Prompt</option>
-				</select>
-			</label>
-			<label>
-				Random seed:
-				<input type="text" id="txtSeed" value="">
-			</label>
+			<div class="col-3">
+				<label>
+					<input type="checkbox" id="chkRoundTVs">
+					Round transfer values to
+				</label>
+				<label>
+					<input type="number" id="txtRoundTVs" value="0" min="0" style="width: 3em;">
+					d.p.
+				</label>
+			</div>
+			<div class="col-3">
+				<label>
+					<input type="checkbox" id="chkRoundWeights">
+					Round ballot weights to
+				</label>
+				<label>
+					<input type="number" id="txtRoundWeights" value="0" min="0" style="width: 3em;">
+					d.p.
+				</label>
+			</div>
+			<!-- Row -->
+			<div class="col-6">
+				<label>
+					Ties:
+					<select id="selTies">
+						<option value="backwards_random" selected>Backwards then random</option>
+						<option value="forwards_random">Forwards then random</option>
+						<option value="random">Random</option>
+						<option value="prompt">Prompt</option>
+					</select>
+				</label>
+				<label>
+					Random seed:
+					<input type="text" id="txtSeed" value="">
+				</label>
+			</div>
 		</div>
 		
 		<table id="result"></table>
diff --git a/html/index.js b/html/index.js
index 4915c8e..eed42cc 100644
--- a/html/index.js
+++ b/html/index.js
@@ -18,7 +18,7 @@
 
 function clickAdvancedOptions() {
 	if (document.getElementById('divAdvancedOptions').style.display === 'none') {
-		document.getElementById('divAdvancedOptions').style.display = 'block';
+		document.getElementById('divAdvancedOptions').style.display = 'grid';
 		document.getElementById('btnAdvancedOptions').innerHTML = 'Hide advanced options';
 	} else {
 		document.getElementById('divAdvancedOptions').style.display = 'none';
diff --git a/html/main.css b/html/main.css
index 5012a91..19a1069 100644
--- a/html/main.css
+++ b/html/main.css
@@ -33,6 +33,14 @@ body {
 	padding-bottom: 0.5em;
 }
 
+#divAdvancedOptions {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+}
+
+.col-3 { grid-column-end: span 3; }
+.col-6 { grid-column-end: span 6; }
+
 /* Count table */
 
 table {
@@ -145,6 +153,3 @@ select:focus, input:focus {
 label {
 	white-space: nowrap;
 }
-label.padafter {
-	margin-right: 1.5em;
-}