Redesigned table to use card ui in tags page (publiclab#5384)

* Card UI * Card-ui * Content added
SrinandanPai · Apr 22, 2019 · 82b689b · 82b689b
1 parent 12d4f24
commit 82b689b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/app/views/tag/_topicCard.html.erb b/app/views/tag/_topicCard.html.erb
@@ -0,0 +1,38 @@
+
+<div class="card-view">
+  <% @tags.each do |tag| %>
+    <div class="panel panel-default">
+      <div class="panel-heading" style="background-color: inherit; border:none;">
+        <h4 style="display: inline-block; margin-right: 10px;"><%= tag.name %></h3>
+        <p style="display: inline-block; color: #808080;"><a style="text-decoration: underline; color: #808080;" href="/tag/<%= tag.name %>"><%= Tag.follower_count(tag.name) %> people</a> discussing</p>
+      </div>
+      <div class="panel-body">
+        <div style="margin-top: -10px;">
+          <% Tag.find_nodes_by_type(tag.name, type = 'note', limit = 3).each do |node|  %>
+            <% if node.main_image %>
+              <img class="img-circle" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.main_image.path(:default) %>" />
+            <% elsif node.scraped_image %>
+              <img class="img-circle" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.scraped_image %>" />
+            <% end %>
+            <h6 style="display: inline-block;"><a style="color: inherit;" <% if @widget %>target="_blank"<% end %> href="<%= node.path %>"><%= (node.type == 'note') ? node.title : node.latest.title %></a></h6>
+            <p style="display: inline-block; margin-left: 10px;color: #808080;">by <a style="color: #808080;" <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>">@<%= node.author.name %></a></p>
+          <% end %>
+        </div>
+      </div>  
+      <div class="panel-footer" style="background-color: inherit; border:none; padding-bottom: 22px;">
+        <a style="text-decoration: underline; color: #808080; display: inline-block;" href="/tag/<%= tag.name %>"><%= tag.count %><%= t('tag.index.more_posts') %> <i class="fa fa-angle-double-right"></i></a>
+
+        <a style="float: right;  width: 100px;" rel="tooltip" title="<%= t('sidebar._post_button.share_your_work') %>" data-placement="bottom" href="/post" class="btn btn-primary btn-sm">New post <i class="fa fa-plus fa-white"></i></a>
+        <% if current_user %>
+        <div id="follow-unfollow-column-<%=tag.tid%>" style="float: right; margin-right: 10px;">
+          <% if current_user.following(tag.name) %>
+            <a style=" width: 100px;" rel="tooltip" title="<%= t('tag.show.unfollow') %>" class="btn btn-default btn-sm active" href="/unsubscribe/tag/<%= tag.name %>"></i> <%= t('tag.index.unsubscribe') %></a>
+          <% else %>
+            <a style=" width: 100px;" class="btn btn-default btn-sm index-follow-buttons follow-btn-remote" href="/subscribe/tag/<%= tag.name %>" data-remote="true"><%= t('tag.index.subscribe') %></a>
+          <% end %>
+        </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/tag/index.html.erb b/app/views/tag/index.html.erb
@@ -27,41 +27,8 @@
   </p>
   <br/>
 
-  <table class="table">
-    <tr>
-      <th><%= t('tag.index.tag') %></th>
-      <th><%= t('tag.index.number_of_uses') %></th>
-      <th><%= t('tag.index.number_of_subscriptions')%></th>
-      <% if current_user %>
-        <th><a href = "<%= tags_path %>?sort=subscribers"><%= t('tag.index.subscriptions') %></a> <i class="fa fa-sort" aria-hidden="true"></i></th>
-      <% end %>
-    </tr>
-    <% @tags.each do |tag| %>
-      <tr>
-        <td><i class="fa fa-tag"></i> <a href="/tag/<%= tag.name %>"><%= tag.name %></a></td>
-        <td><%= tag.count %></td>
-        <td><a class="btn btn-default btn-sm" rel="popover" data-placement="right" data-html="true" data-title="<%= t('tag.show.users_following_tag') %>" data-content="<% Tag.followers(tag.name).each do |user| %><i class='fa fa-star-o'></i> <a href='/profile/<%= user.username %>'><%= user.username %></a><br /><% end %><% if Tag.follower_count(tag.name) == 0 %><i><%= t('tag.show.none') %></i><% end %>"><%= Tag.follower_count(tag.name) %> <i class="fa fa-user"></i> <span class="caret"></span></a></td>
-        <script type="text/javascript">
-          //show one popover at a time
-          $('.btn').on('click', function (e) {
-              $('.btn').not(this).popover('hide');
-          });
-        </script>
-        <% if current_user %>
-          <td id="follow-unfollow-column-<%=tag.tid%>">
-             <% if current_user.following(tag.name) %>
-                <a rel="tooltip" title="<%= t('tag.show.unfollow') %>" class="btn btn-default btn-sm active" href="/unsubscribe/tag/<%= tag.name %>"><i class="fa fa-user-plus" aria-hidden="true"></i> <%= t('tag.show.following') %></a>
-                <% else %>
-                <a class="btn btn-default btn-sm index-follow-buttons follow-btn-remote" href="/subscribe/tag/<%= tag.name %>" data-remote="true" ><i class="fa fa-user-plus" aria-hidden="true"></i> <%= t('tag.show.follow') %></a>
-                <% end %>
-          </td>
-        <% end %>
-      </tr>
-    <% end %>
-  </table>
-
-  <hr />
-
+  <%= render :partial => "tag/topicCard" %>
+
 <div class="text-center"> <%= will_paginate @tags, :renderer => BootstrapPagination::Rails if @paginated %></div>
 </div>
 

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -370,6 +370,9 @@ en:
       number_of_subscriptions: "# of people"
       subscriptions: "Your subscriptions"
       sort_by: "Sort By"
+      more_posts: "more posts"
+      subscribe: "Subscribe"
+      unsubscribe: "Unsubscribe"
     show:
       notes_tagged: "Notes tagged with <i style=\"color:#aaa;\">%{tag}</i>"
       following: "Following"