Add icons to notifications

And some space between each of them

Fix #139

po/de.po

@@ -351,3 +351,23 @@ msgstr ""
 
 msgid "Next page"
 msgstr ""
+
+#, fuzzy
+msgid "{{ user }} mentioned you."
+msgstr "{{ data }} hat dich erwähnt."
+
+#, fuzzy
+msgid "{{ user }} commented your article."
+msgstr "{{ data }} hat deinen Artikel kommentiert"
+
+#, fuzzy
+msgid "{{ user }} is now following you."
+msgstr "{{ data }} folgt dir nun"
+
+#, fuzzy
+msgid "{{ user }} liked your article."
+msgstr "{{ data }} hat deinen Artikel geliked"
+
+#, fuzzy
+msgid "{{ user }} reshared your article."
+msgstr "{{ data }} hat deinen Artikel reshared"

po/en.po

@@ -343,3 +343,18 @@ msgstr ""
 
 msgid "Next page"
 msgstr ""
+
+msgid "{{ user }} mentioned you."
+msgstr ""
+
+msgid "{{ user }} commented your article."
+msgstr ""
+
+msgid "{{ user }} is now following you."
+msgstr ""
+
+msgid "{{ user }} liked your article."
+msgstr ""
+
+msgid "{{ user }} reshared your article."
+msgstr ""

po/fr.po

@@ -347,3 +347,23 @@ msgstr ""
 
 msgid "Next page"
 msgstr ""
+
+#, fuzzy
+msgid "{{ user }} mentioned you."
+msgstr "{{ data }} vous a mentionné."
+
+#, fuzzy
+msgid "{{ user }} commented your article."
+msgstr "{{ data }} a commenté votre article"
+
+#, fuzzy
+msgid "{{ user }} is now following you."
+msgstr "{{ data }} vous suit"
+
+#, fuzzy
+msgid "{{ user }} liked your article."
+msgstr "{{ data }} a aimé votre article"
+
+#, fuzzy
+msgid "{{ user }} reshared your article."
+msgstr "{{ data }} a repartagé votre article"

po/pl.po

@@ -356,5 +356,25 @@ msgstr ""
 msgid "Next page"
 msgstr ""
 
+#, fuzzy
+msgid "{{ user }} mentioned you."
+msgstr "{{ data }} wspomniał o Tobie."
+
+#, fuzzy
+msgid "{{ user }} commented your article."
+msgstr "{{ data }} skomentował Twój artykuł"
+
+#, fuzzy
+msgid "{{ user }} is now following you."
+msgstr "{{ data }} zaczął Cię obserwować"
+
+#, fuzzy
+msgid "{{ user }} liked your article."
+msgstr "{{ data }} polubił Twój artykuł"
+
+#, fuzzy
+msgid "{{ user }} reshared your article."
+msgstr "{{ data }} udostępnił Twój artykuł"
+
 #~ msgid "Logowanie"
 #~ msgstr "Zaloguj się"

po/plume.pot

@@ -349,5 +349,5 @@ msgstr ""
 msgid "{{ user }} liked your article."
 msgstr ""
 
-msgstr "{{ user }} reshare your article."
+msgid "{{ user }} reshared your article."
-msgid ""
+msgstr ""

static/main.css

@@ -468,7 +468,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
 .list .card {
 /* TODO */
 	background: 0;
-	margin: 0;
+	margin: 2em 0;
 	padding: 0;
 	min-height: 0;
 }
@@ -555,3 +555,22 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
 .pagination > * {
 	padding: 2em;
 }
+
+/*== Flex boxes ==*/
+.flex {
+	display: flex;
+	flex-direction: row;
+}
+
+.flex .grow {
+	flex: 1;
+}
+
+.left-icon {
+	align-self: center;
+	padding: 1em;
+	background: #DADADA;
+	border-radius: 50px;
+	margin: 1em;
+	margin-right: 2em;
+}

templates/notifications/index.html.tera

@@ -9,34 +9,49 @@
     <h1>{{ "Notifications" | _ }}</h1>
     <div class="list">
         {% for notification in notifications %}
-            <div class="card">
+            <div class="card flex">
                 {% if notification.kind == "COMMENT" %}
-                    <h3><a href="{{ notification.object.post.url }}#comment-{{ notification.object.id }}">
+                    <i class="fa fa-comment left-icon"></i>
-                        {{ "{{ user }} commented your article." | _(user=notification.object.user.display_name) }}
+                    <main class="grow">
-                    </a></h3>
+                        <h3><a href="{{ notification.object.post.url }}#comment-{{ notification.object.id }}">
-                    <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.title }}</a></p>
+                            {{ "{{ user }} commented your article." | _(user=notification.object.user.display_name | escape) }}
+                        </a></h3>
+                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
+                    </main>
 
                 {% elif notification.kind == "FOLLOW" %}
-                    <h3><a href="/@/{{ notification.object.follower.fqn }}/">
+                    <i class="fa fa-user-plus left-icon"></i>
-                        {{ "{{ user }} is now following you." | _(user=notification.object.follower.display_name) }}
+                    <main class="grow">
-                    </a></h3>
+                        <h3><a href="/@/{{ notification.object.follower.fqn }}/">
+                            {{ "{{ user }} is now following you." | _(user=notification.object.follower.display_name | escape) }}
+                        </a></h3>
+                    </main>
 
                 {% elif notification.kind == "LIKE" %}
-                    <h3>
+                    <i class="fa fa-heart left-icon"></i>
-                        {{ "{{ user }} liked your article." | _(user=notification.object.user.display_name) }}
+                    <main class="grow">
-                    </h3>
+                        <h3>
-                    <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.title }}</a></p>
+                            {{ "{{ user }} liked your article." | _(user=notification.object.user.display_name | escape) }}
+                        </h3>
+                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
+                    </main>
 
                 {% elif notification.kind == "MENTION" %}
-                    <h3><a href="{{ notification.object.url }}">
+                    <i class="fa fa-at left-icon"></i>
-                        {{ "{{ user }} mentioned you." | _(user=notification.object.user.display_name) }}
+                    <main class="grow">
-                    </a></h3>
+                        <h3><a href="{{ notification.object.url }}">
+                            {{ "{{ user }} mentioned you." | _(user=notification.object.user.display_name | escape) }}
+                        </a></h3>
+                    </main>
 
                 {% elif notification.kind == "RESHARE" %}
-                    <h3>
+                    <i class="fa fa-retweet left-icon"></i>
-                        {{ "{{ user }} reshare your article." | _(user=notification.object.user.display_name) }}
+                    <main class="grow">
-                    </h3>
+                        <h3>
-                    <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.title }}</a></p>
+                            {{ "{{ user }} reshared your article." | _(user=notification.object.user.display_name | escape) }}
+                        </h3>
+                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
+                    </main>
 
                 {% endif %}
             </div>