Followers/following page: avatar and grid (publiclab#9315)

* Fix part of publiclab#8542 Enhance Followers/Following Page

* Refactured previous commit changes

Author: 17sushmita

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">
@@ -19,22 +21,39 @@
       </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 %>
+
+  <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 %>
-</div>
+</div>

config/initializers/assets.rb

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