Much better progress tracker in voting booth #9

This commit is contained in:
Yingtong Li 2018-01-07 20:54:07 +08:00
parent 7bbffb47af
commit 4ebdd8450c
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
4 changed files with 82 additions and 63 deletions

View File

@ -19,6 +19,7 @@
"semantic": "semantic-ui#^2.2.13", "semantic": "semantic-ui#^2.2.13",
"nunjucks": "^3.0.1", "nunjucks": "^3.0.1",
"dragula.js": "dragula#^3.7.2", "dragula.js": "dragula#^3.7.2",
"fingerprintjs2": "^1.5.1" "fingerprintjs2": "^1.5.1",
"progress-tracker": "^1.4.0"
} }
} }

View File

@ -1,6 +1,6 @@
{# {#
Eos - Verifiable elections Eos - Verifiable elections
Copyright © 2017 RunasSudo (Yingtong Li) Copyright © 2017-18 RunasSudo (Yingtong Li)
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by
@ -23,7 +23,7 @@
{# Convert the template name to a numerical index for comparison #} {# Convert the template name to a numerical index for comparison #}
{% if template == 'booth/welcome.html' %} {% if template == 'booth/welcome.html' %}
{% set menuindex = 1 %} {% set menuindex = 1 %}
{% elif template == 'booth/selections.html' %} {% elif template == 'booth/selections.html' or template == 'booth/encrypt.html' %}
{% set menuindex = 2 %} {% set menuindex = 2 %}
{% elif template == 'booth/review.html' %} {% elif template == 'booth/review.html' %}
{% set menuindex = 3 %} {% set menuindex = 3 %}
@ -35,14 +35,23 @@
{% set menuindex = 6 %} {% set menuindex = 6 %}
{% endif %} {% endif %}
<div class="ui secondary pointing menu" id="election-tab-menu"> {% macro menuitem(index, text) %}
{# oh dear god #} <li class="progress-step{% if menuindex > index %} is-complete{% elif menuindex == index %} is-active{% endif %}">
<span class="ui{% if menuindex >= 1 %} active{% endif %} item"{% if menuindex != 1 %} style="color: #767676;{% if menuindex > 1 %} font-weight: 400;{% endif %}"{% endif %}>1. Welcome</span> <span class="progress-marker">{% if menuindex > index or menuindex == 6 %}<span style="font-family: Icons;">&#xf00c;</span>{% else %}{{ index }}{% endif %}</span>
<span class="ui{% if menuindex >= 2 %} active{% endif %} item"{% if menuindex != 2 %} style="color: #767676;{% if menuindex > 2 %} font-weight: 400;{% endif %}"{% endif %}>2. Make selections</span> <span class="progress-text">
<span class="ui{% if menuindex >= 3 %} active{% endif %} item"{% if menuindex != 3 %} style="color: #767676;{% if menuindex > 3 %} font-weight: 400;{% endif %}"{% endif %}>3. Review selections</span> {{ text }}
<span class="ui{% if menuindex >= 4 %} active{% endif %} item"{% if menuindex != 4 %} style="color: #767676;{% if menuindex > 4 %} font-weight: 400;{% endif %}"{% endif %}>4. Audit ballot</span> </span>
<span class="ui{% if menuindex >= 5 %} active{% endif %} item"{% if menuindex != 5 %} style="color: #767676;{% if menuindex > 5 %} font-weight: 400;{% endif %}"{% endif %}>5. Cast ballot</span> </li>
</div> {% endmacro %}
<ul class="progress-tracker progress-tracker--word progress-tracker--word-center" id="election-tab-menu" style="margin-bottom: 20px;">
{{ menuitem(1, "Welcome") }}
{{ menuitem(2, "Select") }}
{{ menuitem(3, "Review") }}
{{ menuitem(4, "Audit") }}
{{ menuitem(5, "Cast") }}
{{ menuitem(6, "Finish") }}
</ul>
<div class="ui container"> <div class="ui container">
{% block content %}{% endblock %} {% block content %}{% endblock %}

View File

@ -1,6 +1,8 @@
{% extends templates['booth/base.html'] %}
{# {#
Eos - Verifiable elections Eos - Verifiable elections
Copyright © 2017 RunasSudo (Yingtong Li) Copyright © 2017-18 RunasSudo (Yingtong Li)
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by
@ -16,9 +18,14 @@
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
#} #}
<div class="ui active text loader">Preparing your ballot. Please wait.</div> {% block content %}
<div class="ui basic segment" style="min-height: 4em;">
<div class="ui active text loader">Preparing your ballot. Please wait.</div>
</div>
{% endblock %}
<script> {% block after %}
<script>
boothWorker.onmessage = function(msg) { boothWorker.onmessage = function(msg) {
try { try {
rawAnswers = []; rawAnswers = [];
@ -74,4 +81,5 @@
boothError(err); boothError(err);
throw err; throw err;
} }
</script> </script>
{% endblock %}

View File

@ -2,7 +2,7 @@
{# {#
Eos - Verifiable elections Eos - Verifiable elections
Copyright © 2017 RunasSudo (Yingtong Li) Copyright © 2017-18 RunasSudo (Yingtong Li)
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by
@ -23,6 +23,7 @@
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='bower_components/dragula.js/dist/dragula.min.css') }}" type="text/css"> <link rel="stylesheet" href="{{ url_for('static', filename='bower_components/dragula.js/dist/dragula.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='bower_components/progress-tracker/app/styles/progress-tracker.css') }}" type="text/css">
{% endblock %} {% endblock %}
{% block content %} {% block content %}