Fix part of publiclab#8542 Enhance Followers/Following Page

app/assets/stylesheets/show_follow.css

@@ -0,0 +1,58 @@
+.follow-list{
+    margin: -1px;
+    list-style-type: none;
+}
+.follow-list .follow-img img{
+    max-width: 100%;
+}
+.follow-list{
+    margin: -1px;
+    list-style-type: none;
+}
+.follow-list {
+    padding: 0;
+}
+.follow-list > li {
+    float: left;
+    width: 50%;
+}
+.follow-list > li > a {
+    display: block;
+    text-decoration: none;
+    color: #000;
+    padding: 0.625rem;
+    margin: 1px;
+    background: #fff;
+}
+.follow-list > li > a:after,
+.follow-list > li > a:before {
+    content: "";
+    display: table;
+    clear: both;
+}
+.follow-list .follow-img {
+    float: left;
+    width: 3rem;
+    height: 3rem;
+    overflow: hidden;
+    background: #efeff4;
+}
+.follow-list .follow-info {
+    margin-left: 3.625rem;
+}
+.follow-list .follow-info h4 {
+    margin: 0.3125rem 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+.follow-list .follow-info p {
+    color: #666;
+    margin: 0;
+}
+
+@media (max-width: 767px) {
+    .follow-list > li {
+        float: none;
+        width: auto;
+    }
+}

app/views/users/show_follow.html.erb

@@ -1,3 +1,5 @@
+<%= stylesheet_link_tag "show_follow" %>
+
 <div class="container">
   <h3><%= @user.username %></h3>
   <ul class="nav nav-tabs border-0">
@@ -9,22 +11,45 @@
     </li>
   </ul>
   <% if @users.length > 0 %>
-    <table class="table">
-      <tbody>
-      <% @users.each do |user| %>
-        <tr class="followers-row">
-          <td><%= link_to "<i class='fa fa-user-o'></i> #{user.username}".html_safe, user_path(user.username) %>
-        </tr>
-      <% end %>
-    </table>
-   <% if @pagy %> 
-      <%= raw pagy_bootstrap_nav @pagy %> 
-   <% else %> 
-      <%= will_paginate @users, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>
-   <% end %>
-  <% else %>
-    <p class="pt-3 border-top">
-      <%= @user.username %><%= @title === "Followers" ? " has no followers yet" : " is not following anyone yet" %>
-    </p>
-  <% end %>
-</div>
+
+<div class="profile-container border-top p-2">
+        <div class="row row-space-20">
+            <div class="col-md-8">
+                <div class="tab-content p-0">
+
+                    <div class="tab-pane fade active show" id="profile-follows">
+
+                        <ul class="follow-list clearfix">
+
+                        <% @users.each do |user| %>
+
+                            <li>
+
+                                <%= link_to user_path(user.username) do %>
+                                    <div class="follow-img"><img src="<%= user.profile_image %>" alt="" /></div>
+                                    <div class="follow-info">
+                                        <h4> <%= user.username %>
+                                        </h4>
+                                        <p><small><%= user.followers.where(status: 1).length %> followers, <%= user.following_users.where(status: 1).length %> following</small></p>
+                                    </div>
+                                <% end %>
+                            </li>
+                        <% end %>
+
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </br>
+        <% if @pagy %> 
+        <%= raw pagy_bootstrap_nav @pagy %>       
+    </div>
+<% else %> 
+  <%= will_paginate @users, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>
+<% end %>
+<% else %>
+  <p class="pt-3 border-top">
+    <%= @user.username %><%= @title === "Followers" ? " has no followers yet" : " is not following anyone yet" %>
+  </p>
+<% end %>

config/initializers/assets.rb

@@ -39,4 +39,5 @@
   'spam2.css',
   'spam2.js',
   'print_new.css',
+  'show_follow.css',
 ]