From eb19b9dc8bf67bbb654bf2c129c2b346f2eecca5 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Wed, 6 Jan 2021 01:38:23 +1100
Subject: [PATCH] Improve JS client CSS on smaller displays

---
 html/index.html | 280 ++++++++++++++++++++++++------------------------
 html/main.css   |   3 +-
 2 files changed, 143 insertions(+), 140 deletions(-)

diff --git a/html/index.html b/html/index.html
index 42cfa39..afff349 100644
--- a/html/index.html
+++ b/html/index.html
@@ -43,149 +43,151 @@
 			<a href="https://yingtongli.me/blog/2020/12/24/pyrcv2.html">Information and instructions</a>
 		</div>
 		
-		<div id="divAdvancedOptions" class="menudiv" style="display: none;">
-			<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 id="divAdvancedOptions" class="menudiv cols-12" style="display: none;">
+			<div class="col-6" style="align-self: start;">
+				<div>
+					<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>
+				<div>
+					<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>
+				<div>
+					<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>
+					<label>
+						Exclusion:
+						<select id="selExclusion">
+							<option value="one_round" selected>Exclude in one round</option>
+							<option value="parcels_by_order">Exclude by parcel (by order)</option>
+							<!--<option value="parcels_by_value">Exclude by parcel (by value)</option>-->
+							<option value="by_value">Exclude by value</option>
+							<option value="wright">Wright method (re-iterate)</option>
+						</select>
+					</label>
+				</div>
+				<div>
+					<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>
-			<label class="col-3">
-				<input type="checkbox" id="chkBulkElection" checked>
-				Bulk election
-			</label>
-			<label class="col-3">
-				<input type="checkbox" id="chkBulkExclusion">
-				Bulk exclusion
-			</label>
-			<!-- Row -->
-			<div class="col-6">
-				<label>
-					Quota:
-					<select id="selQuotaCriterion">
-						<option value="geq" selected>&gt;=</option>
-						<option value="gt">&gt;</option>
-					</select>
+			<div class="col-6 cols-12" style="align-self: start;">
+				<label class="col-6">
+					<input type="checkbox" id="chkBulkElection" checked>
+					Bulk election
 				</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 class="col-6">
+					<input type="checkbox" id="chkBulkExclusion">
+					Bulk exclusion
 				</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>
-			<!-- 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>
-					<option value="parcels_by_order">Exclude by parcel (by order)</option>
-					<!--<option value="parcels_by_value">Exclude by parcel (by value)</option>-->
-					<option value="by_value">Exclude by value</option>
-					<option value="wright">Wright method (re-iterate)</option>
-				</select>
-			</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 class="col-12">
+					<input type="checkbox" id="chkDeferSurpluses">
+					Defer surpluses
 				</label>
+				<div class="col-6">
+					<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-6">
+					<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>
+				<div class="col-6">
+					<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-6">
+					<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>
 			</div>
 		</div>
 		
diff --git a/html/main.css b/html/main.css
index 19a1069..061c834 100644
--- a/html/main.css
+++ b/html/main.css
@@ -33,13 +33,14 @@ body {
 	padding-bottom: 0.5em;
 }
 
-#divAdvancedOptions {
+.cols-12 {
 	display: grid;
 	grid-template-columns: repeat(12, 1fr);
 }
 
 .col-3 { grid-column-end: span 3; }
 .col-6 { grid-column-end: span 6; }
+.col-12 { grid-column-end: span 12; }
 
 /* Count table */