Card UI

publiclab · Apr 6, 2019 · 5891168 · 5891168
1 parent 52c56a1
commit 5891168
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 33 deletions.
diff --git a/app/views/tag/index.html.erb b/app/views/tag/index.html.erb
@@ -26,41 +26,33 @@
     </span>
   </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>
+  <div class="card-view">
     <% @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>
+      <div class="panel panel-default">
+        <div class="panel-heading" style="background-color: inherit; border:none;">
+          <h4 style="display: inline-block; margin-right: 10px; font-weight: bold;"><%= 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>  
+        <div class="panel-footer" style="background-color: inherit; border:none; padding-bottom: 15px;">
+          <a style="text-decoration: underline; color: #808080; display: inline-block;" href="/tag/<%= tag.name %>"><% if (tag.count < 2) %><%= tag.count %><%else%><%= tag.count-3 %> <% end %> <%= t('tag.index.more_posts') %> <i class="fa fa-angle-double-right"></i></a>
 
-  <hr />
+          <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 %>
+          <% end %>
+        </div>
+       </div>
+    </div>
+  <% end %>
+</div>
 
 <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
@@ -369,6 +369,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"