Following and Followers page UI (#8372)

* adding tags in modals of Nodes #8230

* refactored #8230

* fixed tag path in the modal #8230
also fixed extra spacing when no tags on the modal

* #8277 & #8278 changed UI for Following and Followers page

* #8277 updating no followers / following message

app/controllers/users_controller.rb

@@ -327,13 +327,13 @@ def followed
 
   def following
     @title = "Following"
-    @users = @user.following_users.paginate(page: params[:page], per_page: 24)
+    @users = @user.following_users.paginate(page: params[:page], per_page: 10)
     render 'show_follow'
   end
 
   def followers
     @title = "Followers"
-    @users = @user.followers.paginate(page: params[:page], per_page: 24)
+    @users = @user.followers.paginate(page: params[:page], per_page: 10)
     render 'show_follow'
   end
 

app/views/users/show_follow.html.erb

@@ -1,10 +1,26 @@
 <div class="container">
-  <% @users.each do |user| %>
-    <div class="col-lg-3">
-      <div style="text-align:center;">
-        <img class="rounded-circle" id="profile-photo" style="width:50%;margin-bottom:20px;" src="<%= user.profile_image %>">
-        <h3><%= user.username %></h3>
-      </div>
-    </div>
+  <h3><%= @user.username %></h3>
+  <ul class="nav nav-tabs border-0">
+    <li class="nav-item">
+      <%= link_to "Followers", followers_path(@user.username),class: "nav-link #{@title=='Followers' ? 'active' : ''}" %>
+    </li>
+    <li class="nav-item">
+      <%= link_to "Following", following_path(@user.username), class: "nav-link #{@title=='Following' ? 'active' : ''}"  %>
+    </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>
+    <%= will_paginate @users, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>
+  <% else %>
+    <p class="pt-3 border-top">
+      <%= @user.username %><%= @title === "Followers" ? " has no followers yet" : " is not following anyone yet" %>
+    </p>
   <% end %>
 </div>

config/routes.rb

@@ -234,7 +234,7 @@
   post 'profile/photo' => 'users#photo'
   get 'profile/info/:id' => 'users#info', as: 'info'
   get 'profile' => 'users#profile'
-  get 'profile/:id' => 'users#profile'
+  get 'profile/:id' => 'users#profile', as: :user
   get 'profile/:id/edit' => 'users#edit'
   get 'profile/:id/likes' => 'users#likes'
   get 'feed/:author' => 'users#rss'