JS UI improvements

Improve display on very narrow displays
Add section subheadings
This commit is contained in:
RunasSudo 2021-01-06 02:33:41 +11:00
parent eb19b9dc8b
commit 1316c82c35
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 44 additions and 18 deletions

View File

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

View File

@ -33,6 +33,11 @@ body {
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
.menudiv .subheading {
font-size: 0.8em;
font-weight: bold;
}
.cols-12 { .cols-12 {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
@ -42,6 +47,12 @@ body {
.col-6 { grid-column-end: span 6; } .col-6 { grid-column-end: span 6; }
.col-12 { grid-column-end: span 12; } .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 */ /* Count table */
table { table {