Improve styles for budgets voting phase

app/assets/stylesheets/_consul_settings.scss

@@ -17,7 +17,8 @@ $line-height:         rem-calc(24);
 $tiny-font-size:      rem-calc(12);
 
 $brand:             #004a83;
-$dark:              darken($brand, 10%);
+$brand-secondary:   darken($brand, 10%);
+$dark:              $brand-secondary;
 
 $text:              #222;
 $text-medium:       #515151;

app/assets/stylesheets/budgets/ballot/investment.scss

@@ -1,25 +1,38 @@
 .ballot-list li {
-  background: #f9f9f9;
+  $side-padding: $line-height / 2;
+  $close-icon-size: rem-calc(20);
+  $close-icon-margin: rem-calc(6);
+
+  background: #f1f1f1;
+  border-radius: rem-calc(12);
   line-height: $line-height;
   margin-bottom: $line-height / 4;
-  padding: $line-height $line-height / 2;
+  padding: $line-height $side-padding;
   position: relative;
 
   a {
     color: $text;
   }
 
-  span {
+  .ballot-list-title {
     display: block;
-    font-style: italic;
+    padding-right: calc(#{$close-icon-size} + #{$close-icon-margin} - #{$side-padding});
+  }
+
+  .ballot-list-price {
+    color: $budget;
+    display: block;
+    font-weight: bold;
+    margin-top: $line-height / 2;
+    text-align: right;
   }
 
   .remove-budget-investment {
     @include has-fa-icon(times, solid);
-    font-size: rem-calc(20);
+    font-size: $close-icon-size;
     position: absolute;
-    right: rem-calc(6);
+    right: $close-icon-margin;
-    top: rem-calc(6);
+    top: $close-icon-margin;
 
     &::before {
       margin-right: 0;

app/assets/stylesheets/budgets/investments/ballot.scss

@@ -0,0 +1,10 @@
+.ballot {
+
+  .button-remove-support {
+    @include has-fa-icon(times, solid);
+    background: #e7eaec;
+    color: $brand-secondary;
+    font-weight: bold;
+    margin-top: $line-height;
+  }
+}

app/assets/stylesheets/budgets/investments/sidebar.scss

@@ -0,0 +1,17 @@
+.my-ballot {
+  border-top: 1px solid $border;
+
+  h2 + * {
+    @include has-fa-icon(vote-yea, solid);
+
+    &::before {
+      float: left;
+      font-size: rem-calc(50);
+      margin-right: rem-calc(10);
+    }
+
+    + * {
+      clear: both;
+    }
+  }
+}

app/assets/stylesheets/participation.scss

@@ -812,6 +812,8 @@
     .button-support {
       background: $budget;
       color: #fff;
+      font-size: $base-font-size;
+      font-weight: bold;
 
       &:hover {
         background: $budget-hover;
@@ -1168,12 +1170,24 @@
 
   &.budget-heading {
     min-height: $line-height * 10;
+
+    .check-ballot {
+      @include has-fa-icon(chevron-right, solid, after);
+      float: right;
+      min-width: rem-calc(240);
+
+      &::after {
+        margin-left: $line-height / 4;
+        margin-right: 0;
+      }
+    }
   }
 
   h2 {
     margin-bottom: 0;
   }
 
+  h1,
   h2,
   h3,
   .back,
@@ -1218,18 +1232,43 @@
 
   .progress {
     background: #212033;
+    border-radius: rem-calc(12);
     clear: both;
     margin-bottom: 0;
+    overflow: hidden;
   }
 
   .progress-meter {
     background: #fdcb10;
-    border-radius: 0;
+    border-radius: rem-calc(12);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
     transition: width 2s;
   }
 
-  .spent-amount-text {
+  .total-amount,
+  .amount-available {
+    font-weight: bold;
     margin-bottom: 0;
+    text-transform: uppercase;
+  }
+
+  .total-amount {
+    font-size: $tiny-font-size;
+
+    @include breakpoint(medium) {
+      text-align: right;
+    }
+
+    span {
+      font-size: $base-font-size;
+    }
+  }
+
+  .amount-available {
+    display: block;
+    font-size: $small-font-size;
+    margin-top: $line-height / 8;
     position: relative;
     text-align: right;
     white-space: nowrap;
@@ -1242,22 +1281,11 @@
       line-height: 0;
       position: absolute;
       right: -0.5em;
+      top: -$line-height / 8;
     }
-  }
-
-  .total-amount {
-    color: #fff;
-    font-size: rem-calc(18);
-    font-weight: bold;
-    float: right;
-  }
-
-  .amount-available {
-    display: block;
 
     span {
       font-size: rem-calc(24);
-      font-weight: bold;
     }
   }
 }
@@ -1350,11 +1378,6 @@
     background-color: $budget;
     transition: height 0.3s;
 
-    h2 {
-      margin-bottom: $line-height / 2;
-      transition: font-size 0.3s;
-    }
-
     &.is-fixed {
       height: auto;
       left: 0;
@@ -1370,6 +1393,14 @@
       }
     }
   }
+
+  h2 {
+    transition: font-size 0.3s;
+
+    @include breakpoint(small only) {
+      margin: $line-height 0;
+    }
+  }
 }
 
 .budgets-stats {

app/components/budgets/ballot/investment_component.html.erb

@@ -1,6 +1,6 @@
 <li id="<%= list_item_id %>">
   <%= investment_title %>
-  <span><%= investment.formatted_price %></span>
+  <%= investment_price %>
 
   <% if budget.balloting? %>
     <%= link_to delete_path,

app/components/budgets/ballot/investment_component.rb

@@ -19,6 +19,10 @@ class Budgets::Ballot::InvestmentComponent < ApplicationComponent
       link_to investment.title, budget_investment_path(budget, investment)
     end
 
+    def investment_price
+      tag.span investment.formatted_price, class: "ballot-list-price"
+    end
+
     def delete_path
       budget_ballot_line_path(budget, id: investment.id)
     end

app/components/budgets/ballot/investment_for_sidebar_component.rb

@@ -14,7 +14,7 @@ class Budgets::Ballot::InvestmentForSidebarComponent < Budgets::Ballot::Investme
     end
 
     def investment_title
-      investment.title
+      tag.span investment.title, class: "ballot-list-title"
     end
 
     def delete_path

app/models/budget/ballot.rb

@@ -63,10 +63,11 @@ class Budget
     def voting_style
       @voting_style ||= voting_style_class.new(self)
     end
-    delegate :amount_available, :amount_available_info, :amount_spent, :amount_spent_info, :amount_limit,
+    delegate :amount_available, :amount_available_info, :amount_progress, :amount_spent,
-             :amount_limit_info, :change_vote_info, :enough_resources?, :formatted_amount_available,
+             :amount_spent_info, :amount_limit, :amount_limit_info, :change_vote_info,
-             :formatted_amount_limit, :formatted_amount_spent, :not_enough_resources_error,
+             :enough_resources?, :formatted_amount_available, :formatted_amount_limit,
-             :percentage_spent, :reason_for_not_being_ballotable, :voted_info,
+             :formatted_amount_spent, :not_enough_resources_error, :percentage_spent,
+             :reason_for_not_being_ballotable, :voted_info,
              to: :voting_style
 
     private

app/models/budget/voting_styles/base.rb

@@ -10,13 +10,25 @@ class Budget::VotingStyles::Base
   end
 
   def change_vote_info(link:)
-    I18n.t("budgets.investments.index.sidebar.change_vote_info.#{name}", link: link)
+    I18n.t(
+      "budgets.investments.index.sidebar.change_vote_info.#{name}",
+      link: link,
+      phase_end_date: I18n.l(budget.current_phase.ends_at.to_date, format: :long)
+    )
+  end
+
+  def amount_progress(heading)
+    I18n.t(
+      "budgets.ballots.show.amount_progress",
+      amount_spent: amount_spent_info(heading),
+      amount_limit: amount_limit_info(heading)
+    )
   end
 
   def voted_info(heading)
     I18n.t("budgets.investments.index.sidebar.voted_info.#{name}",
       count: investments(heading).count,
-      amount_spent: ballot.budget.formatted_amount(investments_price(heading)))
+      amount_spent: budget.formatted_amount(investments_price(heading)))
   end
 
   def amount_available_info(heading)
@@ -56,6 +68,10 @@ class Budget::VotingStyles::Base
 
   private
 
+    def budget
+      ballot.budget
+    end
+
     def investments(heading)
       ballot.investments.by_heading(heading.id)
     end

app/views/budgets/ballot/_progress_bar.html.erb

@@ -1,6 +1,6 @@
-<span class="total-amount">
+<p id="total_amount" class="total-amount">
-  <%= sanitize(ballot.amount_limit_info(heading)) %>
+  <%= sanitize(ballot.amount_progress(heading)) %>
-</span>
+</p>
 
 <div class="progress" role="progressbar" tabindex="0"
      aria-valuenow="<%= ballot.percentage_spent(heading) %>" aria-valuemin="0" aria-valuemax="100">
@@ -9,6 +9,6 @@
   </div>
 </div>
 
-<p id="amount_spent" class="spent-amount-text" style="width: <%= ballot.percentage_spent(heading) %>%">
+<p id="amount_available" class="amount-available" style="width: <%= ballot.percentage_spent(heading) %>%">
-  <%= render "budgets/ballot/progress_bar/#{ballot.budget.voting_style}", ballot: ballot, heading: heading %>
+  <%= sanitize(ballot.amount_available_info(heading)) %>
 </p>

app/views/budgets/ballot/progress_bar/_approval.html.erb

@@ -1,3 +0,0 @@
-<%= sanitize(t("budgets.progress_bar.votes",
-               count: ballot.amount_spent(heading),
-               limit: ballot.amount_limit(heading))) %>

app/views/budgets/ballot/progress_bar/_knapsack.html.erb

@@ -1,5 +0,0 @@
-<small><%= t("budgets.progress_bar.assigned") %></small><%= ballot.formatted_amount_spent(heading) %>
-<span id="amount_available" class="amount-available">
-  <small><%= t("budgets.progress_bar.available") %></small>
-  <span><%= ballot.formatted_amount_available(heading) %></span>
-</span>

app/views/budgets/investments/_ballot.html.erb

@@ -2,7 +2,7 @@
 <div class="js-participation supports ballot">
   <% if ballot.has_investment?(investment) %>
 
-    <div class="remove supported inline-block">
+    <div class="remove supported">
       <span class="icon-check-circle"
             title="<%= t("budgets.investments.investment.already_added") %>">
       </span>
@@ -14,7 +14,7 @@
                     budget_ballot_line_path(id: investment.id,
                                             budget_id: investment.budget_id,
                                             investments_ids: investment_ids),
-                    class: "delete small expanded",
+                    class: "button button-remove-support expanded",
                     method: :delete,
                     remote: true %>
       <% end %>
@@ -31,7 +31,7 @@
                     budget_ballot_lines_path(investment_id: investment.id,
                                              budget_id: investment.budget_id,
                                              investments_ids: investment_ids),
-                    class: "button button-support small expanded",
+                    class: "button button-support expanded",
                     title: t("budgets.investments.investment.support_title"),
                     method: :post,
                     remote: true %>

app/views/budgets/investments/_header.html.erb

@@ -9,7 +9,7 @@
           <% if can? :show, @ballot %>
             <%= link_to t("budgets.investments.header.check_ballot"),
                         budget_ballot_path(@budget),
-                        class: "button float-right" %>
+                        class: "check-ballot button" %>
           <% end %>
         </div>
       </div>
@@ -26,7 +26,7 @@
                 <h2>
                   <%= t("budgets.investments.index.by_heading", heading: @heading.name) %>
                 </h2>
-                <div id="progress_bar" class="no-margin-top">
+                <div id="progress_bar">
                   <%= render "budgets/ballot/progress_bar", ballot: @ballot, heading: @heading %>
                 </div>
               </div>

app/views/budgets/investments/_sidebar.html.erb

@@ -13,26 +13,7 @@
 <% end %>
 
 <% if @heading && can?(:show, @ballot) %>
-  <p class="callout">
+  <div class="my-ballot">
-    <%= sanitize(@ballot.change_vote_info(
-        link: link_to(t("budgets.investments.index.sidebar.change_vote_link"),
-            budget_ballot_path(@budget)))) %>
-  </p>
-<% end %>
-
-<% if @heading && !@heading.content_blocks.where(locale: I18n.locale).empty? %>
-  <%= render "budgets/investments/content_blocks" %>
-<% end %>
-<% if @map_location&.available? %>
-  <%= render "budgets/investments/map" %>
-<% end %>
-<%= render "shared/tag_cloud", taggable: "Budget::Investment" %>
-<%= render "budgets/investments/categories" %>
-
-<% if @heading && can?(:show, @ballot) %>
-
-  <div class="sidebar-divider"></div>
-
     <h2 class="sidebar-title">
       <%= t("budgets.investments.index.sidebar.my_ballot") %>
     </h2>
@@ -57,6 +38,12 @@
       <p><strong><%= t("budgets.investments.index.sidebar.zero") %></strong></p>
     <% end %>
 
+    <p>
+      <%= sanitize(@ballot.change_vote_info(
+          link: link_to(t("budgets.investments.index.sidebar.change_vote_link"),
+              budget_ballot_path(@budget)))) %>
+    </p>
+
     <ul class="ballot-list">
       <% if @heading %>
         <%= render Budgets::Ballot::InvestmentForSidebarComponent.with_collection(
@@ -69,4 +56,14 @@
     <%= link_to t("budgets.investments.header.check_ballot"),
                   budget_ballot_path(@budget),
                   class: "button hollow expanded" %>
+  </div>
 <% end %>
+
+<% if @heading && !@heading.content_blocks.where(locale: I18n.locale).empty? %>
+  <%= render "budgets/investments/content_blocks" %>
+<% end %>
+<% if @map_location&.available? %>
+  <%= render "budgets/investments/map" %>
+<% end %>
+<%= render "shared/tag_cloud", taggable: "Budget::Investment" %>
+<%= render "budgets/investments/categories" %>

app/views/budgets/investments/index.html.erb

@@ -94,7 +94,7 @@
 
     <div class="small-12 medium-3 column">
       <aside class="margin-bottom">
-        <div id="sidebar">
+        <div id="sidebar" class="budget-investments-sidebar">
           <%= render "/budgets/investments/sidebar" %>
         </div>
       </aside>

config/locales/en/budgets.yml

@@ -3,8 +3,9 @@ en:
     ballots:
       show:
         title: Your ballot
+        amount_progress: "%{amount_spent} / %{amount_limit}"
         amount_available:
-          knapsack: "You still have <span>%{count}</span> to invest."
+          knapsack: "Still available to you <span>%{count}</span>"
           approval:
             zero: "You can still cast <span>%{count}</span> votes."
             one: "You can still cast <span>%{count}</span> vote."
@@ -16,7 +17,7 @@ en:
             one: "Votes cast: <span>%{count}</span>"
             other: "Votes cast: <span>%{count}</span>"
         amount_limit:
-          knapsack: "%{count}"
+          knapsack: "Total budget <span>%{count}</span>"
           approval:
             one: "You can vote <span>1</span> project"
             other: "You can vote up to <span>%{count}</span> projects"
@@ -107,12 +108,12 @@ en:
               one: "<strong>You voted one proposal</strong>"
               other: "<strong>You voted %{count} proposals</strong>"
           change_vote_info:
-            knapsack: "You can %{link} at any time until the close of this phase. No need to spend all the money available."
+            knapsack: "You can %{link} at any time until %{phase_end_date}. No need to spend all the money available."
-            approval: "You can %{link} at any time until the close of this phase."
+            approval: "You can %{link} at any time until %{phase_end_date}."
           change_vote_link: "change your vote"
           different_heading_assigned: "You have active votes in another heading: %{heading_link}"
           change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
-          check_ballot_link: "check and confirm my ballot"
+          check_ballot_link: "submit my ballot"
           zero: You have not voted any investment project in this group.
           verified_only: "To create a new budget investment %{verify}."
           create: "Create a budget investment"
@@ -169,14 +170,7 @@ en:
         different_heading_assigned: "You have active votes in another heading: %{heading_link}"
         change_ballot: "If your change your mind you can remove your votes in %{check_ballot} and start again."
         check_ballot_link: "submit my ballot"
-        price: "This heading has a budget of"
+        price: "Total budget"
-    progress_bar:
-      assigned: "You have assigned: "
-      available: "Available budget: "
-      votes:
-        zero: "You have selected <strong>0</strong> projects out of <strong>%{limit}</strong>"
-        one: "You have selected <strong>1</strong> project out of <strong>%{limit}</strong>"
-        other: "You have selected <strong>%{count}</strong> projects out of <strong>%{limit}</strong>"
     show:
       see_results: See results
     results:

config/locales/es/budgets.yml

@@ -3,20 +3,21 @@ es:
     ballots:
       show:
         title: Mis votos
+        amount_progress: "%{amount_spent} / %{amount_limit}"
         amount_available:
-          knapsack: "Te quedan <span>%{count}</span> para invertir"
+          knapsack: "Todavía disponible <span>%{count}</span>"
           approval:
             zero: "Te quedan <span>%{count}</span> votos disponibles"
             one: "Te queda <span>%{count}</span> voto disponible"
             other: "Te quedan <span>%{count}</span> votos disponibles"
         amount_spent:
-          knapsack: "Coste total <span>%{count}</span>"
+          knapsack: "Has asignado <span>%{count}</span>"
           approval:
             zero: "Votos: <span>%{count}</span>"
             one: "Votos: <span>%{count}</span>"
             other: "Votos: <span>%{count}</span>"
         amount_limit:
-          knapsack: "%{count}"
+          knapsack: "Presupuesto total <span>%{count}</span>"
           approval:
             one: "Puedes votar <span>1</span> proyecto"
             other: "Puedes votar hasta <span>%{count}</span> proyectos"
@@ -107,8 +108,8 @@ es:
               one: "<strong>Has votado un proyecto</strong>"
               other: "<strong>Has votado %{count} proyectos</strong>"
           change_vote_info:
-            knapsack: "Puedes %{link} en cualquier momento hasta el cierre de esta fase. No hace falta que gastes todo el dinero disponible."
+            knapsack: "Puedes %{link} en cualquier momento hasta el %{phase_end_date}. No hace falta que gastes todo el dinero disponible."
-            approval: "Puedes %{link} en cualquier momento hasta el cierre de esta fase."
+            approval: "Puedes %{link} en cualquier momento hasta el %{phase_end_date}."
           change_vote_link: "cambiar tus votos"
           different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
           change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
@@ -169,14 +170,7 @@ es:
         different_heading_assigned: "Ya apoyaste proyectos de otra sección del presupuesto: %{heading_link}"
         change_ballot: "Si cambias de opinión puedes borrar tus votos en %{check_ballot} y volver a empezar."
         check_ballot_link: "revisar y confirmar mis votos"
-        price: "Esta partida tiene un presupuesto de"
+        price: "Presupuesto total"
-    progress_bar:
-      assigned: "Has asignado: "
-      available: "Presupuesto disponible: "
-      votes:
-        zero: "Has seleccionado <strong>0</strong> proyectos de <strong>%{limit}</strong>"
-        one: "Has seleccionado <strong>1</strong> proyecto de <strong>%{limit}</strong>"
-        other: "Has seleccionado <strong>%{count}</strong> proyectos de <strong>%{limit}</strong>"
     show:
       see_results: Ver resultados
     results:

spec/system/budgets/ballots_spec.rb

@@ -125,7 +125,7 @@ describe "Ballots" do
         visit budget_investments_path(budget, heading_id: new_york)
         add_to_ballot("Bring back King Kong")
 
-        expect(page).to have_css("#amount_spent", text: "€10,000")
+        expect(page).to have_css("#total_amount", text: "€10,000")
         expect(page).to have_css("#amount_available", text: "€990,000")
 
         within("#sidebar") do
@@ -136,7 +136,7 @@ describe "Ballots" do
 
         add_to_ballot("Paint cabs black")
 
-        expect(page).to have_css("#amount_spent", text: "€30,000")
+        expect(page).to have_css("#total_amount", text: "€30,000")
         expect(page).to have_css("#amount_available", text: "€970,000")
 
         within("#sidebar") do
@@ -152,7 +152,7 @@ describe "Ballots" do
         visit budget_investments_path(budget, heading_id: new_york)
 
         expect(page).to have_content investment.title
-        expect(page).to have_css("#amount_spent", text: "€10,000")
+        expect(page).to have_css("#total_amount", text: "€10,000")
         expect(page).to have_css("#amount_available", text: "€990,000")
 
         within("#sidebar") do
@@ -165,7 +165,7 @@ describe "Ballots" do
           find(".remove a").click
         end
 
-        expect(page).to have_css("#amount_spent", text: "€0")
+        expect(page).to have_css("#total_amount", text: "€0")
         expect(page).to have_css("#amount_available", text: "€1,000,000")
 
         within("#sidebar") do
@@ -217,7 +217,7 @@ describe "Ballots" do
 
         add_to_ballot("Cheap")
 
-        expect(page).to have_css("#amount_spent",     text: "€10,000")
+        expect(page).to have_css("#total_amount",     text: "€10,000")
         expect(page).to have_css("#amount_available", text: "€9,990,000")
 
         within("#sidebar") do
@@ -227,12 +227,12 @@ describe "Ballots" do
 
         visit budget_investments_path(budget, heading_id: district_heading1)
 
-        expect(page).to have_css("#amount_spent", text: "€0")
+        expect(page).to have_css("#total_amount", text: "€0")
         expect(page).to have_css("#amount_available", text: "€1,000,000")
 
         add_to_ballot("Average")
 
-        expect(page).to have_css("#amount_spent",     text: "€20,000")
+        expect(page).to have_css("#total_amount",     text: "€20,000")
         expect(page).to have_css("#amount_available", text: "€980,000")
 
         within("#sidebar") do
@@ -245,7 +245,7 @@ describe "Ballots" do
 
         visit budget_investments_path(budget, heading_id: city_heading)
 
-        expect(page).to have_css("#amount_spent",     text: "€10,000")
+        expect(page).to have_css("#total_amount",     text: "€10,000")
         expect(page).to have_css("#amount_available", text: "€9,990,000")
 
         within("#sidebar") do
@@ -270,7 +270,7 @@ describe "Ballots" do
       add_to_ballot("Park expansion")
 
       within("#progress_bar") do
-        expect(page).to have_css("#amount_spent", text: "€10,000")
+        expect(page).to have_css("#total_amount", text: "€10,000")
       end
     end
   end
@@ -323,7 +323,7 @@ describe "Ballots" do
     end
   end
 
-  context "Showing the ballot" do
+  context "Showing the ballot", :js do
     scenario "Displaying the correct group, heading, count & amount" do
       group1 = create(:budget_group, budget: budget)
       group2 = create(:budget_group, budget: budget)
@@ -350,13 +350,13 @@ describe "Ballots" do
       within("#budget_group_#{group1.id}") do
         expect(page).to have_content "#{group1.name} - #{heading1.name}"
         expect(page).to have_content "Amount spent €20"
-        expect(page).to have_link "You still have €80 to invest.", href: budget_group_path(budget, group1)
+        expect(page).to have_link "Still available to you €80", href: budget_group_path(budget, group1)
       end
 
       within("#budget_group_#{group2.id}") do
         expect(page).to have_content "#{group2.name} - #{heading2.name}"
         expect(page).to have_content "Amount spent €15"
-        expect(page).to have_content "You still have €35 to invest"
+        expect(page).to have_content "Still available to you €35"
       end
     end
 
@@ -395,7 +395,7 @@ describe "Ballots" do
     login_as(user)
     visit budget_investments_path(budget, heading_id: new_york.id)
 
-    expect(page).to have_css("#amount_spent", text: "€30,000")
+    expect(page).to have_css("#total_amount", text: "€30,000")
     expect(page).to have_css("#amount_available", text: "€970,000")
 
     within("#sidebar") do
@@ -410,7 +410,7 @@ describe "Ballots" do
       click_link "Remove vote"
     end
 
-    expect(page).to have_css("#amount_spent", text: "€20,000")
+    expect(page).to have_css("#total_amount", text: "€20,000")
     expect(page).to have_css("#amount_available", text: "€980,000")
 
     within("#sidebar") do

spec/system/budgets/votes_spec.rb

@@ -211,7 +211,7 @@ describe "Votes" do
       add_to_ballot(investment1.title)
 
       expect(page).to have_content("Remove vote")
-      expect(page).to have_content("You have selected 1 project out of 2")
+      expect(page).to have_content("YOU CAN STILL CAST 1 VOTE")
 
       within(".budget-investment", text: investment2.title) do
         find("div.ballot").hover