From 30cfd96e24012c95163134a827754249ebeba2e1 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Wed, 5 Sep 2018 16:19:57 +0100
Subject: [PATCH] Add tabs to the different feeds

---
 static/main.css                        | 19 +++++++++++++++++++
 templates/instance/federated.html.tera |  6 ++++++
 templates/instance/feed.html.tera      |  2 ++
 templates/instance/index.html.tera     |  9 +++++++--
 templates/instance/local.html.tera     |  6 ++++++
 templates/macros.html.tera             |  8 ++++++++
 6 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/static/main.css b/static/main.css
index c91cb76f..8939ec2f 100644
--- a/static/main.css
+++ b/static/main.css
@@ -780,3 +780,22 @@ figcaption {
 .avatar.padded {
     margin-right: 2rem;
 }
+
+/** Tabs **/
+
+.tabs {
+    border-bottom: 1px solid #DADADA;
+    padding: 0px;
+    margin: auto 20% 2em;
+}
+
+.tabs a {
+    display: inline-block;
+    color: #242424;
+    padding: 1em;
+}
+
+.tabs a.selected {
+    color: #7765E3;
+    border-bottom: 1px solid #7765E3;
+}
diff --git a/templates/instance/federated.html.tera b/templates/instance/federated.html.tera
index 8bf6c649..c97d1cf5 100644
--- a/templates/instance/federated.html.tera
+++ b/templates/instance/federated.html.tera
@@ -8,6 +8,12 @@
 {% block content %}
     <h1>{{ "All the articles of the Fediverse" | _ }}</h1>
 
+    {% if account %}
+        {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=3) }}
+    {% else %}
+        {{ macros::tabs(links=['/', '/federated', '/local'], titles=['Latest articles', 'Federated feed', 'Local feed'], selected=2) }}
+    {% endif %}
+
     <div class="cards">
         {% for article in articles %}
             {{ macros::post_card(article=article) }}
diff --git a/templates/instance/feed.html.tera b/templates/instance/feed.html.tera
index 58263260..19347dfb 100644
--- a/templates/instance/feed.html.tera
+++ b/templates/instance/feed.html.tera
@@ -10,6 +10,8 @@
         {{ "Your feed" | _ }}
     </h1>
 
+    {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=2) }}
+
     {% if articles | length > 0 %}
         <div class="cards">
             {% for article in articles %}
diff --git a/templates/instance/index.html.tera b/templates/instance/index.html.tera
index dd9e1ac9..f9c69e1b 100644
--- a/templates/instance/index.html.tera
+++ b/templates/instance/index.html.tera
@@ -8,14 +8,19 @@
 {% block content %}
     <h1>{{ "Welcome on {{ instance_name | escape }}" | _(instance_name=instance.name) }}</h1>
 
-    <h2>{{ "Latest articles" | _ }}</h2>
+    {% if account %}
+        {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=1) }}
+    {% else %}
+        {{ macros::tabs(links=['/', '/federated', '/local'], titles=['Latest articles', 'Federated feed', 'Local feed'], selected=1) }}
+    {% endif %}
+
     <div class="cards">
         {% for article in recents %}
             {{ macros::post_card(article=article) }}
         {% endfor %}
     </div>
     {{ macros::paginate(page=page, total=n_pages) }}
-    
+
     <section class="spaced">
         <div class="cards">
             <div class="presentation card">
diff --git a/templates/instance/local.html.tera b/templates/instance/local.html.tera
index 9c550f4e..5c821380 100644
--- a/templates/instance/local.html.tera
+++ b/templates/instance/local.html.tera
@@ -8,6 +8,12 @@
 {% block content %}
     <h1>{{ "Articles from {{ instance.name }}" | _(instance=instance) }}</h1>
 
+    {% if account %}
+        {{ macros::tabs(links=['/', '/feed', '/federated', '/local'], titles=['Latest articles', 'Your feed', 'Federated feed', 'Local feed'], selected=4) }}
+    {% else %}
+        {{ macros::tabs(links=['/', '/federated', '/local'], titles=['Latest articles', 'Federated feed', 'Local feed'], selected=3) }}
+    {% endif %}
+
     <div class="cards">
         {% for article in articles %}
             {{ macros::post_card(article=article) }}
diff --git a/templates/macros.html.tera b/templates/macros.html.tera
index e1a7e989..aaaee1aa 100644
--- a/templates/macros.html.tera
+++ b/templates/macros.html.tera
@@ -63,3 +63,11 @@
         {% endfor %}
     </div>
 {% endmacro %}
+{% macro tabs(links, titles, selected) %}
+    <div class="tabs">
+        {% for link in links %}
+            {% set idx = loop.index0 %}
+            <a href="{{ link }}" {% if loop.index == selected %}class="selected"{% endif %}>{{ titles[idx] | _ }}</a>
+        {% endfor %}
+    </div>
+{% endmacro %}