6 files changed, 60 insertions, 18 deletions
diff --git a/app/views/accounts/_grid_card.html.haml b/app/views/accounts/_grid_card.html.haml
new file mode 100644
index 000000000..6245e910d
--- /dev/null
+++ b/app/views/accounts/_grid_card.html.haml
@@ -0,0 +1,8 @@
+.account-grid-card
+  .account-grid-card__header
+    .avatar= image_tag account.avatar.url(:medium)
+    .name
+      = link_to url_for_target(account) do
+        %span.display_name= display_name(account)
+        %span.username= "@#{account.acct}"
+  %p.note= account.note
diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml
new file mode 100644
index 000000000..deb70b30c
--- /dev/null
+++ b/app/views/accounts/_header.html.haml
@@ -0,0 +1,20 @@
+.card{ style: "background-image: url(#{@account.header.url(:medium)})" }
+  .avatar= image_tag @account.avatar.url(:large)
+  %h1.name
+    = display_name(@account)
+    %small= "@#{@account.username}"
+  .details
+    .counter{ class: active_nav_class(account_url(@account)) }
+      = link_to account_url(@account) do
+        %span.counter-label Posts
+        %span.counter-number= @account.statuses.count
+    .counter{ class: active_nav_class(following_account_url(@account)) }
+      = link_to following_account_url(@account) do
+        %span.counter-label Following
+        %span.counter-number= @account.following.count
+    .counter{ class: active_nav_class(followers_account_url(@account)) }
+      = link_to followers_account_url(@account) do
+        %span.counter-label Followers
+        %span.counter-number= @account.followers.count
+    .bio
+      %p= @account.note
diff --git a/app/views/accounts/_nothing_here.html.haml b/app/views/accounts/_nothing_here.html.haml
new file mode 100644
index 000000000..faa1feb20
--- /dev/null
+++ b/app/views/accounts/_nothing_here.html.haml
@@ -0,0 +1 @@
+%p.nothing-here There is nothing here!
diff --git a/app/views/accounts/followers.html.haml b/app/views/accounts/followers.html.haml
new file mode 100644
index 000000000..75e464957
--- /dev/null
+++ b/app/views/accounts/followers.html.haml
@@ -0,0 +1,14 @@
+- content_for :page_title do
+  People who follow
+  = display_name(@account)
+
+= render partial: 'header'
+
+.accounts-grid
+  - @followers.each do |f|
+    = render partial: 'grid_card', locals: { account: f }
+
+  - if @followers.empty?
+    = render partial: 'nothing_here'
+
+= will_paginate @followers, pagination_options
diff --git a/app/views/accounts/following.html.haml b/app/views/accounts/following.html.haml
new file mode 100644
index 000000000..6e1ba583c
--- /dev/null
+++ b/app/views/accounts/following.html.haml
@@ -0,0 +1,15 @@
+- content_for :page_title do
+  People whom
+  = display_name(@account)
+  follows
+
+= render partial: 'header'
+
+.accounts-grid
+  - @following.each do |f|
+    = render partial: 'grid_card', locals: { account: f }
+
+  - if @following.empty?
+    = render partial: 'nothing_here'
+
+= will_paginate @following, pagination_options
diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml
index 43a99a3b0..f99460083 100644
--- a/app/views/accounts/show.html.haml
+++ b/app/views/accounts/show.html.haml
@@ -5,26 +5,10 @@
   %link{ rel: 'salmon', href: api_salmon_url(@account.id) }/
   %link{ rel: 'alternate', type: 'application/atom+xml', href: account_url(@account, format: 'atom') }/
 
-.card{ style: "background-image: url(#{@account.header.url(:medium)})" }
-  .avatar= image_tag @account.avatar.url(:large)
-  %h1.name
-    = display_name(@account)
-    %small= "@#{@account.username}"
-  .details
-    .counter
-      %span.counter-label Posts
-      %span.counter-number= @account.statuses.count
-    .counter
-      %span.counter-label Following
-      %span.counter-number= @account.following.count
-    .counter
-      %span.counter-label Followers
-      %span.counter-number= @account.followers.count
-    .bio
-      %p= @account.note
+= render partial: 'header'
 
 .activity-stream
   - @statuses.each do |status|
     = render partial: 'stream_entries/status', locals: { status: status, include_threads: false, is_successor: false, is_predecessor: false }
 
-= will_paginate @statuses, previous_label: "#{fa_icon('chevron-left')} Prev".html_safe, next_label: "Next #{fa_icon('chevron-right')}".html_safe, inner_window: 2
+= will_paginate @statuses, pagination_options