Improve JS client CSS on smaller displays

This commit is contained in:
RunasSudo 2021-01-06 01:38:23 +11:00
parent 4dd5ec41f9
commit eb19b9dc8b
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 143 additions and 140 deletions

View File

@ -43,8 +43,9 @@
<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">
<div id="divAdvancedOptions" class="menudiv cols-12" style="display: none;">
<div class="col-6" style="align-self: start;">
<div>
<label>
Numbers:
<select id="selNumbers">
@ -58,16 +59,7 @@
<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="col-3">
<input type="checkbox" id="chkBulkExclusion">
Bulk exclusion
</label>
<!-- Row -->
<div class="col-6">
<div>
<label>
Quota:
<select id="selQuotaCriterion">
@ -91,12 +83,7 @@
</select>
</label>
</div>
<label class="col-6">
<input type="checkbox" id="chkDeferSurpluses">
Defer surpluses
</label>
<!-- Row -->
<div class="col-6">
<div>
<label>
Surplus order:
<select id="selSurplus">
@ -120,28 +107,8 @@
</select>
</label>
</div>
<div class="col-3">
<div>
<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>
@ -151,28 +118,8 @@
<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">
<div>
<label>
Ties:
<select id="selTies">
@ -188,6 +135,61 @@
</label>
</div>
</div>
<div class="col-6 cols-12" style="align-self: start;">
<label class="col-6">
<input type="checkbox" id="chkBulkElection" checked>
Bulk election
</label>
<label class="col-6">
<input type="checkbox" id="chkBulkExclusion">
Bulk exclusion
</label>
<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>
<table id="result"></table>

View File

@ -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 */