Add drafts count and pill css

articles/context_processors.py

@@ -3,3 +3,7 @@ from articles.models import Article, Page
 
 def pages(request):
     return {"pages": Page.objects.filter(status=Article.PUBLISHED)}
+
+
+def drafts_count(request):
+    return {"drafts_count": Article.with_pages.filter(status=Article.DRAFT).count()}

articles/static/style.css

@@ -127,6 +127,15 @@ tr:hover {
     background-color: var(--background2);
 }
 
+.pill {
+    font-size: 60%;
+    background-color: var(--main2);
+    color: var(--background2);
+    padding: .5ex 1ex;
+    border-radius: 1ex;
+    vertical-align: 15%;
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --accent: #226997;

articles/templates/articles/base.html

@@ -16,7 +16,7 @@
     <a href="{% url 'articles-list' %}">Gab's Notes</a>
     |
     {% if user.is_authenticated %}
-        <a href="{% url 'drafts-list' %}">View drafts</a>
+        <a href="{% url 'drafts-list' %}">View drafts <span class="pill">{{ drafts_count }}</span></a>
         <a href="{% url 'admin:index' %}">Admin</a>
     {% else %}
         <a href="{% url 'admin:login' %}?next=/">Log in</a>

blog/settings.py

@@ -73,6 +73,7 @@ TEMPLATES = [
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
                 "articles.context_processors.pages",
+                "articles.context_processors.drafts_count",
             ],
         },
     },