Improve JS client CSS on smaller displays
This commit is contained in:
parent
4dd5ec41f9
commit
eb19b9dc8b
280
html/index.html
280
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>>=</option>
|
||||
<option value="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>>=</option>
|
||||
<option value="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>
|
||||
|
||||
|
@ -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 */
|
||||
|
||||
|
Reference in New Issue
Block a user