Adds styles to dashboard layouts, progress, show and partials

app/views/dashboard/_document.html.erb

@@ -1,10 +1,8 @@
 <p>
-  <%= link_to document.attachment.url, target: '_blank' do %>
+  <%= link_to document.attachment.url, target: "_blank" do %>
     <%= document.title %>
-    (
-      <%= document.humanized_content_type %>
-      &nbsp;|&nbsp;
-      <%= number_to_human_size(document.attachment_file_size, precision: 2) %>
-    )
+    (<%= document.humanized_content_type %>
+    &nbsp;|&nbsp;
+    <%= number_to_human_size(document.attachment_file_size, precision: 2) %>)
   <% end %>
 </p>

app/views/dashboard/_form.html.erb

@@ -1,8 +1,7 @@
 <% if dashboard_action.request_to_administrators && !dashboard_action.requested_for?(proposal) %>
-  <%= form_for @dashboard_executed_action, 
-               url: create_request_proposal_dashboard_action_url(proposal, dashboard_action) do |f| %>
-    <div class="actions">
-      <%= f.submit(class: 'button', value: t("dashboard.form.request")) %>
-    </div>
+  <%= form_for @dashboard_executed_action,
+               url: create_request_proposal_dashboard_action_url(proposal,
+                                                                 dashboard_action) do |f| %>
+    <%= f.submit(class: "button", value: t("dashboard.form.request")) %>
   <% end %>
 <% end %>

app/views/dashboard/_goal.html.erb

@@ -1,27 +1,21 @@
-<div class="next-goal row">
-  <div class="column small-12">
-    <i class="fi-flag"></i>
+<div class="next-goal">
+  <div class="goal-supports">
     <strong>
-      <%= t("dashboard.goal.target_supports", count: number_with_precision(goal.required_supports, delimiter: '.', precision: 0)) %>
+      <%= t("dashboard.goal.target_supports",
+          count: number_with_precision(goal.required_supports,
+          delimiter: '.', precision: 0)) %>
     </strong>
   </div>
-  <div class="column small-12">&nbsp;</div>
 
-  <div class="column small-12">
-    <i class="fi-unlock"></i>
+  <div class="goal-resource">
     <strong><%= goal.title %></strong>
-  </div>
-  <div class="column small-12 skip-icon">
-    <p class="help-text"><%= t("dashboard.goal.unlocked_resource") %></p>
+    <span class="help-text"><%= t("dashboard.goal.unlocked_resource") %></span>
   </div>
 
   <% if goal.day_offset.positive? %>
-    <div class="column small-12">
+    <div class="goal-days">
       <strong><%= t("dashboard.goal.days", count: goal.day_offset) %></strong>
-    </div>
-    <div class="column small-12">
-      <p class="help-text"><%= t("dashboard.goal.ideal_time") %></p>
+      <span class="help-text"><%= t("dashboard.goal.ideal_time") %></span>
     </div>
   <% end %>
 </div>
-

app/views/dashboard/_mailing_resource.html.erb

@@ -1,26 +1,16 @@
 <% if can?(:manage_mailing, proposal) %>
-  <div class="column">
-    <div class="card resource-card primary"
-         data-tooltip title="<%= t("dashboard.resource.request_resource") %>"
-         data-position="bottom" data-alignment="right">
-      <div class="card-section">
-        <p class="text-right">
-          <i class="fi-pencil resource-icon"></i>
-        </p>
-        <h4 class="text-center"><%= t("dashboard.menu.mailing") %></h4>
-        <p class="text-center">
-          <%= Setting['proposals.email_short_title'] %>
-        </p>
-      </div>
+  <div class="small-12 medium-6 large-3 column end">
+    <div class="resource-card" data-equalizer-watch="resources">
+      <h4><%= t("dashboard.menu.mailing") %></h4>
+      <p class="resource-description">
+        <%= Setting['proposals.email_short_title'] %>
+      </p>
 
-      <div class="card-section text-center bottom-container">
-        <div class="bottom-element text-center">
-          <%= link_to t("dashboard.resource.request_resource"),
+      <div class="small-12 column small-centered margin-top">
+        <%= link_to t("dashboard.resource.view_resource"),
                       new_proposal_dashboard_mailing_path(proposal.to_param),
-                      class: 'button primary' %>
-        </div>
+                      class: "button expanded" %>
       </div>
     </div>
   </div>
 <% end %>
-

app/views/dashboard/_next_goal.html.erb

@@ -1,27 +1,27 @@
 <% if next_goal.present? %>
-  <div id='goals-section'>
-    <br><br>
-    <div class="action-title">
-      <h5><%= t("dashboard.next_goal.title") %></h5>
-      <hr>
-    </div>
+  <div id="goals-section">
+    <h3 class="title"><%= t("dashboard.next_goal.title") %></h3>
 
-    <div id="next-goal" data-toggler=".hide">
+    <div id="next_goal" data-toggler=".hide">
       <%= render 'goal', goal: next_goal %>
 
-      <div class="column small-12">
-        <a data-toggle="complete-course next-goal" id='see-complete-course-link'>
-          <%= t("dashboard.next_goal.see_complete_course") %>
-        </a>
-      </div>
+      <% if course.count > 1 %>
+        <div class="margin small">
+          <a id="see_complete_course_link" data-toggle="complete_course next_goal">
+            <%= t("dashboard.next_goal.see_complete_course") %>
+          </a>
+        </div>
+      <% end %>
     </div>
 
     <% if course.count > 1 %>
-      <div class="hide" id="complete-course" data-toggler=".hide">
-        <%= render partial: 'goal', collection: course %>  
+      <div id="complete_course" class="hide" data-toggler=".hide">
+        <%= render partial: 'goal', collection: course %>
 
-        <div class="column small-12">
-          <a data-toggle="complete-course next-goal"><%= t("dashboard.next_goal.hide_course") %></a>
+        <div class="margin small">
+          <a data-toggle="complete_course next_goal">
+            <%= t("dashboard.next_goal.hide_course") %>
+          </a>
         </div>
       </div>
     <% end %>

app/views/dashboard/_poster_resource.html.erb

@@ -1,26 +1,16 @@
 <% if can?(:manage_poster, proposal) %>
-  <div class="column">
-    <div class="card resource-card primary"
-         data-tooltip title="<%= t("dashboard.resource.request_resource") %>"
-         data-position="bottom" data-alignment="right">
-      <div class="card-section">
-        <p class="text-right">
-          <i class="fi-pencil resource-icon"></i>
-        </p>
-        <h4 class="text-center"><%= t("dashboard.menu.poster") %></h4>
-        <p class="text-center">
-          <%= Setting['proposals.poster_short_title'] %>
-        </p>
-      </div>
+  <div class="small-12 medium-6 large-3 column end">
+    <div class="resource-card" data-equalizer-watch="resources">
+      <h4><%= t("dashboard.menu.poster") %></h4>
+      <p class="resource-description">
+        <%= Setting['proposals.poster_short_title'] %>
+      </p>
 
-      <div class="card-section text-center bottom-container">
-        <div class="bottom-element text-center">
-          <%= link_to t("dashboard.resource.request_resource"),
+      <div class="small-12 column small-centered margin-top">
+        <%= link_to t("dashboard.resource.view_resource"),
                       new_proposal_dashboard_poster_path(proposal.to_param),
-                      class: 'button primary' %>
-        </div>
+                      class: "button expanded" %>
       </div>
     </div>
   </div>
 <% end %>
-

app/views/dashboard/_proposed_action.html.erb

@@ -1,27 +1,28 @@
-<div class="row" id="<%= dom_id(proposed_action) %>">
-  <div class="proposed-action">
-    <div class="exec-indicator">
-      <% if proposed_action.proposals.where(id: proposal.id).any? %>
-        <i class="fi-check success"></i>
-      <% else %>
-        <%= link_to execute_proposal_dashboard_action_path(proposal, proposed_action), method: :post, id: "#{dom_id(proposed_action)}_execute" do %>
-          <div class="checkbox-unchecked">
-          </div>
-        <% end %>
+<div id="<%= dom_id(proposed_action) %>">
+  <div class="action">
+    <% if proposed_action.proposals.where(id: proposal.id).any? %>
+      <span class="icon-check"></span>
+    <% else %>
+      <%= link_to execute_proposal_dashboard_action_path(proposal, proposed_action),
+                  id: "#{dom_id(proposed_action)}_execute",
+                  method: :post,
+                  class: "unchecked-link" do %>
+        <span class="unchecked"></span>
       <% end %>
-    </div>
+    <% end %>
 
-    <div>
+    <div class="action-content">
       <h4><%= proposed_action.title %></h4>
+
       <% if proposed_action.proposals.where(id: proposal.id).any? %>
-        <p><%=l(proposed_action.executed_actions.find_by(proposal: proposal).executed_at.to_date) %></p>
+        <p><%= l(proposed_action.executed_actions.find_by(proposal: proposal).executed_at.to_date) %></p>
       <% else %>
-        <% unless proposed_action.short_description.blank? %>
+        <% if proposed_action.short_description.present? %>
           <p><%= proposed_action.short_description %></p>
         <% end %>
 
         <% proposed_action.links.each do |link| %>
-          <p><%= link_to link.label, link.url, target: '_blank' %></p>
+          <p><%= link_to link.label, link.url, target: "_blank" %></p>
         <% end %>
 
         <%= render partial: 'document', collection: proposed_action.documents %>

app/views/dashboard/_recommended_actions.html.erb

@@ -1,9 +1,5 @@
 <% if proposed_actions.any? %>
-  <br><br>
-  <div class="action-title">
-    <h5><%= t("dashboard.recommended_actions.title") %></h5>
-    <hr>
-  </div>
+  <h3 class="title"><%= t("dashboard.recommended_actions.title") %></h3>
 
   <%= render partial: 'proposed_action', collection: proposed_actions %>
 <% end %>

app/views/dashboard/_resource.html.erb

@@ -1,38 +1,23 @@
-<div class="column" id="<%= dom_id(resource) %>">
-  <div class="card resource-card <%= resource_card_class(resource, proposal) %>" 
-       data-tooltip title="<%= resource_tooltip(resource, proposal) %>"
-       data-position="bottom" data-alignment="right">
-    <div class="card-section">
-      <p class="text-right">
-        <% if resource.executed_for?(proposal) %>
-          <i class="fi-check"></i>
-        <% elsif resource.active_for?(proposal) %>
-          <i class="fi-pencil"></i>
-        <% else %>
-          <i class="fi-lock"></i>
-        <% end %>
-      </p>
-      <h4 class="text-center"><%= resource.title %></h4>
-      <p class="text-center">
-        <%= resource.short_description %>
-      </p>
-    </div>
+<div id="<%= dom_id(resource) %>" class="small-12 medium-6 large-3 column end">
+  <div class="resource-card <%= resource_card_class(resource, proposal) %>"
+       data-equalizer-watch="resources"
+       title="<%= resource_tooltip(resource, proposal) %>">
+    <h4><%= resource.title %></h4>
+    <p class="resource-description">
+      <%= resource.short_description %>
+    </p>
 
-    <div class="card-section text-center bottom-container">
+    <div class="small-12 column small-centered margin-top">
       <% if resource.executed_for?(proposal) %>
-        <div class="bottom-element text-center">
-          <%= link_to t("dashboard.resource.view_resource"),
-                      new_request_proposal_dashboard_action_path(proposal, resource),
-                      class: 'button success' %>
-        </div>
+        <%= link_to t("dashboard.resource.view_resource"),
+                    new_request_proposal_dashboard_action_path(proposal, resource),
+                    class: "button" %>
       <% elsif resource.requested_for?(proposal) %>
         <strong><%= t("dashboard.resource.resource_requested") %></strong>
       <% elsif resource.active_for?(proposal) %>
-        <div class="bottom-element text-center">
-          <%= link_to t("dashboard.resource.request_resource"),
-                      new_request_proposal_dashboard_action_path(proposal, resource),
-                      class: 'button primary' %>
-        </div>
+        <%= link_to t("dashboard.resource.request_resource"),
+                    new_request_proposal_dashboard_action_path(proposal, resource),
+                    class: "button" %>
       <% else %>
         <strong>
           <%== resoure_availability_label(resource) %>
@@ -41,4 +26,3 @@
     </div>
   </div>
 </div>
-

app/views/dashboard/_resources.html.erb

@@ -1,11 +1,7 @@
-<div id='available-resources-section'>
-  <br><br>
-  <div class="action-title">
-    <h5><%= t("dashboard.resources.available_resources") %></h5>
-    <hr>
-  </div>
+<div id="available-resources-section">
+  <h3 class="title"><%= t("dashboard.resources.available_resources") %></h3>
 
-  <div class="row small-up-2 medium-up-3 large-up-4">
+  <div data-equalizer="resources" data-equalize-on="medium">
     <%= render 'poll_resource' %>
     <%= render 'mailing_resource' %>
     <%= render 'poster_resource' %>

app/views/dashboard/actions/new_request.html.erb

@@ -1,26 +1,25 @@
 <% content_for :action_title, dashboard_action.title %>
 
-<div class="row">
+<div class="row expanded">
   <div class="small-12 medium-8 column">
     <%== dashboard_action.description %>
     <%= render 'dashboard/form' %>
   </div>
 
   <div class="small-12 medium-4 column">
+    <%= render 'documents/documents', documents: dashboard_action.documents %>
+
     <% if dashboard_action.links.any? %>
-      <div class="proposal-dashboard-action-links">
-        <h3><%= t("dashboard.new_request.links") %></h3>
+      <div class="margin-top">
+        <h4><%= t("dashboard.new_request.links") %></h4>
         <% dashboard_action.links.each do |link| %>
           <% if link.open_in_new_tab %>
-            <%= link_to link.label, link.url, target: '_blank' %>
+            <p><%= link_to link.label, link.url, target: "_blank" %></p>
           <% else %>
-            <%= link_to link.label, link.url %>
+            <p><%= link_to link.label, link.url %></p>
           <% end %>
         <% end %>
       </div>
     <% end %>
-
-    <%= render 'documents/documents', documents: dashboard_action.documents %>
   </div>
 </div>
-

app/views/dashboard/progress.html.erb

@@ -1,24 +1,22 @@
 <% if proposal.published? %>
   <% content_for :action_title, t("dashboard.progress.title") %>
 
-  <div class="row">
+  <div class="row expanded">
     <div class="small-12 column">
-      <div class="button-group">
-        <%= link_to t("dashboard.progress.group_by_date"), 
-                    progress_proposal_dashboard_path(proposal), 
-                    class: "button #{daily_selected_class}" %>
-        <%= link_to t("dashboard.progress.group_by_week"), 
-                    progress_proposal_dashboard_path(proposal, group_by: 'week'), 
-                    class: "button #{weekly_selected_class}" %>
-        <%= link_to t("dashboard.progress.group_by_month"),
-                    progress_proposal_dashboard_path(proposal, group_by: 'month'),
-                    class: "button #{monthly_selected_class}" %>
-      </div>
+      <%= link_to t("dashboard.progress.group_by_date"),
+                  progress_proposal_dashboard_path(proposal),
+                  class: "button medium #{daily_selected_class}" %>
+      <%= link_to t("dashboard.progress.group_by_week"),
+                  progress_proposal_dashboard_path(proposal, group_by: 'week'),
+                  class: "button medium #{weekly_selected_class}" %>
+      <%= link_to t("dashboard.progress.group_by_month"),
+                  progress_proposal_dashboard_path(proposal, group_by: 'month'),
+                  class: "button medium #{monthly_selected_class}" %>
     </div>
   </div>
 
   <div class="small-12 column">
-    <div id="proposal-graph" 
+    <div id="proposal-graph"
          data-proposal-graph-url="<%= proposal_dashboard_supports_path(proposal, format: :json) %>"
          data-successful-proposal-graph-url="<%= proposal_dashboard_successful_supports_path(proposal, format: :json) %>"
          data-proposal-achievements-url="<%= proposal_dashboard_achievements_path(proposal, format: :json) %>"
@@ -28,8 +26,7 @@
          data-proposal-graph-success-label="<%= t("dashboard.progress.success") %>"
          data-proposal-success="<%= Setting["votes_for_proposal_success"] %>"
          data-proposal-resources-url="<%= proposal_dashboard_resources_path(proposal, format: :json) %>"
-         class="c3 proposal-graph" 
-         style="max-height: 320px; position: relative;"></div>
+         class="c3 proposal-graph"></div>
   </div>
 
   <%= javascript_include_tag 'dashboard_graphs', 'data-turbolinks-track' => true %>

app/views/dashboard/show.html.erb

@@ -1,25 +1,30 @@
 <% content_for :action_title, t("dashboard.index.title") %>
-<% if current_editable?(proposal) %>
-  <%= link_to t("dashboard.index.edit_proposal_link"), edit_proposal_path(proposal), target: '_blank', class: 'button hollow' %>
 
+<% if current_editable?(proposal) %>
+  <%= link_to t("dashboard.index.edit_proposal_link"),
+              edit_proposal_path(proposal),
+              target: "_blank",
+              class: "button hollow" %>
 <% end %>
 
 <% if can_destroy_image?(proposal) %>
-  <%= link_to t("images.remove_image"), 
+  <%= link_to t("images.remove_image"),
               image_path(proposal.image, from: request.url),
               method: :delete,
-              class: 'button hollow alert',
+              class: "button hollow alert",
               data: { confirm: t("images.actions.destroy.confirm") } %>
 <% end %>
 
 <% unless proposal.retired? %>
-  <%= link_to t("dashboard.index.retire"), 
+  <%= link_to t("dashboard.index.retire"),
               retire_form_proposal_path(proposal),
-              class: 'button hollow alert',
-              target: '_blank' %>
+              class: "button hollow alert",
+              target: "_blank" %>
 <% end %>
 
 <% if can?(:publish, proposal) %>
-  <%= link_to t("dashboard.index.publish"), publish_proposal_dashboard_path(proposal), class: 'button success', method: :patch %>
+  <%= link_to t("dashboard.index.publish"),
+              publish_proposal_dashboard_path(proposal),
+              class: "button success",
+              method: :patch %>
 <% end %>
-

app/views/layouts/dashboard.html.erb

@@ -45,7 +45,9 @@
             <div class="small-12 medium-3 column" data-equalizer-watch>
 
               <div class="show-for-small-only">
-                <button type="button" class="button hollow expanded" data-toggle="offCanvas"><%= t("admin.menu.admin") %></button>
+                <button type="button" class="button hollow expanded" data-toggle="offCanvas">
+                  <%= t("admin.menu.admin") %>
+                </button>
               </div>
 
               <div id="side_menu" class="hide-for-small-only">

app/views/layouts/dashboard/_proposal_header.html.erb

@@ -1,17 +1,21 @@
-<div class="proposal-title">
-  <h3 class="proposal-title"><%= link_to proposal.title, proposal, target: '_blank' %></h3>
-  <% if proposal.retired? %>
-    <div class="label alert"><%= t('.retired') %></div>
-  <% elsif proposal.published? %>
-    <div class="label success"><%= t('.published') %></div>
-  <% else %>
-    <div class="label primary"><%= t('.draft') %></div>
-  <% end %>
-</div>
+<h3 class="proposal-title">
+  <%= link_to proposal.title, proposal, target: "_blank" %>
+</h3>
 
-<% if content_for?(:action_title) %>
-  <div class="action-title">
-    <h5><%= yield(:action_title) %></h5>
-    <hr>
+<% if proposal.retired? %>
+  <div class="label alert">
+    <%= t("layouts.dashboard.proposal_header.retired") %>
+  </div>
+<% elsif proposal.published? %>
+  <div class="label success">
+    <%= t("layouts.dashboard.proposal_header.published") %>
+  </div>
+<% else %>
+  <div class="label primary">
+    <%= t("layouts.dashboard.proposal_header.draft") %>
   </div>
 <% end %>
+
+<% if content_for?(:action_title) %>
+  <h3 class="title"><%= yield(:action_title) %></h3>
+<% end %>

app/views/layouts/dashboard/_proposal_totals.html.erb

@@ -1,50 +1,55 @@
-<div class="callout proposal-totals">
-  <div class="row">
-    <div class="column large-4">
-      <div class="counter">
-        <div class="counter-value"><%= number_with_delimiter(proposal.votes_for.size, delimiter: '.') %></div>
-        <div class="counter-label"><%= t('.supports') %></div>
-      </div>
-
+<div class="dashboard-proposals-stats">
+  <div class="row expanded">
+    <div class="small-12 medium-3 large-2 column">
       <div class="counter">
         <div class="counter-value">
           <%= Dashboard::Action.active.resources.active_for(proposal).count %>
           /
           <%= Dashboard::Action.active.resources.count %>
         </div>
-        <div class="counter-label"><%= t('.active_resources') %></div>
+        <span class="counter-label"><%= t("layouts.dashboard.proposal_totals.active_resources") %></span>
       </div>
+    </div>
 
+    <div class="small-12 medium-3 large-2 column counter-divider">
       <div class="counter">
         <div class="counter-value"><%= number_with_delimiter(community_members_count, delimiter: '.') %></div>
-        <div class="counter-label"><%= t('.community') %></div>
-      </div> 
+        <span class="counter-label"><%= t("layouts.dashboard.proposal_totals.community") %></span>
+      </div>
     </div>
-    <div class="column large-8">
-      <div class="current-goal">
+
+    <div class="small-12 medium-3 large-2 column">
+      <div class="counter">
         <div class="counter-value">
-          <%= t('.support_count', count: number_with_delimiter(next_goal_supports, delimiter: '.')) %>
+          <%= number_with_delimiter(proposal.votes_for.size, delimiter: '.') %>
+          /
+          <%= t("layouts.dashboard.proposal_totals.support_count", count: number_with_delimiter(next_goal_supports, delimiter: '.')) %>
         </div>
-
-        <div class="counter-label"><%= t('.current_goal') %></div>
+        <span class="counter-label"><%= t("layouts.dashboard.proposal_totals.current_goal") %></span>
       </div>
+    </div>
 
-      <div class="support-indicator">
-        <div class="text-right">
-          <%= next_goal_progress %>%
+    <div class="small-12 large-6 column">
+      <div class="row">
+        <div class="small-12 medium-8 column">
+          <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="progress" role="progressbar" tabindex="0" aria-valuenow="50" 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="proposal-link">
-        <% if proposal.draft? %>
-          <%= link_to t('.preview_proposal'), proposal_path(proposal), class: 'button success expanded', target: '_blank' %>
-        <% else %>
-          <%= link_to t('.show_proposal'), proposal_path(proposal), class: 'button success expanded', target: '_blank' %>
-        <% end %>
+        <div class="small-12 medium-4 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>

app/views/layouts/proposals_dashboard.html.erb

@@ -45,7 +45,9 @@
             <div class="small-12 medium-3 column" data-equalizer-watch>
 
               <div class="show-for-small-only">
-                <button type="button" class="button hollow expanded" data-toggle="offCanvas"><%= t("admin.menu.admin") %></button>
+                <button type="button" class="button hollow expanded" data-toggle="offCanvas">
+                  <%= t("admin.menu.admin") %>
+                </button>
               </div>
 
               <div id="side_menu" class="hide-for-small-only">