Add badges in the menu, tweak the design

app.py

@@ -6,6 +6,7 @@ import mimetypes
 import os
 import urllib
 from datetime import datetime
+from datetime import timezone
 from functools import wraps
 from typing import Any
 from typing import Dict
@@ -18,6 +19,7 @@ import piexif
 import pymongo
 import timeago
 from bson.objectid import ObjectId
+from dateutil import parser
 from flask import Flask
 from flask import Response
 from flask import abort
@@ -103,10 +105,27 @@ def verify_pass(pwd):
 
 @app.context_processor
 def inject_config():
+    q = {
+        "type": "Create",
+        "activity.object.type": "Note",
+        "activity.object.inReplyTo": None,
+        "meta.deleted": False,
+    }
+    notes_count = DB.outbox.find(
+        {"$or": [q, {"type": "Announce", "meta.undo": False}]}
+    ).count()
+    q = {"type": "Create", "activity.object.type": "Note", "meta.deleted": False}
+    with_replies_count = DB.outbox.find(
+        {"$or": [q, {"type": "Announce", "meta.undo": False}]}
+    ).count()
     return dict(
         microblogpub_version=VERSION,
         config=config,
         logged_in=session.get("logged_in", False),
+        followers_count=DB.followers.count(),
+        following_count=DB.following.count(),
+        notes_count=notes_count,
+        with_replies_count=with_replies_count,
     )
 
 
@@ -183,24 +202,16 @@ def get_actor(url):
 @app.template_filter()
 def format_time(val):
     if val:
-        return datetime.strftime(
+        dt = parser.parse(val)
-            datetime.strptime(val, "%Y-%m-%dT%H:%M:%SZ"), "%B %d, %Y, %H:%M %p"
+        return datetime.strftime(dt, "%B %d, %Y, %H:%M %p")
-        )
     return val
 
 
 @app.template_filter()
 def format_timeago(val):
     if val:
-        try:
+        dt = parser.parse(val)
-            return timeago.format(
+        return timeago.format(dt, datetime.now(timezone.utc))
-                datetime.strptime(val, "%Y-%m-%dT%H:%M:%SZ"), datetime.utcnow()
-            )
-        except Exception:
-            return timeago.format(
-                datetime.strptime(val, "%Y-%m-%dT%H:%M:%S.%fZ"), datetime.utcnow()
-            )
-
     return val
 
 

requirements.txt

@@ -1,3 +1,4 @@
+python-dateutil
 libsass
 gunicorn
 piexif

sass/base_theme.scss

@@ -77,7 +77,15 @@ a:hover {
       }
     }
     a {
-      padding: 2px 7px;
+      padding: 5px 10px;
+        small.badge {
+          background-color: $color-menu-background;
+          color: $color-light;
+          border-radius: 2px;
+          margin-left: 5px;
+          padding: 3px 5px 0px 5px;
+          font-weight: bold;
+        }
     }
     a.selected {
       background: $primary-color;
@@ -88,6 +96,11 @@ a:hover {
       background: $primary-color;
       color: $background-color;
       text-decoration: none;
+      border-radius: 2px;
+      .badge {
+        color: $primary-color;
+        background: $background-color;
+      }
     }
   }
 }
@@ -117,7 +130,7 @@ a:hover {
     overflow: hidden;
   }
 }
-.actor-box {
+.actor-box-big {
   display: block;
   text-decoration: none;
 
@@ -207,8 +220,8 @@ form.action-form {
 .summary {
   color: $color-summary;
   font-size: 1.3em;
-  margin-top:50px;
+  margin-top: 60px;
-  margin-bottom:70px;
+  margin-bottom: 50px;
 }
 .summary a, .summay a:hover {
   color: $color-summary;

static/css/theme.css

@@ -1 +1 @@
-.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:40px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{padding:20px 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:2px 7px}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box{display:block;text-decoration:none}.actor-box .actor-box-wrapper{margin-bottom:40px}.actor-box .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.3em;margin-top:50px;margin-bottom:70px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase}
+.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:40px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{padding:20px 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:5px 10px}#header .menu a small.badge{background-color:#ddd;color:#555;border-radius:2px;margin-left:5px;padding:3px 5px 0px 5px;font-weight:bold}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none;border-radius:2px}#header .menu a:hover .badge{color:#1d781d;background:#eee}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box-big{display:block;text-decoration:none}.actor-box-big .actor-box-wrapper{margin-bottom:40px}.actor-box-big .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box-big .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.3em;margin-top:60px;margin-bottom:50px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase}

templates/header.html

@@ -10,10 +10,10 @@
 </div>
 <div class="menu">
 <ul>
-<li><a href="/" {% if request.path == "/" %}class="selected"{% endif %}>/</a></li>
+<li><a href="/" {% if request.path == "/" %}class="selected"{% endif %}>notes <small class="badge">{{ notes_count }}</small></a></li>
-<li><a href="/with_replies" {% if request.path == "/with_replies" %}class="selected"{% endif %}>/with_replies</a></li>
+<li><a href="/with_replies" {% if request.path == "/with_replies" %}class="selected"{% endif %}>with replies <small class="badge">{{ with_replies_count }}</small></a></li>
-<li><a href="/followers"{% if request.path == "/followers" %} class="selected" {% endif %}>/followers</a></li>
+<li><a href="/followers"{% if request.path == "/followers" %} class="selected" {% endif %}>followers <small class="badge">{{ followers_count }}</small></a></li>
-<li><a href="/following"{% if request.path == "/following" %} class="selected" {% endif %}>/following</a></li>
+<li><a href="/following"{% if request.path == "/following" %} class="selected" {% endif %}>following <small class="badge">{{ following_count }}</small></a></li>
 <!-- <li><a href="/about"{% if request.path == "/about" %} class="selected" {% endif %}>/about</a></li>
 -->
 {% if logged_in %}
@@ -23,7 +23,7 @@
 <li><a href="/admin"{% if request.path == "/admin" %} class="selected" {% endif %}>/admin</a></li>
 <li><a href="/logout">/logout</a></li>
 {% else %}
-<li><a href="/remote_follow"{% if request.path == "/remote_follow" %} class="selected" {% endif %}>/remote_follow</a></li>
+<li><a href="/remote_follow"{% if request.path == "/remote_follow" %} class="selected" {% endif %}>remote follow</a></li>
 {% endif %}
 </ul>
 </div>