Rewrite views with Bootstrap

views/votes_show_closed.erb

@@ -1,38 +1,46 @@
-<h1><%= @vote.title %></h1>
+<div class="mb-5">
+  <h1><%= @vote.title %></h1>
+  <ul class="list-unstyled">
+    <li>
+      <span class="badge bg-dark text-bg-dark"><%= _("Closed") %></span>
+      <% if @vote.users.exists?(current_user.id) %>
+        <span class="badge bg-warning text-bg-warning"><%= _("Organizer") %></span>
+      <% end %>
+    </li>
+    <% if @vote.expire_on %>
+      <li><%= _("Closed on %{date}") % { date: format_date_and_time(@vote.expire_on) } %></li>
+    <% end %>
+  </ul>
+</div>
 
-<% if @vote.expire_on %>
-<p><%= _("Closing date: %{date}") % { date: format_date_and_time(@vote.expire_on) } %></p>
+<div class="mb-5">
+  <div class="lead">
+    <%= markdown(@vote.description) %>
+  </div>
+</div>
+
+<h2 class="mb-4"><%= _("Options") %></h2>
+
+<% @vote.candidates.each do |candidate| %>
+  <div class="card mb-4">
+    <div class="card-body">
+      <h3 class="mb-3"><%= candidate.name %></h3>
+      <%= markdown(candidate.description) %>
+    </div>
+  </div>
 <% end %>
 
-<%= markdown(@vote.description) %>
+<div class="mb-5"></div>
 
-<% unless @vote.ratings.blank? %>
+<h2 class="mb-4"><%= _("Results") %></h2>
 
-<h2><%= _("All ratings") %></h2>
+<% if @vote.ratings.blank? %>
 
-<table>
-  <tr>
-    <th><%= _("Participant") %></th>
-    <% @vote.candidates.each do |candidate| %>
-    <th><%= candidate.name %></th>
-    <% end %>
-  </tr>
-  <% @vote.ratings.collect { |rating| rating.user }.uniq.each do |user| %>
-  <tr>
-    <td><%= user.email %></td>
-    <% @vote.candidates.each do |candidate| %>
-    <% if rating = @vote.ratings.find { |rating| rating.user == user and rating.candidate == candidate } %>
-    <% value = settings.values.select { |e| e[:id] == rating.value }.first %>
-    <td class="value-<%= value[:id] %>"><%= _(value[:label]) %></td>
-    <% end %>
-    <% end %>
-  </tr>
-  <% end %>
-</table>
+<%= _("No results are available because nobody voted on this vote.") %>
 
-<h2><%= _("Results") %></h2>
+<% else %>
 
-<table>
+<table class="table mb-4">
   <tr>
     <th><%= _("Rank") %></th>
     <th><%= _("Candidate") %></th>
@@ -47,7 +55,7 @@
     <td><%= i %></td>
     <td><%= candidate.name %></td>
     <% value = settings.values.select { |e| e[:id] == candidate.mj.mj }.first %>
-    <td class="value-<%= value[:id] %>"><%= _(value[:label]) %></td>
+    <td class="h5"><span class="badge bg-<%= value[:id] %>"><%= _(value[:label]) %></span></td>
     <td><%= candidate.mj.proponents %></td>
     <td><%= candidate.mj.opponents %></td>
   </tr>
@@ -68,15 +76,43 @@ end
 %>
 <%= bar_chart data, colors: colors, stacked: true, legend: 'bottom' %>
 
-<% else %>
+<div class="mb-5"></div>
 
-<h2><%= _("Results") %></h2>
+<h2 class="mb-4"><%= _("Ratings") %></h2>
 
-<%= _("No results are available because nobody voted on this vote.") %>
+<table class="table table-striped mb-5">
+  <thead>
+    <tr>
+      <th><%= _("Participant") %></th>
+      <% @vote.candidates.each do |candidate| %>
+        <th><%= candidate.name %></th>
+      <% end %>
+    </tr>
+  </thead>
+  <% @vote.ratings.collect { |rating| rating.user }.uniq.each do |user| %>
+  <tr>
+    <td><%= user.email %></td>
+    <% @vote.candidates.each do |candidate| %>
+    <% if rating = @vote.ratings.find { |rating| rating.user == user and rating.candidate == candidate } %>
+    <% value = settings.values.select { |e| e[:id] == rating.value }.first %>
+    <td class="h5"><span class="badge bg-<%= value[:id] %>"><%= _(value[:label]) %></td>
+    <% end %>
+    <% end %>
+  </tr>
+  <% end %>
+</table>
 
 <% end %>
 
-<h2><%= _("Organizers") %></h2>
+<% if @vote.users.exists?(current_user.id) and @vote.expire_on.nil? %>
+
+<form action="/votes/<%= @vote.secure_id %>/reopen" method="post" class="mb-5">
+  <button type="submit" class="btn btn-outline-primary"><%= _("Reopen voting period") %></button>
+</form>
+
+<% end %>
+
+<h2 class="mb-4"><%= _("Organizers") %></h2>
 
 <ul>
   <% @vote.organizers.each do |organizer| %>
@@ -86,20 +122,14 @@ end
 
 <% if @vote.users.exists?(current_user.id) and @vote.expire_on.nil? %>
 
-<h3><%= _("Actions for organizers") %></h3>
+<h3 class="mb-3"><%= _("Add organizer") %></h3>
 
-<form action="/votes/<%= @vote.secure_id %>/reopen" method="post">
-  <button type="submit"><%= _("Reopen voting period") %></button>
-</form>
-
-<h3><%= _("Add organizer") %></h3>
-
-<form action="/votes/<%= @vote.secure_id %>/organizers" method="post">
-  <p>
-    <label for="email"><%= _("Email") %></label>
-    <input type="text" name="email">
-  </p>
-  <button type="submit"><%= _("Add organizer") %></button>
+<form action="/votes/<%= @vote.secure_id %>/organizers" method="post" class="mb-5">
+  <div class="mb-3">
+    <label for="email" class="form-label"><%= _("Email") %></label>
+    <input type="text" name="email" class="form-control">
+  </div>
+  <button type="submit" class="btn btn-outline-primary"><%= _("Add organizer") %></button>
 </form>
 
 <% end %>