Add notification templates

This commit is contained in:
Jason McBrayer 2018-04-26 11:17:20 -04:00
parent d199327d35
commit af30107368
5 changed files with 191 additions and 95 deletions

View File

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

View File

@ -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;
}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -1,94 +1,92 @@
{% load humanize %}
<div class="box">
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="{{ toot.account.avatar }}"
alt="">
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="{{ toot.account.avatar }}"
alt="">
</p>
{% if reblog %}
<p class="image is-32x32 reblog-icon" >
<img src ="{{ reblog_icon }}" alt="">
</p>
{% if reblog %}
<p class="image is-32x32 reblog-icon" >
<img src ="{{ reblog_icon }}" alt="">
{% endif %}
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>{{ toot.account.display_name }}</strong>
<small>@{{ toot.account.acct }}</small>
<a href="{{ toot.url }}">
<small>{{ toot.created_at |naturaltime }}</small>
</a>
{% if reblog %}
<br>
Boosted by @{{ reblog_by }}
{% endif %}
</p>
{% if toot.spoiler_text %}
<p>
<strong>{{ toot.spoiler_text }} </strong>
</p>
{% endif %}
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>{{ toot.account.display_name }}</strong>
<small>@{{ toot.account.acct }}</small>
<a href="{{ toot.url }}">
<small>{{ toot.created_at |naturaltime }}</small>
</a>
{% if reblog %}
<br>
Boosted by @{{ reblog_by }}
{% endif %}
</p>
{% if toot.spoiler_text %}
<p>
<strong>{{ toot.spoiler_text }} </strong>
</p>
{% endif %}
<div class="toot">
{{ toot.content | safe }}
</div>
{% if toot.media_attachments %}
<br>
<div class="level">
<div class="level-left">
{% for media in toot.media_attachments %}
<a class="level-item" href="{{ media.url }}">
<img src="{{ media.preview_url }}"
alt="{% if media.description %}
{{ media.description }}
{% elif media.text_url %}
{{ media.text_url }}
{% else %}
{{ media.url }}
{% endif %}"
{% if media.description %}
title="{{ media.description }}"
{% endif %}
class="image is-128x128">
</a>
{% endfor %}
</div>
</div>
{% endif %}
<br>
<div class="toot">
{{ toot.content | safe }}
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fa fa-reply">
<span class="is-invisible">Reply</span>
</i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-retweet">
<span class="is-invisible" >Boost</span>
</i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-heart">
<span class="is-invisible" >Favorite</span>
</i></span>
</a>
{% if toot.media_attachments %}
<br>
<div class="level">
<div class="level-left">
{% for media in toot.media_attachments %}
<a class="level-item" href="{{ media.url }}">
<img src="{{ media.preview_url }}"
alt="{% if media.description %}
{{ media.description }}
{% elif media.text_url %}
{{ media.text_url }}
{% else %}
{{ media.url }}
{% endif %}"
{% if media.description %}
title="{{ media.description }}"
{% endif %}
class="image is-128x128">
</a>
{% endfor %}
</div>
</div>
<div class="level-right">
<span class="level-item">
{{ toot.visibility }}
</span>
<a class="level-item" >
thread
</a>
</div>
</nav>
{% endif %}
<br>
</div>
<div class="media-right">
</div>
</article>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fa fa-reply">
<span class="is-invisible">Reply</span>
</i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-retweet">
<span class="is-invisible" >Boost</span>
</i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-heart">
<span class="is-invisible" >Favorite</span>
</i></span>
</a>
</div>
<div class="level-right">
<span class="level-item">
{{ toot.visibility }}
</span>
<a class="level-item" >
thread
</a>
</div>
</nav>
</div>
<div class="media-right">
</div>
</article>