Adds styles to communities views

app/views/communities/_poll.html.erb

@@ -1,5 +1,10 @@
-<%= link_to poll do %>
-  <strong><%= poll.title %></strong>
-<% end %> 
-<p class="help-text"><%= t('.take_part', from: l(poll.starts_at.to_date), to:(poll.ends_at.to_date)) %></p>
-<hr>
+<div class="community-poll">
+  <h4>
+    <%= link_to poll.title, poll %>
+  </h4>
+
+  <p class="topic-info">
+    <%= t("communities.poll.take_part",
+           from: l(poll.starts_at.to_date), to:(poll.ends_at.to_date)) %>
+  </p>
+</div>

app/views/communities/_subnav.html.erb

@@ -1,6 +1,11 @@
 <div class="row column communities-participant">
 
-  <ul class="tabs" data-tabs id="communities-show-tabs">
+  <ul class="tabs" id="communities_show_tabs"
+      data-deep-link="true"
+      data-update-history="true"
+      data-deep-link-smudge="true"
+      data-deep-link-smudge-delay="500"
+      data-tabs>
 
     <li class="tabs-title is-active">
       <%= link_to "#tab-participants" do %>
@@ -13,9 +18,9 @@
 
     <% if @community.proposal.present? %>
       <li class="tabs-title">
-        <%= link_to '#tab-polls' do %>
+        <%= link_to "#tab-polls" do %>
           <h3>
-            <%= t('.surveys') %>
+            <%= t("communities.subnav.surveys") %>
             <span class="js-comments-count">(<%= @community.proposal.polls.count %>)</span>
           </h3>
         <% end %>
@@ -23,13 +28,13 @@
     <% end %>
   </ul>
 
-  <div class="tabs-content" data-tabs-content="communities-show-tabs">
+  <div class="tabs-content" data-tabs-content="communities_show_tabs">
     <div class="tabs-panel is-active" id="tab-participants">
       <%= render partial: 'participant', collection: @participants %>
     </div>
 
     <% if @community.proposal.present? %>
-      <div class="tabs-panel" id="tab-polls">
+      <div class="tabs-panel topic-show" id="tab-polls">
         <%= render partial: 'poll', collection: @community.proposal.polls %>
       </div>
     <% end %>

app/views/communities/show.html.erb

@@ -17,7 +17,8 @@
     <aside class="small-12 column show-for-small-only">
       <div class="sidebar-divider"></div>
       <h2><%= t("community.show.sidebar.participate") %></h2>
-      <%= link_to t("community.show.sidebar.new_topic"), create_topic_link(@community) , class: "button expanded" %>
+      <%= link_to t("community.show.sidebar.new_topic"),
+                  create_topic_link(@community), class: "button expanded" %>
     </aside>
 
     <div class="small-12 medium-9 column">
@@ -30,20 +31,22 @@
     <aside class="small-12 medium-3 column hide-for-small-only">
       <% if @community.proposal.present? %>
         <div class="sidebar-divider"></div>
-        <h2><%= t('.author') %></h2>
-        <%= link_to t('.send_notification'),
+        <h2><%= t("communities.show.author") %></h2>
+        <%= link_to t("communities.show.send_notification"),
                     new_proposal_notification_path(proposal_id: @community.proposal.id),
-                    class: 'button expanded hollow' %>
+                    class: "button expanded hollow" %>
       <% end %>
 
       <div class="sidebar-divider"></div>
       <h2><%= t("community.show.sidebar.participate") %></h2>
-      <%= link_to t("community.show.sidebar.new_topic"), create_topic_link(@community) , class: "button expanded" %>
+      <%= link_to t("community.show.sidebar.new_topic"),
+                  create_topic_link(@community), class: "button expanded" %>
 
       <% if @community.proposal&.polls&.current&.any? %>
         <div class="sidebar-divider"></div>
-        <h2><%= t('.surveys') %></h2>
-        <%= link_to t('.complete_survey'), @community.proposal.polls.current.first, class: 'button expanded hollow' %>
+        <h2><%= t("communities.show.surveys") %></h2>
+        <%= link_to t("communities.show.complete_survey"),
+                    @community.proposal.polls.current.first, class: "button expanded hollow" %>
       <% end %>
     </aside>
   </div>

app/views/dashboard/_comment.html.erb

@@ -1,10 +1,10 @@
 <li>
   <%= comment.body %>
-  <p class="help-text">
+  <p class="topic-info">
     <%= comment.commentable.title %>
-    -
+    &nbsp;&bullet;&nbsp;
     <%= l(comment.updated_at.to_date) %>
-    -
+    &nbsp;&bullet;&nbsp;
     <%= comment.author.name %>
   </p>
 </li>

app/views/dashboard/community.html.erb

@@ -1,39 +1,55 @@
 <% content_for :action_title, t("dashboard.menu.community") %>
 
-<div class="row">
-  <div class="small-12 large-9 column">
-    <%= link_to t("dashboard.community.access_community"), community_path(proposal.community), class: 'button hollow', target: '_blank' %>
-    <% unless proposal.community.latest_activity.nil? %>
-      <p class="help-text"><%= t("dashboard.community.latest_activity", at: l(proposal.community.latest_activity.to_date)) %></p>
+<div class="row expanded dashboard-community">
+  <div class="small-12 medium-9 column">
+    <%= link_to t("dashboard.community.access_community"),
+                community_path(proposal.community),
+                class: "button hollow",
+                target: "_blank" %>
+    <% if proposal.community.latest_activity.present? %>
+      <p class="help-text">
+        <%= t("dashboard.community.latest_activity",
+            at: l(proposal.community.latest_activity.to_date)) %>
+      </p>
     <% end %>
   </div>
 
-  <div class="small-12 large-1 column community-totals">
-    <span class="fi-torsos-all"></span>
-    &nbsp;<strong><%= number_with_delimiter(proposal.community.participants_count, delimiter: '.') %></strong>
-    <p><%= t("dashboard.community.participants") %></p>
+  <div class="small-12 medium-1 column community-totals">
+    <span class="icon-organizations"></span>
+    <span class="community-number">
+      <%= number_with_delimiter(proposal.community.participants_count, delimiter: '.') %>
+    </span>
+    <p class="community-info">
+      <%= t("dashboard.community.participants") %>
+    </p>
   </div>
 
   <div class="small-12 large-1 column community-totals">
-    <span class="fi-comment-quotes"></span>
-    &nbsp;<strong><%= number_with_delimiter(proposal.community.debates_count, delimiter: '.') %></strong>
-    <p><%= t("dashboard.community.debates") %></p>
+    <span class="icon-debates"></span>
+    <span class="community-number">
+      <%= number_with_delimiter(proposal.community.debates_count, delimiter: '.') %>
+    </span>
+    <p class="community-info">
+      <%= t("dashboard.community.debates") %>
+    </p>
   </div>
 
   <div class="small-12 large-1 column community-totals">
-    <span class="fi-comments"></span>
-    &nbsp;<strong><%= number_with_delimiter(proposal.community.comments_count, delimiter: '.') %></strong>
-    <p><%= t("dashboard.community.comments") %></p>
+    <span class="icon-comments"></span>
+    <span class="community-number">
+      <%= number_with_delimiter(proposal.community.comments_count, delimiter: '.') %>
+    </span>
+    <p class="community-info">
+      <%= t("dashboard.community.comments") %>
+    </p>
   </div>
 </div>
 
 <% if proposal.community.comments.any? %>
-  <div class="action-title">
-    <h5><%= t("dashboard.community.latest_comments") %></h5>
-    <hr>
-  </div>
+  <h4 class="title"><%= t("dashboard.community.latest_comments") %></h5>
 
-  <ul>
-    <%= render partial: 'comment', collection: proposal.community.comments.sort_by_newest.limit(5) %>
+  <ul class="topic-show">
+    <%= render partial: 'comment',
+               collection: proposal.community.comments.sort_by_newest.limit(5) %>
   </ul>
 <% end %>