From 3d1e83948b72638ddac024f92f78d0d5834a3288 Mon Sep 17 00:00:00 2001
From: Pau Argelaguet <pau@outlook.com>
Date: Tue, 16 Feb 2021 19:04:47 +0100
Subject: [PATCH] Making Helios Booth responsive
Adding redis
Working on responsive booth
Using compatible font
Cleaning up CSS
Adding redis
Revert adding redis
Adding redis
Adding AWS region name
Revert email change
Adding space on question numbers
Adding space on question numbers
Update runtime.txt
Update requirements.txt
---
heliosbooth/css/booth.css | 81 ++++++++++++++++-----------
heliosbooth/css/forms.css | 8 +--
heliosbooth/css/style.css | 30 ++++------
heliosbooth/single-ballot-verify.html | 6 +-
heliosbooth/templates/footer.html | 24 +++++---
heliosbooth/templates/question.html | 10 ++--
heliosbooth/templates/seal.html | 42 +++++++-------
heliosbooth/vote.html | 27 ++++++---
runtime.txt | 2 +-
9 files changed, 123 insertions(+), 107 deletions(-)
diff --git a/heliosbooth/css/booth.css b/heliosbooth/css/booth.css
index 716ada2..e3b0d40 100644
--- a/heliosbooth/css/booth.css
+++ b/heliosbooth/css/booth.css
@@ -1,65 +1,84 @@
-
body {
- font-family: Arial;
+ font-family: sans-serif;
background: white;
- padding: 0px;
- margin: 0px;
+ padding: 0;
+ margin: 0;
}
#wrapper {
- position: absolute;
- padding: 0px;
- background: white;
+ padding: 0;
+ background: #ffffff;
border: 1px solid #666;
- top: 20px;
- margin-left: 100px;
- margin-top: 0px;
- width: 1000px;
+ margin: 20px auto;
+ max-width: 1000px;
+}
+
+@media screen and (max-width: 1000px) {
+ #wrapper {
+ margin: 0;
+ }
}
#content {
- padding: 20px 30px 20px 30px;
+ padding: 20px;
}
#header {
- padding-top: 0px;
+ padding-top: 0;
text-align: center;
padding-bottom: 5px;
}
#header h1 {
font-size: 28pt;
- padding: 0px;
- margin: 0px;
+ padding: 0;
+ margin: 0;
line-height: 120%;
}
#header h2 {
font-size: 20pt;
- padding: 0px;
- margin: 0px;
+ padding: 0;
+ margin: 0;
line-height: 100%;
- font-weight: none;
}
-#banner {
+.edge {
width: 100%;
+ display: flex;
+ padding: 5px 0;
text-align: center;
- padding: 2px 0px 2px 0px;
background: #ccc;
font-size: 18pt;
- border-bottom: 1px solid #666;
+}
+
+.box {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.box:nth-child(2) {
+ flex: 3;
+}
+
+.box:last-child > span {
+ margin-left: auto;
+ margin-right: 5px;
+ font-size: 12pt;
}
#progress_div {
- width: 100%;
+ margin: auto;
+ max-width: 500px;
font-size: 14pt;
}
#progress_div table {
+ width: 100%;
border-collapse: collapse;
text-align: center;
- border: 0px;
+ border: 0;
}
#progress_div td.unselected {
@@ -76,20 +95,14 @@ body {
}
#footer {
- position: relative;
- bottom: 0px;
- width: 100%;
- text-align: center;
- margin-top: 10px;
- padding: 2px 0px 2px 0px;
- background: #ddd;
- border-top: 1px solid #666;
+ font-size: 12pt;
+ word-break: break-all;
}
#page h2 {
background: #fc9;
border-bottom: 1px solid #f90;
- padding: 5px 0px 2px 5px;
+ padding: 5px 0 2px 5px;
}
h3 {
@@ -101,9 +114,9 @@ h3 {
}
#election_hash {
- font-family: courier;
+ font-family: monospace;
}
#loading_div {
display: none;
-}
\ No newline at end of file
+}
diff --git a/heliosbooth/css/forms.css b/heliosbooth/css/forms.css
index ae4cbb7..2048acd 100644
--- a/heliosbooth/css/forms.css
+++ b/heliosbooth/css/forms.css
@@ -1,4 +1,3 @@
-
form.prettyform {
font-size: 1.4em;
}
@@ -35,7 +34,6 @@ input.prettysmall {
border: 1px solid black;
}
-
table.pretty {
margin: 1em 1em 1em 2em;
background: whitesmoke;
@@ -48,11 +46,10 @@ table.pretty th, td {
padding: 0.3em;
}
-
#answers {
padding-left: 210px;
- padding-top: 0px;
- margin-top: 0px;
+ padding-top: 0;
+ margin-top: 0;
}
#questions_div {
@@ -62,4 +59,3 @@ table.pretty th, td {
div.selected {
background: lightblue;
}
-
diff --git a/heliosbooth/css/style.css b/heliosbooth/css/style.css
index 8834be8..166c65f 100644
--- a/heliosbooth/css/style.css
+++ b/heliosbooth/css/style.css
@@ -4,13 +4,16 @@ a:visited {color:#00a;}
a:active {color:blue;}
-a:hover, a.subfoot:hover, a.linknav:hover, a.sublinknav:hover {color:blue;text-decoration:underline;}
+a:hover, a.subfoot:hover, a.linknav:hover, a.sublinknav:hover {
+ color:blue;
+ text-decoration:underline;
+}
body {
- margin:0px;
- padding: 0px;
+ margin:0;
+ padding: 0;
background:#ddd;
- font-family: "Trebuchet MS",verdana,sans-serif;
+ font-family: sans-serif;
font-size: 14px;
color:#333;
}
@@ -19,16 +22,9 @@ body {
margin-top:20px;
margin-right:50px;
margin-left:50px;
- background:white;
- border-top:1px solid #666;
- border-left:1px solid #666;
- border-right:1px solid #666;
- border-bottom:1px solid #666;
- background-color: white;
- padding-top: 0px;
- padding-bottom: 0px;
- padding-left: 0px;
- padding-right: 0px;
+ background: #ffffff;
+ border: 1px solid #666;
+ padding: 0;
}
#content {
@@ -43,7 +39,7 @@ body {
h1, h2, h3, h4, pre {
line-height:120%;
- margin: 0px;
+ margin: 0;
}
p {
@@ -94,7 +90,6 @@ h3 {
border-bottom: 1px dotted #888;
}
-
.question_selected {
padding-top: 15px;
padding-bottom: 10px;
@@ -114,6 +109,5 @@ h3 {
}
.data {
- font-family: courier;
+ font-family: monospace;
}
-
diff --git a/heliosbooth/single-ballot-verify.html b/heliosbooth/single-ballot-verify.html
index 113484f..4a1e8b8 100644
--- a/heliosbooth/single-ballot-verify.html
+++ b/heliosbooth/single-ballot-verify.html
@@ -1,7 +1,9 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta charset="UTF-8">
+
<title>Helios Voting System</title>
<link rel="stylesheet" type="text/css" href="css/booth.css" />
<link rel="stylesheet" type="text/css" href="css/forms.css" />
diff --git a/heliosbooth/templates/footer.html b/heliosbooth/templates/footer.html
index 750fa43..4bad3ab 100644
--- a/heliosbooth/templates/footer.html
+++ b/heliosbooth/templates/footer.html
@@ -1,9 +1,15 @@
-<span style="float:right; padding-right:20px;">
-<a target="_new" href="mailto:{$T.election_metadata.help_email}?subject=help%20with%20election%20{$T.election.name}&body=I%20need%20help%20with%20election%20{$T.election.uuid}">help!</a>
-</span>
-{#if $T.election.BOGUS_P}
-The public key for this election is not yet ready. This election is in preview mode only.
-{#else}
-Election Fingerprint: <span id="election_hash" style="font-weight:bold;">{$T.election.hash}</span>
-{#/if}
-
+<div class="box"></div>
+<div class="box">
+ <span>
+ {#if $T.election.BOGUS_P}
+ The public key for this election is not yet ready. This election is in preview mode only.
+ {#else}
+ Election Fingerprint: <span id="election_hash" style="font-weight:bold;">{$T.election.hash}</span>
+ {#/if}
+ </span>
+</div>
+<div class="box">
+ <span>
+ <a target="_new" href="mailto:{$T.election_metadata.help_email}?subject=help%20with%20election%20{$T.election.name}&body=I%20need%20help%20with%20election%20{$T.election.uuid}">help</a>
+ </span>
+</div>
diff --git a/heliosbooth/templates/question.html b/heliosbooth/templates/question.html
index 8945e45..e5ddd62 100644
--- a/heliosbooth/templates/question.html
+++ b/heliosbooth/templates/question.html
@@ -7,18 +7,18 @@
<b>{$T.question.question}</b>
<br />
<span style="font-size: 0.6em;">#{$T.question_num + 1} of {$T.last_question_num + 1} —
- vote for
+ vote for
{#if $T.question.min && $T.question.min > 0}
{#if $T.question.max}
-{$T.question.min} to {$T.question.max}
+ {$T.question.min} to {$T.question.max}
{#else}
-at least {$T.question.min}
+ at least {$T.question.min}
{#/if}
{#else}
{#if $T.question.max}
-{#if $T.question.max > 1}up to {#/if}{$T.question.max}
+{#if $T.question.max > 1} up to{#/if} {$T.question.max}
{#else}
-as many as you approve of
+ as many as you approve of
{#/if}
{#/if}
</span>
diff --git a/heliosbooth/templates/seal.html b/heliosbooth/templates/seal.html
index d16ac3b..3f412c0 100644
--- a/heliosbooth/templates/seal.html
+++ b/heliosbooth/templates/seal.html
@@ -1,23 +1,5 @@
-
-{#if $T.election_metadata.use_advanced_audit_features}
-<div style="float: right; background: lightyellow; margin-left: 20px; padding: 0px 10px 10px 10px; border: 1px solid #ddd; width:200px;">
-<h4><a onclick="$('#auditbody').slideToggle(250);" href="#">Audit</a> <span style="font-size: 0.8em; color: #444">[optional]</span></h4>
-<div id="auditbody" style="display:none;">
-<p>
-If you choose, you can audit your ballot and reveal how your choices were encrypted.
-</p>
-<p>
-You will then be guided to re-encrypt your choices for final casting.
-</p>
-<input type="button" value="Verify Encryption" onclick="BOOTH.audit_ballot();" class="pretty" />
-</p>
-</div>
-</div>
-{#/if}
-
<h3>Review your Ballot</h3>
-
<div style="padding: 10px; margin-bottom: 10px; background-color: #eee; border: 1px #ddd solid; max-width: 340px;">
{#foreach $T.questions as question}
@@ -36,16 +18,30 @@ You will then be guided to re-encrypt your choices for final casting.
{#/for}
</div>
+<p>Your ballot tracker is <b><tt style="font-size: 11pt; word-break: break-all;">{$T.encrypted_vote_hash}</tt></b>, and you can <a onclick="BOOTH.show_receipt(); return false;" href="#">print</a> it.</p>
-<p><p>Your ballot tracker is <b><tt style="font-size: 11pt;">{$T.encrypted_vote_hash}</tt></b>, and you can <a onclick="BOOTH.show_receipt(); return false;" href="#">print</a> it.<br /><br /></p>
-
+{#if $T.election_metadata.use_advanced_audit_features}
+<div style="background: lightyellow; padding: 10px; border: 1px solid #ddd; max-width: 340px;">
+<h4><a onclick="$('#auditbody').slideToggle(250);" href="#">Audit</a> <span style="font-size: 0.8em; color: #444">[optional]</span></h4>
+<div id="auditbody" style="display:none;">
<p>
-Once you click "Submit", the unencrypted version of your ballot will be destroyed, and only the encrypted version will remain. The encrypted version will be submitted to the Helios server.</p>
+If you choose, you can audit your ballot and reveal how your choices were encrypted.
+</p>
+<p>
+You will then be guided to re-encrypt your choices for final casting.
+</p>
+<input type="button" value="Verify Encryption" onclick="BOOTH.audit_ballot();" class="pretty" />
+</p>
+</div>
+</div>
+{#/if}
-<button id="proceed_button" onclick="BOOTH.cast_ballot();">Submit this Vote!</button><br />
-<div id="loading_div"><img src="loading.gif" id="proceed_loading_img" /></div>
+<br />
+<p>Once you click "Submit", the unencrypted version of your ballot will be destroyed, and only the encrypted version will remain. The encrypted version will be submitted to the Helios server.</p>
+<button id="proceed_button" onclick="BOOTH.cast_ballot();">Submit this Vote!</button><br />
+<div id="loading_div"><img src="loading.gif" id="proceed_loading_img" /></div>
<form method="POST" action="{$T.cast_url}" id="send_ballot_form" class="prettyform">
<input type="hidden" name="election_uuid" value="{$T.election_uuid}" />
diff --git a/heliosbooth/vote.html b/heliosbooth/vote.html
index 7ac836b..3f42230 100644
--- a/heliosbooth/vote.html
+++ b/heliosbooth/vote.html
@@ -1,7 +1,8 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
<head>
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta charset="UTF-8">
<title>Helios Voting Booth</title>
<link rel="stylesheet" type="text/css" href="css/booth.css" />
<link rel="stylesheet" type="text/css" href="css/forms.css" />
@@ -26,10 +27,14 @@
<script language="javascript" src="js/20160507-helios-booth-compressed.js"></script>
</head>
+
<body>
<div id="wrapper">
-<span style="float:right; padding: 7px 15px 5px 10px;">[<a href="javascript:BOOTH.exit();">exit</a>]</span>
-<div id="banner">Helios Voting Booth</div>
+<div id="banner" class="edge">
+ <div class="box"></div>
+ <div class="box"><span>Helios Voting Booth</span></div>
+ <div class="box"><span><a href="javascript:BOOTH.exit();">exit</a></span></div>
+</div>
<div id="content">
<div id="header">
@@ -592,9 +597,13 @@ BOOTH.do_done = function() {
</script>
<div id="page">
- <div id="progress_div" style="display:none; width: 500px; margin:auto;">
- <table width="100%">
- <tr><td id="progress_1">(1) Select</td><td id="progress_2">(2) Review</td><td id="progress_3">(3) Submit</td></tr>
+ <div id="progress_div" style="display:none">
+ <table>
+ <tr>
+ <td id="progress_1">(1) Select</td>
+ <td id="progress_2">(2) Review</td>
+ <td id="progress_3">(3) Submit</td>
+ </tr>
</table>
</div>
<div id="election_div" class="panel">
@@ -636,7 +645,7 @@ BOOTH.do_done = function() {
<br clear="both" />
</div>
-<div id="footer"> </div>
+<div id="footer" class="edge"> </div>
</div>
<div id="applet_div">
</div>
diff --git a/runtime.txt b/runtime.txt
index 0c89a2d..03b2256 100644
--- a/runtime.txt
+++ b/runtime.txt
@@ -1 +1 @@
-python-3.6.13
+python-3.6.14
--
GitLab