Fix a bunch of mobile formatting issues
This commit is contained in:
Jason McBrayer
parent
9e1a82655e
commit
69a678a5ce
|
|
@ -20,3 +20,15 @@ div.card-header-title, div.card-header-icon {
|
|||
-moz-text-stroke: 2px white;
|
||||
text-stroke: 2px white;
|
||||
}
|
||||
|
||||
.media {
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
color: #4a4a4a;
|
||||
display: block;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,93 +1,79 @@
|
|||
{% extends "base.html" %}
|
||||
{% load humanize %}
|
||||
{% load taglinks %}
|
||||
|
||||
{% block title %}
|
||||
Brutaldon - {{ timeline }} timelime
|
||||
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
|
||||
}
|
||||
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>
|
||||
<hr class="is-hidden">
|
||||
{% 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>
|
||||
<hr class="is-hidden">
|
||||
{% 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>
|
||||
<hr class="is-hidden">
|
||||
{% 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>
|
||||
<hr class="is-hidden">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<h1 class="title">Your {{ timeline }} timeline</h1>
|
||||
{% for note in notes %}
|
||||
{% if note.type == 'mention' %}
|
||||
<p>
|
||||
<strong>{{ note.account.display_name }}</strong>
|
||||
(<a href="{{ note.account.url | localuser }}">{{ note.account.acct }}</a>)
|
||||
mentioned you.
|
||||
</p>
|
||||
<br>
|
||||
{% include "main/toot_partial.html" with toot=note.status reblog=False %}
|
||||
<hr class="is-hidden">
|
||||
{% elif note.type == 'reblog' %}
|
||||
<p>
|
||||
{{ note.account.display_name }}
|
||||
(<a href="{{ note.account.url | localuser }}">{{ note.account.acct }}</a>)
|
||||
boosted your toot.
|
||||
(<span>
|
||||
<small>{{ note.created_at |naturaltime }}</small>
|
||||
</span>)
|
||||
</p>
|
||||
{% include "main/toot_partial.html" with toot=note.status reblog=True reblog_by=note.account.acct reblog_icon=note.account.avatar %}
|
||||
<hr class="is-hidden">
|
||||
{% elif note.type == 'favourite' %}
|
||||
<p>
|
||||
{{ note.account.display_name }}
|
||||
(<a href="{{ note.account.url | localuser}}">{{ note.account.acct }}</a>)
|
||||
favorited your toot.
|
||||
(<span>
|
||||
<small>{{ note.created_at |naturaltime }}</small>
|
||||
</span>)
|
||||
</p>
|
||||
{% include "main/toot_partial.html" with toot=note.status reblog=True reblog_by=note.account.acct reblog_icon=note.account.avatar %}
|
||||
<hr class="is_hidden">
|
||||
{% elif note.type == 'follow' %}
|
||||
<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 |localuser }}">{{ note.account.acct }}</a>)
|
||||
followed you.
|
||||
(<a href="{{ note.url }}">
|
||||
<small>{{ note.created_at |naturaltime }}</small>
|
||||
</a>)
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<hr class="is-hidden">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -2,37 +2,35 @@
|
|||
{% load humanize %}
|
||||
|
||||
{% block title %}
|
||||
Brutaldon - {{ timeline_name }} timelime
|
||||
Brutaldon - {{ timeline_name }} timelime
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if form %}
|
||||
<h1 class="title">Post</h1>
|
||||
<div class="box">
|
||||
{% include "main/post_minimal_partial.html" %}
|
||||
</div>
|
||||
<hr class="is-hidden">
|
||||
<h1 class="title">Post</h1>
|
||||
<div class="box">
|
||||
{% include "main/post_minimal_partial.html" %}
|
||||
</div>
|
||||
<hr class="is-hidden">
|
||||
{% endif %}
|
||||
<h1 class="title">Your {{ timeline_name }} 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 %}
|
||||
<h1 class="title">Your {{ timeline_name }} timeline</h1>
|
||||
{% for toot in toots %}
|
||||
{% 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 %}
|
||||
<hr class="is-hidden">
|
||||
{% endfor %}
|
||||
|
||||
{% block pagination %}
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
{% if prev %}
|
||||
<a class="pagination-next" href="{% url 'home_prev' prev.since_id %}">Newer</a>
|
||||
{% endif %}
|
||||
{% if next %}
|
||||
<a class="pagination-previous" href="{% url 'home_next' next.max_id %}">Older</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endblock %}
|
||||
{% block pagination %}
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
{% if prev %}
|
||||
<a class="pagination-next" href="{% url 'home_prev' prev.since_id %}">Newer</a>
|
||||
{% endif %}
|
||||
{% if next %}
|
||||
<a class="pagination-previous" href="{% url 'home_next' next.max_id %}">Older</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -20,42 +20,41 @@
|
|||
{% endif %}
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>{{ toot.account.display_name }}</strong>
|
||||
<small><a href="{% url "user" toot.account.acct %}">@{{ toot.account.acct }}</a></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 %}
|
||||
<details>
|
||||
<summary><strong>{{ toot.spoiler_text }} </strong></summary>
|
||||
<div class="toot">
|
||||
{{ toot.content | relink_toot | strip_html | safe }}
|
||||
</div>
|
||||
</details>
|
||||
{% else %}
|
||||
<p>
|
||||
<strong>{{ toot.account.display_name }}</strong>
|
||||
<small><a href="{% url "user" toot.account.acct %}">@{{ toot.account.acct }}</a></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 %}
|
||||
<details class="toot">
|
||||
<summary><strong>{{ toot.spoiler_text }} </strong></summary>
|
||||
<div class="toot">
|
||||
{{ toot.content | relink_toot | strip_html | safe }}
|
||||
</div>
|
||||
</details>
|
||||
{% else %}
|
||||
<div class="toot">
|
||||
{{ toot.content | relink_toot | strip_html | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% 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 }}">
|
||||
{% if toot.sensitive %}
|
||||
<img src="{% static "images/sensitive.png" %}"
|
||||
{% else %}
|
||||
<img src="{{ media.preview_url }}"
|
||||
{% endif %}
|
||||
{% 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 }}">
|
||||
{% if toot.sensitive %}
|
||||
<img src="{% static "images/sensitive.png" %}"
|
||||
{% else %}
|
||||
<img src="{{ media.preview_url }}"
|
||||
{% endif %}
|
||||
alt="{% if media.description %}
|
||||
{{ media.description }}
|
||||
{% elif media.text_url %}
|
||||
|
|
@ -67,42 +66,36 @@
|
|||
title="{{ media.description }}"
|
||||
{% endif %}
|
||||
class="image is-128x128">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<br>
|
||||
<p class="is-hidden"></p>
|
||||
|
||||
{% if not confirm_page %}
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a href="{% url "reply" toot.id %}">
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a href="{% url "reply" toot.id %}" class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-reply">
|
||||
<span class="is-invisible">Reply</span>
|
||||
</i></span>
|
||||
</a>
|
||||
</div>
|
||||
{% if toot.visibility != 'private' and toot.visibility != 'direct' %}
|
||||
<div class="level-item">
|
||||
<a href="{% url "boost" toot.id %}">
|
||||
<span class="icon is-small">
|
||||
{% if toot.reblogged %}
|
||||
<i class="fa fa-retweet has-text-warning">
|
||||
{% else %}
|
||||
<i class="fa fa-retweet" >
|
||||
{% endif %}
|
||||
<span class="is-invisible" >Boost</span>
|
||||
</i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="level-item">
|
||||
<a href="{% url "fav" toot.id %}">
|
||||
{% if toot.visibility != 'private' and toot.visibility != 'direct' %}
|
||||
<a href="{% url "boost" toot.id %}" class="level-item">
|
||||
<span class="icon is-small">
|
||||
{% if toot.reblogged %}
|
||||
<i class="fa fa-retweet has-text-warning">
|
||||
{% else %}
|
||||
<i class="fa fa-retweet" >
|
||||
{% endif %}
|
||||
<span class="is-invisible" >Boost</span>
|
||||
</i>
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{% url "fav" toot.id %}" class="level-item">
|
||||
<span class="icon is-small">
|
||||
{% if toot.favourited %}
|
||||
<i class="fa fa-heart has-text-warning">
|
||||
|
|
@ -114,23 +107,20 @@
|
|||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
{% if toot.account.acct == own_username %}
|
||||
<a class="level-item" href="{% url "delete" toot.id %}">
|
||||
delete
|
||||
<div class="level-right">
|
||||
{% if toot.account.acct == own_username %}
|
||||
<a class="level-item" href="{% url "delete" toot.id %}">
|
||||
delete
|
||||
</a>
|
||||
{% endif %}
|
||||
<span class="level-item">
|
||||
{{ toot.visibility }}
|
||||
</span>
|
||||
<a class="level-item" href="{% url "thread" toot.id %}">
|
||||
thread
|
||||
</a>
|
||||
{% endif %}
|
||||
<span class="level-item">
|
||||
{{ toot.visibility }}
|
||||
</span>
|
||||
<a class="level-item" href="{% url "thread" toot.id %}">
|
||||
thread
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="media-right">
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,8 @@
|
|||
<div class="card-header">
|
||||
{% endif %}
|
||||
<div class="card-header-title title">
|
||||
{{ user.display_name }}
|
||||
|
||||
<a href="{{ user.url }}">
|
||||
(@{{ user.acct }})
|
||||
{{ user.display_name }}
|
||||
</a>
|
||||
</div>
|
||||
<figure class="image is-96x96 card-header-icon">
|
||||
|
|
|
|||
|
|
@ -44,3 +44,15 @@ def relink_mentions(value):
|
|||
@register.filter
|
||||
def relink_toot(value):
|
||||
return relink_tags(relink_mentions(value))
|
||||
|
||||
@register.filter
|
||||
def localuser(value):
|
||||
'''Convert a remote user link to local'''
|
||||
try:
|
||||
parsed = parse.urlparse(value)
|
||||
instance = parsed[1]
|
||||
user = parsed[2][2:]
|
||||
local = reverse('user', args=[user+'@'+instance])
|
||||
except:
|
||||
local = value
|
||||
return local
|
||||
|
|
|
|||
Loading…
Reference in New Issue