Add icons to notifications

And some space between each of them

Fix #139
This commit is contained in:
Bat 2018-07-26 16:09:36 +02:00
parent c87d490664
commit 7a6c01fec5
7 changed files with 131 additions and 22 deletions

View file

@ -351,3 +351,23 @@ msgstr ""
msgid "Next page" msgid "Next page"
msgstr "" 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"

View file

@ -343,3 +343,18 @@ msgstr ""
msgid "Next page" msgid "Next page"
msgstr "" 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 ""

View file

@ -347,3 +347,23 @@ msgstr ""
msgid "Next page" msgid "Next page"
msgstr "" 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"

View file

@ -356,5 +356,25 @@ msgstr ""
msgid "Next page" msgid "Next page"
msgstr "" 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" #~ msgid "Logowanie"
#~ msgstr "Zaloguj się" #~ msgstr "Zaloguj się"

View file

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

View file

@ -468,7 +468,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
.list .card { .list .card {
/* TODO */ /* TODO */
background: 0; background: 0;
margin: 0; margin: 2em 0;
padding: 0; padding: 0;
min-height: 0; min-height: 0;
} }
@ -555,3 +555,22 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
.pagination > * { .pagination > * {
padding: 2em; 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;
}

View file

@ -9,34 +9,49 @@
<h1>{{ "Notifications" | _ }}</h1> <h1>{{ "Notifications" | _ }}</h1>
<div class="list"> <div class="list">
{% for notification in notifications %} {% for notification in notifications %}
<div class="card"> <div class="card flex">
{% if notification.kind == "COMMENT" %} {% 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" %} {% 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" %} {% 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" %} {% 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" %} {% 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 %} {% endif %}
</div> </div>