From 36abba15e6378fbc70ad63c8e9fef72ffdb6ee6e Mon Sep 17 00:00:00 2001
From: Alessandro Cuoghi <agileontheweb@gmail.com>
Date: Thu, 10 Jan 2019 20:01:31 +0100
Subject: [PATCH] Dashboard proposals stats V.2

- Found new solution to show dashboard proposals stats
- Added new class for behaviour change in the medium version
- Moved the progress bar to the bottom
- Moved below by adding counter-label class to the text support
- Added class to support text to push under the counter
---
 app/assets/stylesheets/dashboard.scss         | 19 +++---
 .../dashboard/_proposal_totals.html.erb       | 61 ++++++++++---------
 config/locales/es/general.yml                 |  4 +-
 3 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index b7dac1e4b..b6a70ae86 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -27,17 +27,23 @@
 }
 
 .dashboard-proposals-stats {
+  text-align: center;
   border: 2px solid $highlight;
   border-radius: rem-calc(6);
   margin-bottom: $line-height;
   padding: $line-height / 2;
 
-  .counter {
-    text-align: center;
+  @include breakpoint(medium only) {
+    .change-behaviour {
+      padding: $line-height;
+      margin-top: $line-height;
+      float: left;
+      width: 100%;
+      margin-top: $line-height / 2;
+    }
   }
 
   .counter-divider {
-
     @include breakpoint(medium) {
       border-left: 2px solid $highlight;
     }
@@ -48,10 +54,9 @@
   }
 
   .supports {
-    margin-top: $line-height;
 
-    @include breakpoint(large) {
-      margin-top: 0;
+    .counter-label {
+      display: block;
     }
   }
 
@@ -68,7 +73,7 @@
   .progress {
     background: #f0efea;
     border-radius: rem-calc(6);
-    height: $line-height;
+    height: $line-height / 2;
   }
 
   .progress-meter {
diff --git a/app/views/layouts/dashboard/_proposal_totals.html.erb b/app/views/layouts/dashboard/_proposal_totals.html.erb
index 06059067a..7b72cdd30 100644
--- a/app/views/layouts/dashboard/_proposal_totals.html.erb
+++ b/app/views/layouts/dashboard/_proposal_totals.html.erb
@@ -18,39 +18,44 @@
       </div>
     </div>
 
-    <div class="small-12 large-4 column supports">
-      <div class="counter">
-        <div class="counter-value">
-          <%= number_with_delimiter(proposal.votes_for.size, delimiter: '.') %>
-          /
-          <%= t("layouts.dashboard.proposal_totals.support_count", count: number_with_delimiter(next_goal_supports, delimiter: '.')) %>
-        </div>
-        <span class="counter-label"><%= t("layouts.dashboard.proposal_totals.current_goal") %></span>
-      </div>
-    </div>
-
-    <div class="small-12 large-4 column">
-      <div class="row">
-        <div class="small-12 column">
-          <div class="next-goal-progress">
-            <%= next_goal_progress %>%
+    <div class="change-behaviour">
+      <div class="small-12 medium-6 large-4 column supports">
+        <div class="counter">
+          <div class="counter-value">
+            <%= number_with_delimiter(proposal.votes_for.size, delimiter: '.') %>
+            /
+            <%= t("layouts.dashboard.proposal_totals.support_count", count: number_with_delimiter(next_goal_supports, delimiter: '.')).html_safe %>
           </div>
-          <div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0"
-               aria-valuetext="<%= "#{next_goal_progress}%" %>" aria-valuemax="100">
-             <div class="progress-meter" style="width: <%= next_goal_progress %>%"></div>
+          <span class="counter-label"><%= t("layouts.dashboard.proposal_totals.current_goal") %></span>
+        </div>
+
+        <div class="next-goal-progress">
+          <%= next_goal_progress %>%
+        </div>
+        <div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0"
+             aria-valuetext="<%= "#{next_goal_progress}%" %>" aria-valuemax="100">
+           <div class="progress-meter" style="width: <%= next_goal_progress %>%"></div>
+        </div>
+      </div>
+
+      <div class="small-12 medium-6 large-4 column">
+        <div class="row">
+          <div class="small-12 medium-12 column">
+
+          </div>
+
+          <div class="small-12 medium-12 column">
+            <div class="proposal-link">
+              <% if proposal.draft? %>
+                <%= link_to t('layouts.dashboard.proposal_totals.preview_proposal'), proposal_path(proposal), class: 'button success expanded', target: '_blank' %>
+              <% else %>
+                <%= link_to t('layouts.dashboard.proposal_totals.show_proposal'), proposal_path(proposal), class: 'button success expanded', target: '_blank' %>
+              <% end %>
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="small-12 column">
-      <div class="proposal-link">
-        <% if proposal.draft? %>
-          <%= link_to t('layouts.dashboard.proposal_totals.preview_proposal'), proposal_path(proposal), class: 'button success expanded', target: '_blank' %>
-        <% else %>
-          <%= link_to t('layouts.dashboard.proposal_totals.show_proposal'), proposal_path(proposal), class: 'button success expanded', target: '_blank' %>
-        <% end %>
-      </div>
-    </div>
   </div>
 </div>
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index 46422fd8c..342a74dc9 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -211,8 +211,8 @@ es:
         preview_proposal: Previsualizar propuesta
         current_goal: Meta actual
         support_count:
-          one: "%{count} apoyo"
-          other: "%{count} apoyos"
+          one: "%{count} <span class='counter-label'>Apoyo</span>"
+          other: "%{count} <span class='counter-label'>Apoyos</span>"
     footer:
       accessibility: Accesibilidad
       conditions: Condiciones de uso