Ballot website - styling improvements
Needs ReviewPublic
Actions

Authored by mpyne on Sep 16 2018, 9:40 PM.

Details

Reviewers

Group Reviewers

Sysadmin
KDE e.V.

Summary

The recent spate of eV votes left me wondering how hard it would be to make the "Unbearably ugly" voting website a little bit more bearable without having to infect it with tons more CSS and JS.

I took a cut at it, using a micro-CSS framework Lotus (https://goatslacker.github.io/lotus.css/) along with some slightly adapted HTML, especially in the list of votes (turned into a styled table) and the page showing individual votes.

I think the result looks better (and worth it given the few hours of effort) but then I'm not great at Web design either.

This is the diff against the existing git repository (websites/ballot-kde-org), but the individual commits can be viewed at https://cgit.kde.org/clones/websites/ballot-kde-org/mpyne/lotustheme.git/

Let me know what you think!

Test Plan

Testing wasn't too difficult following steps below.

Results

With the changes, I was able to login using a test user (using any password). The login page, list of votes, and per-vote pages all looked a bit better. The test user changes are not included at all in the diff or the upstream repo to prevent its accidental inclusion.

Some "after" screenshots are attached. I tested submitting a test vote and that worked fine. I was not able to test trying to login as other users, as no one at all, etc., but I also didn't alter that styling or codepath.

System setup

Obviously I needed Ruby and RubyGems installed. To run ballot you also need a few other requirements at least.

This seemed to work for me. You'll want to do them one-by-one since some may have system-specific pecularities (e.g. the PATH setting).

$ gem install --user_install pony yubikey net-ldap sinatra
$ export PATH=$HOME/.gem/ruby/2.4.0/bin:$PATH
$ cd ~/path/to/ballot-kde-org
$ cp config.ru.example config.ru
$ $EDITOR config.ru  # Edit to reflect the diff below
$ mkdir -p votesdir/{votes,users-dir-NOT-PUBLIC}
$ $EDITOR ballot.rb # Edit to reflect the diff below
$ mkdir -p config/votes
$ $EDITOR config/votes/test.json # Edit to reflect below
$ date "+%s" # To get a timestamp for test.json above, don't forget to add 100,000 seconds or so

With that setup out of the way it should be possible to run the "rackup" command from the ballot-kde-org directory, which will pull in the config.ru file and use it to run the web server tied to http://localhost:9292/ by default. Do not run "rackup ballot.rb" otherwise no config will be used at all.

The hardest part for testing is the LDAP lookups and setting up user accounts for those, 2nd hardest is having sample votes available. I didn't ask for sysadmin help there but hacked ballot.rb and constructed my own test data using steps above.

Diffs

config.ru

--- config.ru.example   2018-09-15 19:35:40.912750530 -0400
+++ config.ru   2018-09-16 13:09:44.205432573 -0400
@@ -2,10 +2,11 @@
 require 'sinatra/base'
 require File.dirname(__FILE__) + "/ballot"
 
-$configdir = '/var/lib/ballot/votesdir/config'
-$votebasedir = "/var/lib/ballot/votesdir/votes"
-$usersbasedir = "/var/lib/ballot/votesdir/users-dir-NOT-PUBLIC"
-$bindpw = File.read("/var/lib/ballot/scriptpw").chomp
+$dir = File.dirname(__FILE__)
+$configdir = "#{$dir}/config"
+$votebasedir = "#{$dir}/votesdir/votes"
+$usersbasedir = "#{$dir}/votesdir/users-dir-NOT-PUBLIC"
+$bindpw = ''
 $binddn = "cn=something,ou=unit,dc=example,dc=com"
 $authdn = "ou=people,dc=example,dc=com"
 $userattr = "uid"
@@ -19,7 +20,7 @@
 $use_yubikeys = false
 $use_gv = false
 $gv_ema = ""
-$gv_passwd = File.read("/var/lib/ballot/gv_passwd").chomp
-$gv_rnr_se = File.read("/var/lib/ballot/gv_rnr_se").chomp
+$gv_passwd = ''
+$gv_rnr_se = ''
 
 run Ballot

ballot.rb

IMPORTANT: This intentionally breaks auth!! This should be used for testing and then git-stashed or similar.

diff --git a/ballot.rb b/ballot.rb
index 6e903c6..7b5ab6f 100755
--- a/ballot.rb
+++ b/ballot.rb
@@ -220,6 +220,11 @@ class Ballot < Sinatra::Base
       # Check whether the user can use the given username/password to bind against the configured
       # LDAP server. If so, populate the user properties.
       def loginCheck(username, password)
+         # TODO XXX REMOVE THIS DEBUG CODE
+         $userprops[username] = {}
+         return true
+         # ACTUAL AUTH CODE FOLLOWS
+
          ldap = Net::LDAP.new
          ldap.host = $ldaphost
          ldap.port = $ldapport

config/votes/test.json

{
    "active"         : true,
    "expiration"     : 1542116569,
    "mailattr"       : "mpyne@kde.org",
    "id"             : "test",
    "description"    : "Adopting modified ballot.kde.org styling",
    "votetype"       : "ev-membership",
    "votehashsalt"   : "",
    "userhashsalt"   : "",
    "administrators" : [
        "mpyne"
    ],
    "users"          : [
        "mpyne"
    ],
    "choices"        : {
        "yes"     : "Yes",
        "no"      : "No",
        "abstain" : "Abstain"
    }
}

Caching

The CSS file is obviously meant to be normally cached. If you make changes to the base.css during development and it doesn't appear to work, don't forget to try forcibly ignoring the browser cache (e.g. Shift-F5 IIRC).

Diff Detail

Repository

R906 Ballot Voting (Web Application)

Lint

Lint Skipped

Unit

Unit Tests Skipped

mpyne requested review of this revision.Sep 16 2018, 9:40 PM

mpyne created this revision.

Anyone have a chance to look at this?

Revision Contents
Changeset List

		Path
M		ballot.rb (4 lines)
A	M	static/css/base.css (111 lines)
M		views/index.erb (2 lines)
M		views/layout.erb (1 line)
M		views/login.erb (21 lines)
M		views/vote.erb (56 lines)
M		views/votes.erb (28 lines)