user page redesign: implement followers, following pages

includes subtabs on profile pages

for #442

pages.py

@@ -9,7 +9,7 @@ from flask import g, render_template, request
 from google.cloud.ndb import tasklets
 from google.cloud.ndb.query import AND, OR
 from google.cloud.ndb.stats import KindStat
-from granary import as1, atom, microformats2, rss
+from granary import as1, as2, atom, microformats2, rss
 import humanize
 from oauth_dropins.webutil import flask_util, logs, util
 from oauth_dropins.webutil.flask_util import error, flash, redirect
@@ -105,15 +105,7 @@ def profile(protocol, id):
                             Object.notify == g.user.key))
     objects, before, after = fetch_objects(query, by=Object.updated)
 
-    followers = Follower.query(Follower.to == g.user.key,
-                               Follower.status == 'active')\
-                        .count(limit=FOLLOWERS_UI_LIMIT)
-    followers = f'{followers}{"+" if followers == FOLLOWERS_UI_LIMIT else ""}'
-
-    following = Follower.query(Follower.from_ == g.user.key,
-                               Follower.status == 'active')\
-                        .count(limit=FOLLOWERS_UI_LIMIT)
-    following = f'{following}{"+" if following == FOLLOWERS_UI_LIMIT else ""}'
+    num_followers, num_following = count_followers()
 
     return render_template('profile.html', logs=logs, util=util, g=g, **locals())
 
@@ -143,9 +135,11 @@ def followers_or_following(protocol, id, collection):
     load_user(protocol, id)
 
     followers, before, after = Follower.fetch_page(collection)
+    num_followers, num_following = count_followers()
     return render_template(
         f'{collection}.html',
         address=request.args.get('address'),
+        as2=as2,
         follow_url=request.values.get('url'),
         g=g,
         util=util,
@@ -153,6 +147,19 @@ def followers_or_following(protocol, id, collection):
     )
 
 
+def count_followers():
+    followers = Follower.query(Follower.to == g.user.key,
+                               Follower.status == 'active')\
+                        .count(limit=FOLLOWERS_UI_LIMIT)
+    num_followers = f'{followers}{"+" if followers == FOLLOWERS_UI_LIMIT else ""}'
+
+    following = Follower.query(Follower.from_ == g.user.key,
+                               Follower.status == 'active')\
+                        .count(limit=FOLLOWERS_UI_LIMIT)
+    num_following = f'{following}{"+" if following == FOLLOWERS_UI_LIMIT else ""}'
+
+    return num_followers, num_following
+
 @app.get(f'/<any({",".join(PROTOCOLS)}):protocol>/<id>/feed')
 def feed(protocol, id):
     format = request.args.get('format', 'html')

static/style.css

@@ -345,6 +345,7 @@ button[disabled]:hover {
   border-left: 1px solid;
   border-right: 1px solid;
   background: inherit;
+  color: inherit;
 }
 
 .disable-button, #bad-button {

templates/feed.html

@@ -4,8 +4,6 @@
 
 {% block content %}
 
-{% include "user_addresses.html" %}
-
 <div class="row big">Feed</div>
 
 <link rel="stylesheet" href="/static/feed.css" type="text/css" />

templates/followers.html

@@ -1,13 +1,8 @@
-{% extends "base.html" %}
-
-{% block title %}{{ g.user.handle_or_id() }}'s followers - Bridgy Fed{% endblock %}
-
-{% block content %}
-
-{% include "user_addresses.html" %}
-
-<div class="row big">Followers</div>
+{% extends "profile.html" %}
+{% set subtab = "followers" %}
 
+{% block subsubtabs %}
+{% if g.user.LABEL != 'activitypub' %}
 <div class="row">
     <form method="post" action="/remote-follow">
     <nobr>
@@ -21,9 +16,11 @@
     </nobr>
     </form>
 </div>
+{% endif %}
+{% endblock subsubtabs %}
 
-{% with page_name="followers" %}
-  {% include "_followers.html" %}
-{% endwith %}
-
+{% block feed %}
+  {% with page_name="followers" %}
+    {% include "_followers.html" %}
+  {% endwith %}
 {% endblock %}

templates/following.html

@@ -1,13 +1,7 @@
-{% extends "base.html" %}
-
-{% block title %}{{ g.user.handle_or_id() }}'s following - Bridgy Fed{% endblock %}
-
-{% block content %}
-
-{% include "user_addresses.html" %}
-
-<div class="row big">Following</div>
+{% extends "profile.html" %}
+{% set subtab = "following" %}
 
+{% block subsubtabs %}
 {% if g.user.LABEL != 'activitypub' %}
 <div class="row">
 <form method="post" action="/follow/start">
@@ -22,9 +16,10 @@
 </form>
 </div>
 {% endif %}
+{% endblock subsubtabs %}
 
-{% with page_name="following" %}
-  {% include "_followers.html" %}
-{% endwith %}
-
+{% block feed %}
+  {% with page_name="following" %}
+    {% include "_followers.html" %}
+  {% endwith %}
 {% endblock %}

templates/profile.html

@@ -2,25 +2,21 @@
 {% set tab = "profile" %}
 
 {% block subtabs %}
-<div class="row">
-  <a href="{{ g.user.user_page_path('followers') }}">{{ followers }} follower{% if followers != '1' %}s{% endif %}</a>
-  &middot;
-  <a href="{{ g.user.user_page_path('following') }}">following {{ following }}</a>
-  &middot;
-
-  {% if g.user.LABEL != 'activitypub' %}
-  bridged to
-  <nobr title="Fediverse address">
-    <img class="logo" src="/static/fediverse_logo.svg">
-    {{ g.user.ap_address() }}
-  </nobr>
-  <form method="post" action="/webmention-interactive">
-    <input name="source" type="hidden" value="{{ g.user.web_url() }}" />
-    &nbsp;
-    <button id="update-profile-button" type="submit"
-            title="Update profile from web site"
-            class="btn btn-default glyphicon glyphicon-refresh"></button>
-  </form>
-  {% endif %}
+<div class="row tabs">
+  <a></a>
+  <a href="{{ g.user.user_page_path() }}"
+     {% if not subtab %}class="active-tab"{% endif %}
+     >activity</a><a
+  href="{{ g.user.user_page_path('followers') }}"
+     {% if subtab == 'followers' %}class="active-tab"{% endif %}
+     >{{ num_followers }} follower{% if followers != '1' %}s{% endif %}</a><a
+  href="{{ g.user.user_page_path('following') }}"
+     {% if subtab == 'following' %}class="active-tab"{% endif %}
+     >following {{ num_following }}</a>
+  <a></a>
 </div>
+
+{% block subsubtabs %}
+{% endblock subsubtabs %}
+
 {% endblock subtabs %}

templates/user_base.html

@@ -35,8 +35,23 @@
 {% endif %}
 {% endif %}
 
-<div class="row big">
-  {{ g.user.user_link()|safe }}
+<div class="row">
+  <span class="big">{{ g.user.user_link()|safe }}</span>
+  &middot;
+  {% if g.user.LABEL != 'activitypub' %}
+  bridged to
+  <nobr title="Fediverse address">
+    <img class="logo" src="/static/fediverse_logo.svg">
+    {{ g.user.ap_address() }}
+  </nobr>
+  <form method="post" action="/webmention-interactive">
+    <input name="source" type="hidden" value="{{ g.user.web_url() }}" />
+    &nbsp;
+    <button id="update-profile-button" type="submit"
+            title="Update profile from web site"
+            class="btn btn-default glyphicon glyphicon-refresh"></button>
+  </form>
+  {% endif %}
 </div>
 
 <!-- tabs -->