Power tags are displayed as mini cards in the sidebar

app/views/tag/_miniCard.html.erb

@@ -1,4 +1,4 @@
-<div class="card" style="clear:left;">
+<div class="card" style="clear:left; <% if local_assigns[:grey] %>background:#eee;<% end %>">
   <div class="card-body">
 
     <a class="ellipsis pull-right" data-toggle="dropdown" style="cursor:pointer"><i class="fa fa-ellipsis-h" style="color:#666;font-size:18px;margin-right:10px;"></i></a>

app/views/tag/_tags.html.erb

@@ -18,27 +18,7 @@
           <a class="show-more-tags" href="javascript:void(0);"><p style="float:left; color:#666; margin-top:14px; margin-left:5px;"><u><%= tags.length - 2 %> more</u> &nbsp </p></a>
         <% end %>
 
-        <p 
-          class="badge <%= badge_name %> pop more-tags" 
-          style="display:none;cursor:pointer;margin-bottom:3px;"
-          id="tag_<%= tag.tid %>" 
-          data-toggle="popover"
-          data-trigger="focus"
-          data-count=0 
-          data-placement="top" 
-          data-content="<p style='text-align:center;'><a href='/tag/<%= tag.name %>'><%= Tag.tagged_node_count(tag.name) || 0 %> notes</a> - <a href='/contributors/<%= tag.name %>'><%= Tag.contributors(tag.name).count %> people <br></a></p><% if tag.location_tag? %><p><%= translation('tag.location.tooltip') %></p><% end %> <p style='text-align:center;font-size:12px;'><%if tag.description %><%= tag.description %> |<% end %> created by <a href='/profile/<%= tag.try(:author).try(:username) %>'><%= tag.try(:author).try(:username) %></a> <%= time_ago_in_words(Time.at(tag.date)) %> ago </p><div class='text-center'><a href='/subscribe/tag/<%= tag.name %>' class='btn btn-primary'>Follow</a></div>" 
-          data-html="true" 
-          title="<%= tag.name %>"
-          >
-            <a class='tag-name' href='/tag/<%= tag.name %>'><%= tag.name %></a>
-            <% if logged_in_as(['admin', 'moderator']) || (current_user && ( current_user.uid ==  @node.uid || current_user.uid == tag.uid)) %>
-            <% if tag.name.include? ':' %>
-              <a aria-label="Delete tag" data-confirm="This is a power tag (see https://publiclab.org/wiki/power-tags) -- and may drive a specific function on this page. Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.tid %>" data-tag-id="<%= tag.tid %>" data-method="delete"><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a>
-            <% else %>
-              <a data-confirm="Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.tid %>" data-tag-id="<%= tag.tid %>" data-method="delete"><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a>
-            <% end %>
-          <% end %>
-        </p>
+        <%= render partial: 'tag/miniCard', locals: { tag: tag, grey: power_tag } %>
 
       <% end %>
 

test/system/post_test.rb

@@ -38,26 +38,28 @@ def setup
 
     find('.tag-input').set('nature').native.send_keys(:return)
     find('.tag-input').set('mountains').native.send_keys(:return)
+    find('.tag-input').set('test:one').native.send_keys(:return)
 
     # Make sure that the 2 tags are added
-    page.assert_selector('.tags-list p.badge', :count => 2)
+    page.assert_selector('.tags-list p.badge', :count => 3)
   end
 
   test 'removing tags from the post' do
     visit '/wiki/organizers'
 
     find('a#tags-open').click()
 
-    # There should be 1 tag that shows up as a badge and 2 as a card
-    page.assert_selector('.tags-list .card-body', :count => 2)
-    page.assert_selector('.tags-list p.badge', :count => 1)
+    # There should be 3 tags that show up as a card
+    page.assert_selector('.tags-list .card-body', :count => 3)
+
+    find(".tags-list .card-body .ellipsis", match: :first).click()
 
     accept_alert do
-      find('.tags-list p.badge .tag-delete').click()
+      find('.tags-list .card-body .tag-delete').click()
     end
 
     # Make sure that 1 of the 3 tags is removed
-    page.assert_selector('.tags-list p.badge', :count => 0)
+    page.assert_selector('.tags-list .card-body', :count => 2)
   end
 
   test 'like button on the post' do
@@ -220,8 +222,8 @@ def assert_page_does_not_reload(message = "page should not reload")
     find('a#tags-open').click()
 
     # Make sure proper latitude and longitude tags are added
-    assert_selector('.tags-list .badge a[href="/tag/lat:22"]', text: "lat:22")
-    assert_selector('.tags-list .badge a[href="/tag/lon:76"]', text: "lon:76")
+    assert_selector('.tags-list .card-body a[href="/tag/lat:22"]', text: "lat:22")
+    assert_selector('.tags-list .card-body a[href="/tag/lon:76"]', text: "lon:76")
   end
 
   test 'deleting a wiki' do