Add notification templates

brutaldon/static/css/brutaldon.css

@@ -3,3 +3,8 @@
     top: -24px;
     left: 40px;
 }
+
+img.fav-avatar {
+    display: inline;
+
+}

brutaldon/static/css/fullbrutalism.css

@@ -155,15 +155,6 @@ img {
     margin: 4px;
 }
 
-.is-32x32 img {
-    max-width: 32px;
-    max-height: 32px;
-}
-
-.is-64x64 img {
-    max-width: 64px;
-    max-height: 64px;
-}
 
 .level {
     clear: both;
@@ -190,3 +181,14 @@ img {
     margin: 4px;
     border: 8px ridge #CCC;
 }
+
+.image.is-32x32, .is-32x32 img {
+    width: 32px;
+    height: 32px;
+}
+
+.image.is-64x64, .is-64x64 img {
+    width: 64px;
+    height: 64px;
+}
+

brutaldon/templates/main/notifications.html

@@ -0,0 +1,89 @@
+{% extends "base.html" %}
+{% load humanize %}
+
+{% block title %}
+    Brutaldon - {{ timeline }} timelime
+{% endblock %}
+
+{% comment %}
+    mastodon.notifications()[0]
+    # Returns the following dictionary:
+    {
+    'id': # id of the notification
+    'type': # "mention", "reblog", "favourite" or "follow"
+    'created_at': # The time the notification was created
+    'account': # User dict of the user from whom the notification originates
+    'status': # In case of "mention", the mentioning status
+    # In case of reblog / favourite, the reblogged / favourited status
+    }
+{% endcomment %}
+
+
+{% block content %}
+    <h1 class="title">Your {{ timeline }} timeline</h1>
+    {% for note in notes %}
+        {% if note.type == 'mention' %}
+            <div class="box" >
+                <p>
+                    <strong>{{ note.account.display_name }}</strong>
+                    (<a href="{{ note.account.url }}">{{ note.account.acct }}</a>)
+                    mentioned you.
+                </p>
+                <br>
+                {% include "main/toot_partial.html" with toot=note.status reblog=False %}
+            </div>
+        {% elif note.type == 'reblog' %}
+            <div class="box">
+                <p>
+                    {{ note.account.display_name }}
+                    (<a href="{{ note.account.url }}">{{ note.account.acct }}</a>)
+                    boosted your toot.
+                    (<a href="{{ note.url }}">
+                        <small>{{ note.created_at |naturaltime  }}</small>
+                    </a>)
+                </p>
+                {% include "main/toot_partial.html" with toot=note.status reblog=True reblog_by=note.account.acct reblog_icon=note.account.avatar %}
+            </div>
+        {% elif note.type == 'favourite' %}
+            <div class="box" >
+                <div class="level">
+                    <div class="level-left">
+                        <div class="level-item" >
+                            <img class="image is-32x32 fav-avatar" src="{{ note.account.avatar }}">
+                        </div>
+                        <div class="level-item" >
+                            {{ note.account.display_name }}
+                            (<a href="{{ note.account.url }}">{{ note.account.acct }}</a>)
+                            favorited your toot.
+                            (<a href="{{ note.url }}">
+                                <small>{{ note.created_at |naturaltime  }}</small>
+                            </a>)
+                        </div>
+                    </div>
+                </div>
+                {% include "main/toot_partial.html" with toot=note.status reblog=False %}
+            </div>
+        {% elif note.type == 'follow' %}
+            <div class="box" >
+                <article class="media">
+                    <figure class="media-left">
+                        <p class="image is-64x64">
+                            <img src="{{ note.account.avatar }}" alt="">
+                        </p>
+                    </figure>
+                    <div class="media-content" >
+                        <div class="content">
+                            <strong>{{ note.account.display_name }}</strong>
+                            (<a href="{{ note.account.url }}">{{ note.account.acct }}</a>)
+                            followed you.
+                            (<a href="{{ note.url }}">
+                                <small>{{ note.created_at |naturaltime  }}</small>
+                            </a>)
+                        </div>
+                    </div>
+                </article>
+            </div>
+        {% endif %}
+    {% endfor %}
+
+{% endblock %}

brutaldon/templates/main/timeline.html

@@ -8,11 +8,13 @@
 {% block content %}
     <h1 class="title">Your {{ timeline }} timeline</h1>
     {% for toot in toots %}
+    <div class="box">
         {% if toot.reblog %}
             {% include "main/toot_partial.html" with toot=toot.reblog reblog=True reblog_by=toot.account.acct reblog_icon=toot.account.avatar %}
         {% else %}
             {% include "main/toot_partial.html" with toot=toot reblog=False %}
         {% endif %}
+    </div>
         <hr class="is-hidden">
     {% endfor %}
 

brutaldon/templates/main/toot_partial.html

@@ -1,6 +1,5 @@
 {% load humanize %}
 
-<div class="box">
 <article class="media">
     <figure class="media-left">
         <p class="image is-64x64">
@@ -91,4 +90,3 @@
     <div class="media-right">
     </div>
 </article>
-</div>