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
This commit is contained in:
Alessandro Cuoghi
2019-01-10 20:01:31 +01:00
committed by taitus
parent e0fa82a533
commit 36abba15e6
3 changed files with 47 additions and 37 deletions

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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