RunasSudo/pyRCV2
Archived
1
Fork 0
Code Issues Pull Requests Activity

UI improvements for JS client

Browse Source
This commit is contained in:
RunasSudo 2021-01-05 19:47:07 +11:00
parent 7ee56f97f8
commit 36a4e2a9d1
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 152 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
html/index.html
View File

@ -1,44 +1,27 @@
<!--
pyRCV2: Preferential vote counting
Copyright © 2020–2021 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>pyRCV2</title> <title>pyRCV2</title>
<style type="text/css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" />
html, body { <link rel="stylesheet" type="text/css" href="main.css?v=GITVERSION">
font-family: 'Liberation Sans', FreeSans, Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
td {
padding: 0px 8px;
min-height: 1em;
}
td.count {
text-align: right;
}
tr:first-child td {
vertical-align: bottom;
}
td.excluded {
background-color: #fecfcfff;
}
td.elected {
background-color: #d1fca7ff;
}
tr.info td {
background-color: #edededff;
}
i.sep::after {
content: "•";
color: #ccc;
}
.menudiv {
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
</style>
</head> </head>
<body> <body>
<div class="menudiv"> <div class="menudiv">
@ -121,7 +104,7 @@
Round quota to Round quota to
</label> </label>
<label> <label>
<input type="number" id="txtRoundQuota" value="0" style="width: 3em;"> <input type="number" id="txtRoundQuota" value="0" min="0" style="width: 3em;">
d.p. d.p.
</label> </label>
<i class="sep"></i> <i class="sep"></i>
@ -130,7 +113,7 @@
Round votes to Round votes to
</label> </label>
<label> <label>
<input type="number" id="txtRoundVotes" value="0" style="width: 3em;"> <input type="number" id="txtRoundVotes" value="0" min="0" style="width: 3em;">
d.p. d.p.
</label> </label>
<i class="sep"></i> <i class="sep"></i>
@ -139,7 +122,7 @@
Round transfer values to Round transfer values to
</label> </label>
<label> <label>
<input type="number" id="txtRoundTVs" value="0" style="width: 3em;"> <input type="number" id="txtRoundTVs" value="0" min="0" style="width: 3em;">
d.p. d.p.
</label> </label>
<i class="sep"></i> <i class="sep"></i>
@ -148,7 +131,7 @@
Round ballot weights to Round ballot weights to
</label> </label>
<label> <label>
<input type="number" id="txtRoundWeights" value="0" style="width: 3em;"> <input type="number" id="txtRoundWeights" value="0" min="0" style="width: 3em;">
d.p. d.p.
</label> </label>
<br> <br>
@ -206,7 +189,7 @@
<script src="vendor/BigInt_BigRat-a5f89e2.min.js"></script> <script src="vendor/BigInt_BigRat-a5f89e2.min.js"></script>
<script src="vendor/big-6.0.0.min.js"></script> <script src="vendor/big-6.0.0.min.js"></script>
<script src="vendor/sjcl-1.0.8.min.js"></script> <script src="vendor/sjcl-1.0.8.min.js"></script>
<script src="bundle.js"></script> <script src="bundle.js?v=GITVERSION"></script>
<script src="index.js"></script> <script src="index.js?v=GITVERSION"></script>
</body> </body>
</html> </html>

127
html/main.css Normal file
View File

@ -0,0 +1,127 @@
/*
pyRCV2: Preferential vote counting
Copyright © 2020–2021 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
html, body {
font-family: 'Liberation Sans', FreeSans, Helvetica, Arial, sans-serif;
}
body {
padding: 0.5em;
}
/* Menu styling */
i.sep::after {
content: "•";
color: #ccc;
}
.menudiv {
border-bottom: 1px solid #ccc;
line-height: 1.8;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
/* Count table */
table {
border-collapse: collapse;
}
td {
padding: 0px 8px;
min-height: 1em;
}
td.count {
text-align: right;
}
tr:first-child td {
vertical-align: bottom;
}
td.excluded {
background-color: #fecfcfff;
}
td.elected {
background-color: #d1fca7ff;
}
tr.info td {
background-color: #edededff;
}
/* Form styling */
/* Adapted in part from https://github.com/nathansmith/formalize (GPL/MIT) */
select, input, button {
line-height: 1.15;
}
select, input[type="text"], input[type="number"] {
appearance: none;
background-color: #fff;
border: 1px solid;
border-color: #999 #bbb #ddd;
border-radius: 0;
box-sizing: border-box;
color: #000;
padding: 2px 3px;
}
select {
/* Dropdown arrow */
background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
background-position: right center;
background-repeat: no-repeat;
padding-right: 20px; /* Padding for dropdown arrow */
}
button, input[type="file"]::file-selector-button {
background-color: #f0f0f0;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 4px;
color: #000;
font-family: inherit;
padding: 2px 10px;
}
button:hover, input[type="file"]::file-selector-button:hover {
background-color: #eaeaea;
}
button:active, input[type="file"]::file-selector-button:active {
background-color: #dfdfdf;
border-color: #999 #bbb #ddd;
}
input[type="checkbox"] {
appearance: none;
position: relative;
width: 0.9em;
height: 0.9em;
border: 1px solid;
border-color: #999 #bbb #ddd;
vertical-align: -2px;
}
input[type="checkbox"]:checked {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9Ti0VaHMwg4pChOlkQFXHUKhShQqgVWnUweekfNGlJUlwcBdeCgz+LVQcXZ10dXAVB8AfEzc1J0UVKvC8ptIjxwuN9nHfP4b37AKFZYbrVMw7ohm2mkwkpm1uVel8RQAhhRCEqzKrNyXIKvvV1T91Ud3Ge5d/3Z0W1vMWAgEQ8y2qmTbxBPL1p1zjvE4uspGjE58RjJl2Q+JHrqsdvnIsuCzxTNDPpeWKRWCp2sdrFrGTqxFPEMU03KF/Ieqxx3uKsV+qsfU/+wkjeWFnmOq1hJLGIJciQoKKOMiqwEafdIMVCms4TPv4h1y+TSyVXGYwcC6hCh+L6wf/g92ytwuSElxRJAKEXx/kYAXp3gVbDcb6PHad1AgSfgSuj4682gZlP0hsdLXYE9G8DF9cdTd0DLneAwaeaYiquFKQlFArA+xl9Uw4YuAX61ry5tc9x+gBkaFapG+DgEBgtUva6z7vD3XP7t6c9vx/h6nJtOtJaHwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB+UBBQgnA808S3QAAABpSURBVDjLxZNLEsAgCEPRO3pKuOPrrkXRDtZFs/PzkjGMBUAOVOVQnwzM7FmwKVVFRFBVAOpucmut39xN9ukAcgJ3BuNBBr4NxmKycDDwFzNweIIHMnAo0YMZeDqFVR9pg7eJzFR+/40Xt0cwTrDq4YsAAAAASUVORK5C);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
select:focus, input:focus {
border-color: #3daee9;
}