Several booth and template style changes

Make helios booth cleaner
EderAndre · May 23, 2018 · 26ea2fe · 26ea2fe
1 parent 82e96e2
commit 26ea2fe
Show file tree

Hide file tree

Showing 18 changed files with 403 additions and 378 deletions.
diff --git a/helios/media/css/custom.css b/helios/media/css/custom.css
@@ -16,7 +16,8 @@
     color:#eef1ec;
 }
 #progress_div td.selected {
-  background:#2f9e40;
+  background:#0d4f4d;
+  color:#eef1ec;
 }
 .btn-primary,a.btn,.btn-lg,.btn-primary {
 	background-color:#0d4f4d;
@@ -35,7 +36,7 @@ a:hover, a:focus {
 	background-color:#2f9e40;
 }
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
-  color: #3c4146;
+  color: #eef1ec;
   background-color: #2f9e40;
   /*border-color: #0d4f4d;*/
 }
@@ -92,6 +93,28 @@ html {
     color: #eef1ec;
 }
 
+.alert-warning {
+    background-color: #0f5f5c;
+    border-color: #0f5f5c;
+    color: #eef1ec;
+}
 input {
     color: #333;
 }
+
+a {
+    font-weight: bold;
+    color: #2f9e40;
+    text-decoration: none;
+}
+
+div.selected {
+    background: none;
+    border-color: #45981e;
+    border-width:1px;
+    border-style:solid;
+}
+
+a.link-booth {
+    color: #eef1ec;
+}
diff --git a/helios/templates/_castconfirm_docast.html b/helios/templates/_castconfirm_docast.html
@@ -5,7 +5,7 @@
 <div id="cast_form">
 <form id="cast_confirm_form" method="post" action="" onsubmit="show_waiting()">
     <input type="hidden" name="csrf_token" value="{{csrf_token}}" />
-    
+
 {% if status_update_label %}
 <div class="round" style="background: #eee; padding: 10px; border: 1px dashed #888;">
 <input type="checkbox" name="status_update" value="1" checked /> {{status_update_label}}<br />
@@ -16,22 +16,16 @@
 </div>
 <br />
 {% endif %}
+{% trans "You are logged in as" %} <u>{{voter|safe}}</u><br /><br />
 
-{% trans "You are logged in as" %} <u>{{voter.user.pretty_name|safe}}</u><br /><br />
-
-    <button class="btn btn-primary" type="submit" class="large">{% trans "CAST this ballot" %}</button>
-    <span style="font-size:0.8em;"><br />{% blocktrans %}You can cast as many ballots as you want.<br />Only the last one counts.{% endblocktrans %}</span>
+    <button class="btn btn-primary" type="submit" >{% trans "CAST this ballot" %}</button>
+    <button class="btn btn-danger" type="button" onclick="document.location='/auth/logout';">{% trans "cancel" %}</button><br />
 </form>
-
-<p>
-    <button class="btn btn-danger" onclick="document.location='./view';">{% trans "cancel" %}</button><br />
-    <span style="font-size:0.8em;">{% blocktrans %}If you cancel now, your ballot will <em>NOT</em> be recorded.<br />
+<p>&nbsp;
+    <p><span style="font-size:0.9em;">{% blocktrans %}If you cancel now, your ballot will <em>NOT</em> be recorded.<br />
     You can start the voting process over again, of course.{% endblocktrans %}</span>
 </p>
 
-<!-- for now, for CSRF protection, no auto-submit just yet (benadida) -->
-<!-- <script>$('#cast_confirm_form').submit()</script> -->
-
 </div>
   {% else %}
 <p style="font-size:1.4em;">

diff --git a/helios/templates/_castconfirm_password.html b/helios/templates/_castconfirm_password.html
@@ -5,7 +5,6 @@
 <input type="hidden" name="csrf_token" value="{{csrf_token}}" />
 <input type="hidden" name="return_url" value="{{return_url}}" />
 <input type="hidden" name="cast_ballot" value="{{cast_ballot}}" />
-    <!--{{password_login_form.as_table}} -->
   <div class="form-group">
     <label for="exampleInputEmail1">{% trans "Voter ID" %}</label>
     <input type="text" class="form-control" id="voter_id" name="voter_id" placeholder="{% trans "Voter ID" %}">
@@ -22,13 +21,8 @@
 {% endif %}
 <div class="form-group">
 {% if cast_ballot == "1" %}
-<p class="small">
-{% trans "You may cast as many ballots as you wish:<br />only the last one counts." %}
-</p>
-<!--<input type="submit" class="button" value="cast ballot" /> -->
-<button type="submit" class="btn btn-primary">{% trans "Vote" %}</button>
+<button type="submit" class="btn btn-primary">{% trans "Confirm" %}</button>
 {% else %}
-<!--<input type="submit" class="button" value="log in" /> -->
 <button type="submit" class="btn btn-primary">{% trans "Login" %}</button>
 {% endif %}
 </div>

diff --git a/helios/templates/cast_done.html b/helios/templates/cast_done.html
@@ -1,36 +1,27 @@
 {% extends TEMPLATE_BASENONAV %}
 {% load i18n %}
-{% block title %}{% trans "Confirm Vote" %}{% endblock %}
+{% block title %}Voto depositado!{% endblock %}
 
 {% block content %}
-<h1>{{election.name}} &mdash; {% trans "Vote Successfully Cast!" %}</h1>
-
-<p>
+<h2>{{election.name}}</h2>
+<br>
+<h4>
 {% blocktrans %}
     Congratulations, your vote has been <b><u>successfully cast</u></b>!
 {% endblocktrans %}
-</p>
-
+</h4>
+<br>
+<div class="alert alert-info" role="alert">
 <p>
-  {% trans "Your smart ballot tracker is:" %}<br /><br />
-    <tt style="font-size: 12pt;width: 10em; word-wrap: break-word; font-weight: bold; padding-left: 20px;">{{vote_hash}}</tt>
+{% trans "Your smart ballot tracker is:" %}
+  <tt style="font-size: 10pt;width: 10em; word-wrap: break-word; font-weight: bold; ">  {{vote_hash}}</tt>
 </p>
-
-<p>
-{% trans "You can use it to verify that your vote has been cast, "%}<a href="{% url "helios.views.voters_list_pretty" election.uuid %}">{% trans "clicking here" %}</a>.
-</p>
-<!--<p>
-<iframe src="{{socialbuttons_url}}" frameborder="0" border="0" style="width: 300px; height:35px;" scrolling="no" align="middle"></iframe>
-</p>-->
+</div>
 
 {% if logout %}
-<p><span style="font-size: 12pt;width: 10em; word-wrap: break-word; font-weight: bold; padding-left: 20px;">{% trans "For your safety, we have logged you out." %}</span></p>
+<p><span class="label label-info">{% trans "For your safety, we have logged you out." %}</span></p>
 <iframe width="0" height="0" border="0" frameborder="0" src="/auth/logout">
 </iframe>
 {% endif %}
 
-<p class="btn btn-success">
- <a href="{% url "helios.views.one_election_view" election.uuid %}">{% trans "return to election info" %}</a> 
-</p>
-
 {% endblock %}
diff --git a/helios/templates/election_cast_confirm.html b/helios/templates/election_cast_confirm.html
@@ -26,7 +26,8 @@
     evt = window.event;
   }
 
-  var message = "You have not yet cast your ballot! Make sure to complete the voting process if you want your vote to count.";
+  //var message = "You have not yet cast your ballot! Make sure to complete the voting process if you want your vote to count.";
+  var message = "Você ainda NÃO DEPOSITOU sua cédula na urna! Se você quiser que seu voto seja considerado, então complete todo o processo";
 
   if (evt) {
     evt.returnValue = message;
@@ -37,14 +38,11 @@
 
 </script>
 <div id="ballot-not-cast-yet" class="container-fluid">
-<h1>{{election.name}} - {% trans "Submit your Vote" %}</h1>
+<h2>{{election.name}}</h2>
+<h3>{% trans "Submit your Vote" %}</h3>
 
 <div class="alert alert-warning" role="alert">
-  {% blocktrans %}
-  We have received, <b><u>but not yet recorded</u></b>, your encrypted ballot.<br />
-  Your smart ballot tracker is:
-  {% endblocktrans %}
-  <em style="font-size: 12pt;width: 10em; word-wrap: break-word; font-weight: bold; padding-left: 20px;">  {{vote_fingerprint}}</em>
+    A sua cédula <b><u>ainda não foi depositada</u></b> na urna.
 </div>
 
 <div id="waiting_div">

diff --git a/helios/templates/election_view.html b/helios/templates/election_view.html
@@ -244,9 +244,10 @@ <h3 class="highlight-box">{% trans "Tally" %}</h3>
 			{% if election.private_p and voter %}
 				<br />
 {% blocktrans %}
-This election is <em>private</em>. You are signed in as eligible voter <em>{{voter.name}}</em>.
+This election is <em>private</em>. You are signed in as eligible voter:  <em>{{ voter }}</em>.
 {% endblocktrans %}
 			{% endif %}
+            <br>
 			<div class="highlight-box round" style="font-size: 1.2em; margin-right: 400px; display:none;" id="nojava_message">
 {% blocktrans %}
 You do not have Java installed in your browser.<br />At this time, Helios requires Java.<br />

diff --git a/helios/templates/password_voter_login.html b/helios/templates/password_voter_login.html
@@ -2,13 +2,8 @@
 {% load i18n %}
 {% block title %}{% trans "Log In to View Election" %}{% endblock %}
 {% block content %}
-<h2>{% trans "Private Election - Please Log In" %}</h2>
-
-<p>
-{% blocktrans %}
-This election, with fingerprint <tt>{{election.hash}}</tt>, is private, and can only be viewed by eligible voters.
-{% endblocktrans %}
-</p>
+<h2>{{election.name}}</h2>
+<h3> {% trans "Private Election - Please Log In" %}</h3>
 
 {% with cast_ballot="0" %}
 {% include "_castconfirm_password.html" %}

diff --git a/heliosbooth/css/booth.css b/heliosbooth/css/booth.css
@@ -1,7 +1,7 @@
 
 body {
   font-family: Arial;
-  background: white;
+  background-color:#eef1ec;
   padding: 0px;
   margin: 0px;
 }

diff --git a/heliosbooth/css/forms.css b/heliosbooth/css/forms.css
@@ -7,7 +7,7 @@ form.prettyform label,input,textarea,select {
     line-height: 1.8;
 }
 
-form.prettyform label {
+form.prettyform label:not(.answer){
     display: block;
     text-align: right;
     float: left;

diff --git a/heliosbooth/templates/confirm.html b/heliosbooth/templates/confirm.html
@@ -17,4 +17,4 @@ <h3>Revise sua Cédula</h3>
 </p>
 {#/for}
 
-<button class="btn-primary" onclick="BOOTH.seal_ballot();">Cifrar cédula</button>
+<button class="btn btn-primary" onclick="BOOTH.seal_ballot();">Próximo Passo</button>
diff --git a/heliosbooth/templates/footer.html b/heliosbooth/templates/footer.html
@@ -1,5 +1,5 @@
 <span style="float:right; padding-right:10px;">
-<a style="color:#fff;" target="_new" href="/ajuda">[ajuda]</a>
+<a class="link-booth" target="_new" href="/ajuda">[ajuda]</a>
 </span>
 {#if $T.election.BOGUS_P}
 A chave pública desta eleição ainda não está pronta. Esta eleição está no modo pré-visualização.

diff --git a/heliosbooth/templates/question.html b/heliosbooth/templates/question.html
@@ -7,13 +7,14 @@
 <b>{$T.question.question}</b>
 </span>
 <br />
+
 <span style="font-size: 0.9em;">questão {$T.question_num + 1} de {$T.last_question_num + 1} &mdash;
  você deve marcar
 {#if $T.question.max && $T.question.min == 0}
  no máximo {$T.question.max}
 {#else}
 {#if $T.question.min && $T.question.min > 0}
-no mínimo
+ no mínimo
 {#if $T.question.max}
 {$T.question.min} e no máximo {$T.question.max}
 {#else}
@@ -28,6 +29,8 @@
 {#/if}
 {#/if}
 </span>
+
+
 </p>
 <span style="font-size: 1.1em;">
 {#foreach $T.question.answers as answer}

diff --git a/heliosbooth/templates/seal.html b/heliosbooth/templates/seal.html
@@ -18,18 +18,14 @@ <h4><a onclick="$('#auditbody').slideToggle(250);" href="#">Auditar</a> <span st
 
 <h3>Sua cédula está cifrada e pronta para ser depositada na urna.</h3>
 
-<p>
-<em>Não esqueça de clicar em "Depositar Cédula na Urna"!</em>
-</p>
 
 <p>Antes de depositar na urna, você pode anotar seu rastreador de cédula:<br /><br />
 
 <b><tt style="font-size: 12pt;width: 10em; word-wrap: break-word;">{$T.encrypted_vote_hash}</tt></b><br /><br />
 </p>
 
-<p>Sua cédula foi cifrada e ninguém conseguirá identificar as escolhas que você fez.</p>
 
-<button class="btn-primary" id="proceed_button" onclick="BOOTH.cast_ballot();">Depositar Cédula na Urna</button><br />
+<button class="btn btn-primary" id="proceed_button" onclick="BOOTH.cast_ballot();">Depositar Cédula na Urna</button><br />
 <div id="loading_div"><img src="loading.gif" id="proceed_loading_img" /></div>
 
 

diff --git a/heliosbooth/vote.html b/heliosbooth/vote.html
@@ -8,6 +8,9 @@
   <link rel="stylesheet" type="text/css" href="css/forms.css" />
   <link rel="stylesheet" type="text/css" media="screen" href="/static/bootstrap/css/bootstrap.min.css" />
   <link rel="stylesheet" type="text/css" href="/static/css/custom.css" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
+    <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
 <!--
   <script language="javascript" src="js/jscrypto/class.js"></script>
@@ -31,7 +34,7 @@
 </head>
 <body>
 <div id="wrapper">
-<span style="float:right; padding: 7px 15px 5px 10px;">[<a href="javascript:BOOTH.exit();">sair</a>]</span>
+<span style="float:right; padding: 7px 15px 5px 10px;"><a class="link-booth" href="javascript:BOOTH.exit();">[sair]</a></span>
 <div id="banner">Cabine de Votação</div>
 <div id="content">
 
@@ -617,7 +620,7 @@
 <div id="page">
   <div id="progress_div" style="display:none; max-width: 500px; width: 100%; margin:auto;">
       <table width="80%" class="table table-bordered">
-          <tr><td id="progress_1">(1) Selecionar</td><td id="progress_2">(2) Revisar</td><td id="progress_3">(3) Depositar</td></tr>
+          <tr><td id="progress_1">(1) Marcar</td><td id="progress_2">(2) Revisar</td><td id="progress_3">(3) Depositar</td></tr>
       </table>
   </div>
   <div id="election_div" class="panel list-group">

diff --git a/heliosverifier/css/forms.css b/heliosverifier/css/forms.css
@@ -7,7 +7,7 @@ form.prettyform label,input,textarea,select {
     line-height: 1.8;
 }
 
-form.prettyform label {
+form.prettyform label:not(.answer){
     display: block;
     text-align: right;
     float: left;
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,4 @@ <h3>Revise sua Cédula</h3> @@
     </p>
     {#/for}
-    <button class="btn-primary" onclick="BOOTH.seal_ballot();">Cifrar cédula</button>
+    <button class="btn btn-primary" onclick="BOOTH.seal_ballot();">Próximo Passo</button>