Add notification templates
This commit is contained in:
Jason McBrayer
parent
d199327d35
commit
af30107368
|
|
@ -3,3 +3,8 @@
|
||||||
top: -24px;
|
top: -24px;
|
||||||
left: 40px;
|
left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img.fav-avatar {
|
||||||
|
display: inline;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -155,15 +155,6 @@ img {
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-32x32 img {
|
|
||||||
max-width: 32px;
|
|
||||||
max-height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-64x64 img {
|
|
||||||
max-width: 64px;
|
|
||||||
max-height: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.level {
|
.level {
|
||||||
clear: both;
|
clear: both;
|
||||||
|
|
@ -190,3 +181,14 @@ img {
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
border: 8px ridge #CCC;
|
border: 8px ridge #CCC;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image.is-32x32, .is-32x32 img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image.is-64x64, .is-64x64 img {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
|
|
@ -8,11 +8,13 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1 class="title">Your {{ timeline }} timeline</h1>
|
<h1 class="title">Your {{ timeline }} timeline</h1>
|
||||||
{% for toot in toots %}
|
{% for toot in toots %}
|
||||||
|
<div class="box">
|
||||||
{% if toot.reblog %}
|
{% if toot.reblog %}
|
||||||
{% include "main/toot_partial.html" with toot=toot.reblog reblog=True reblog_by=toot.account.acct reblog_icon=toot.account.avatar %}
|
{% include "main/toot_partial.html" with toot=toot.reblog reblog=True reblog_by=toot.account.acct reblog_icon=toot.account.avatar %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% include "main/toot_partial.html" with toot=toot reblog=False %}
|
{% include "main/toot_partial.html" with toot=toot reblog=False %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</div>
|
||||||
<hr class="is-hidden">
|
<hr class="is-hidden">
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,94 +1,92 @@
|
||||||
{% load humanize %}
|
{% load humanize %}
|
||||||
|
|
||||||
<div class="box">
|
<article class="media">
|
||||||
<article class="media">
|
<figure class="media-left">
|
||||||
<figure class="media-left">
|
<p class="image is-64x64">
|
||||||
<p class="image is-64x64">
|
<img src="{{ toot.account.avatar }}"
|
||||||
<img src="{{ toot.account.avatar }}"
|
alt="">
|
||||||
alt="">
|
</p>
|
||||||
|
{% if reblog %}
|
||||||
|
<p class="image is-32x32 reblog-icon" >
|
||||||
|
<img src ="{{ reblog_icon }}" alt="">
|
||||||
</p>
|
</p>
|
||||||
{% if reblog %}
|
{% endif %}
|
||||||
<p class="image is-32x32 reblog-icon" >
|
</figure>
|
||||||
<img src ="{{ reblog_icon }}" alt="">
|
<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>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</figure>
|
<div class="toot">
|
||||||
<div class="media-content">
|
{{ toot.content | safe }}
|
||||||
<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>
|
</div>
|
||||||
<nav class="level is-mobile">
|
|
||||||
<div class="level-left">
|
{% if toot.media_attachments %}
|
||||||
<a class="level-item">
|
<br>
|
||||||
<span class="icon is-small"><i class="fa fa-reply">
|
<div class="level">
|
||||||
<span class="is-invisible">Reply</span>
|
<div class="level-left">
|
||||||
</i></span>
|
{% for media in toot.media_attachments %}
|
||||||
</a>
|
<a class="level-item" href="{{ media.url }}">
|
||||||
<a class="level-item">
|
<img src="{{ media.preview_url }}"
|
||||||
<span class="icon is-small"><i class="fa fa-retweet">
|
alt="{% if media.description %}
|
||||||
<span class="is-invisible" >Boost</span>
|
{{ media.description }}
|
||||||
</i></span>
|
{% elif media.text_url %}
|
||||||
</a>
|
{{ media.text_url }}
|
||||||
<a class="level-item">
|
{% else %}
|
||||||
<span class="icon is-small"><i class="fa fa-heart">
|
{{ media.url }}
|
||||||
<span class="is-invisible" >Favorite</span>
|
{% endif %}"
|
||||||
</i></span>
|
{% if media.description %}
|
||||||
</a>
|
title="{{ media.description }}"
|
||||||
|
{% endif %}
|
||||||
|
class="image is-128x128">
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="level-right">
|
{% endif %}
|
||||||
<span class="level-item">
|
<br>
|
||||||
{{ toot.visibility }}
|
|
||||||
</span>
|
|
||||||
<a class="level-item" >
|
|
||||||
thread
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="media-right">
|
<nav class="level is-mobile">
|
||||||
</div>
|
<div class="level-left">
|
||||||
</article>
|
<a class="level-item">
|
||||||
</div>
|
<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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue