From 99f04893bb110729d4668528359b6378f9df3113 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Wed, 5 Sep 2018 16:41:31 +0100
Subject: [PATCH] Add tabs to the user profile

---
 static/main.css                     |  4 ++++
 templates/users/details.html.tera   |  8 ++++----
 templates/users/followers.html.tera |  5 ++++-
 templates/users/header.html.tera    | 12 ++++++------
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/static/main.css b/static/main.css
index 8939ec2f..99396f7a 100644
--- a/static/main.css
+++ b/static/main.css
@@ -799,3 +799,7 @@ figcaption {
     color: #7765E3;
     border-bottom: 1px solid #7765E3;
 }
+
+.user-summary {
+    margin: 2em 0px;
+}
diff --git a/templates/users/details.html.tera b/templates/users/details.html.tera
index 3939846b..c48e9f21 100644
--- a/templates/users/details.html.tera
+++ b/templates/users/details.html.tera
@@ -14,11 +14,11 @@
 {% block content %}
     {% include "users/header" %}
 
-    <div>
-        {{ user.summary | safe }}
-    </div>
+    {% set user_link = ['/@', user.fqn] %}
+    {% set followers_link = ['/@', user.fqn, 'followers'] %}
+    {{ macros::tabs(links=[ user_link | join(sep='/'), followers_link | join(sep='/')], titles=['Articles', 'Followers'], selected=1) }}
 
-    {% if recents | length != 0 %}    
+    {% if recents | length != 0 %}
         <h2>
             {{ "Latest articles" | _ }}
             <small><a href="/@/{{ user.fqn }}/atom.xml"><i title="Atom feed" class="fa fa-rss"></i></a></small>
diff --git a/templates/users/followers.html.tera b/templates/users/followers.html.tera
index 6c330e20..fb2a3f91 100644
--- a/templates/users/followers.html.tera
+++ b/templates/users/followers.html.tera
@@ -8,7 +8,10 @@
 {% block content %}
     {% include "users/header" %}
 
-    <h2>{{ "Followers" | _ }}</h2>
+    {% set user_link = ['/@', user.fqn] %}
+    {% set followers_link = ['/@', user.fqn, 'followers'] %}
+    {{ macros::tabs(links=[ user_link | join(sep='/'), followers_link | join(sep='/')], titles=['Articles', 'Followers'], selected=2) }}
+
     <div class="cards">
     {% for follower in followers %}
         <div class="card">
diff --git a/templates/users/header.html.tera b/templates/users/header.html.tera
index af4daa34..437e7187 100644
--- a/templates/users/header.html.tera
+++ b/templates/users/header.html.tera
@@ -15,12 +15,11 @@
                 <span class="badge">{{ "It is you" | _ }}</span>
             {% endif %}
         </h1>
+        {% if is_self %}
+            <a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
+        {% endif %}
     </div>
 
-    {% if is_self %}
-        <a href="/@/{{ user.username }}/edit" class="button inline-block">{{ "Edit your profile" | _ }}</a>
-    {% endif %}
-
     {% if is_remote %}
         <a class="inline-block button" href="{{ user.ap_url }}" target="_blank">{{ "Open on {{ instance_url }}" | _(instance_url=instance_url) }}</a>
     {% endif %}
@@ -35,6 +34,7 @@
     {% endif %}
 </div>
 
-<div>
-    <a href="/@/{{ user.fqn }}/followers/">{{ "{{ count }} followers" | _n(singular="One follower", count=n_followers) }}</a>
+
+<div class="user-summary">
+    {{ user.summary | safe }}
 </div>