JS UI improvements

Improve display on very narrow displays
Add section subheadings

html/index.html

@@ -43,21 +43,10 @@
 			<a href="https://yingtongli.me/blog/2020/12/24/pyrcv2.html">Information and instructions</a>
 		</div>
 		
-		<div id="divAdvancedOptions" class="menudiv cols-12" style="display: none;">
+		<div id="divAdvancedOptions" class="menudiv cols-12 cols-sm-6" style="display: none;">
 			<div class="col-6" style="align-self: start;">
-				<div>
+				<div class="subheading">
-					<label>
+					Method specification:
-						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>
@@ -119,6 +108,9 @@
 						</select>
 					</label>
 				</div>
+				<div class="subheading">
+					Tie-breaking:
+				</div>
 				<div>
 					<label>
 						Ties:
@@ -136,6 +128,26 @@
 				</div>
 			</div>
 			<div class="col-6 cols-12" style="align-self: start;">
+				<div class="col-12 subheading">
+					Numeric representation:
+				</div>
+				<div class="col-12">
+					<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 class="col-12 subheading">
+					Count optimisations:
+				</div>
 				<label class="col-6">
 					<input type="checkbox" id="chkBulkElection" checked>
 					Bulk election
@@ -148,10 +160,13 @@
 					<input type="checkbox" id="chkDeferSurpluses">
 					Defer surpluses
 				</label>
+				<div class="col-12 subheading">
+					Rounding:
+				</div>
 				<div class="col-6">
 					<label>
 						<input type="checkbox" id="chkRoundQuota" checked>
-						Round quota to
+						Quota:
 					</label>
 					<label>
 						<input type="number" id="txtRoundQuota" value="0" min="0" style="width: 3em;">
@@ -161,7 +176,7 @@
 				<div class="col-6">
 					<label>
 						<input type="checkbox" id="chkRoundVotes">
-						Round votes to
+						Votes:
 					</label>
 					<label>
 						<input type="number" id="txtRoundVotes" value="0" min="0" style="width: 3em;">
@@ -171,7 +186,7 @@
 				<div class="col-6">
 					<label>
 						<input type="checkbox" id="chkRoundTVs">
-						Round transfer values to
+						Transfer values:
 					</label>
 					<label>
 						<input type="number" id="txtRoundTVs" value="0" min="0" style="width: 3em;">
@@ -181,7 +196,7 @@
 				<div class="col-6">
 					<label>
 						<input type="checkbox" id="chkRoundWeights">
-						Round ballot weights to
+						Ballot weights:
 					</label>
 					<label>
 						<input type="number" id="txtRoundWeights" value="0" min="0" style="width: 3em;">

html/main.css

@@ -33,6 +33,11 @@ body {
 	padding-bottom: 0.5em;
 }
 
+.menudiv .subheading {
+	font-size: 0.8em;
+	font-weight: bold;
+}
+
 .cols-12 {
 	display: grid;
 	grid-template-columns: repeat(12, 1fr);
@@ -42,6 +47,12 @@ body {
 .col-6 { grid-column-end: span 6; }
 .col-12 { grid-column-end: span 12; }
 
+@media screen and (max-width: 17.5cm) {
+	.cols-sm-6 {
+		grid-template-columns: repeat(6, 1fr);
+	}
+}
+
 /* Count table */
 
 table {