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,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>

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