From 11f6515e8494a19d15718dfb017c457eb2785a82 Mon Sep 17 00:00:00 2001
From: Alessandro Cuoghi <agileontheweb@gmail.com>
Date: Tue, 8 Aug 2017 12:20:16 +0200
Subject: [PATCH] Style topic show. Fix tabs-panel.

---
 app/assets/stylesheets/community.scss | 31 ++++++++++++---------------
 app/views/communities/show.html.erb   | 30 ++++++++++++++++++++++----
 app/views/topics/show.html.erb        | 21 ++++++++++--------
 3 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/community.scss b/app/assets/stylesheets/community.scss
index 643f7b994..0c788a2fa 100644
--- a/app/assets/stylesheets/community.scss
+++ b/app/assets/stylesheets/community.scss
@@ -1,5 +1,5 @@
 .communities-show{
-  
+
   .wide-order-selector{
     margin-top: 0;
   }
@@ -30,21 +30,18 @@
     .button{
       margin-top: $line-height;
     }
-
-    .topic-info{
-
-      color: #515151;
-      font-size: 0.875rem;
-      margin: 0.375rem 0 0;
-
-      .icon-comments {
-        font-size: rem-calc(16);
-        vertical-align: top;
-      }
-
-      a {
-        color: $text-medium;
-      }
-    }
+  }
+}
+
+.communities-participantes{
+  .comment-body{
+    display: inline-block;
+    float: left;
+    margin-right: $line-height;
+  }
+}
+.topic-show{
+  p{
+    margin-bottom: 0;
   }
 }
diff --git a/app/views/communities/show.html.erb b/app/views/communities/show.html.erb
index ab7692f3b..ea4fc8aae 100644
--- a/app/views/communities/show.html.erb
+++ b/app/views/communities/show.html.erb
@@ -22,9 +22,31 @@
   </div>
 </div>
 
-<div class="">
-  Participantes
-  <% User.community_participants(@community).each do |participant| %>
-    <%= link_to participant.name, user_path(participant)%>
+<div class="row column communities-participantes">
+  <ul class="tabs" data-tabs id="communities-show-tabs">
+    <li class="tabs-title is-active">
+      <%= link_to "#tab-participantes" do %>
+        <h3>
+          Participantes
+          <!-- Sebas Check count of topics  -->
+          <span class="js-comments-count">(<%= @participants.count %>)</span>
+        </h3>
+      <% end %>
+    </li>
+  </ul>
+  <% @participants.each do |participant| %>
+
+    <div class="comment-body">
+      <div class="comment-info">
+        <%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left") %>
+        <div class="comment-info">
+          <span class="user-name">
+            <%= link_to participant.name, user_path(participant)%>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <%#= link_to participant.name, user_path(participant)%>
   <% end %>
 </div>
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index 0e62d5606..51fe661e2 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -1,13 +1,16 @@
-<%= render "shared/back_link" %>
-<br>
-Comunidad: <%= @community.proposal.title %>
-<br>
-<%= @topic.title %>
+<div class="row topic-show">
+  <div class="small-12 medium-12 column">
+    <%= render "shared/back_link" %>
+    <br>
+    <p>Comunidad: <strong><%= @community.proposal.title %></strong></p>
+    <h1><%= @topic.title %></h1>
 
-<div class="tabs-content" data-tabs-content="proposals-tabs" role="tablist">
-  <%= render "topics/filter_subnav" %>
+    <div class="tabs-content" data-tabs-content="proposals-tabs" role="tablist">
+      <%= render "topics/filter_subnav" %>
 
-  <div class="tabs-panel is-active" id="tab-comments">
-    <%= render "topics/comments" %>
+      <div class="tabs-panel is-active" id="tab-comments">
+        <%= render "topics/comments" %>
+      </div>
+    </div>
   </div>
 </div>