Fix a bunch of mobile formatting issues

This commit is contained in:
Jason McBrayer 2018-05-23 08:27:45 -04:00
parent 9e1a82655e
commit 69a678a5ce
6 changed files with 182 additions and 186 deletions

View File

@ -20,3 +20,15 @@ div.card-header-title, div.card-header-icon {
-moz-text-stroke: 2px white; -moz-text-stroke: 2px white;
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;
}

View File

@ -1,93 +1,79 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load humanize %} {% load humanize %}
{% load taglinks %}
{% block title %} {% block title %}
Brutaldon - {{ timeline }} timelime Brutaldon - {{ timeline }} timelime
{% endblock %} {% endblock %}
{% comment %} {% comment %}
mastodon.notifications()[0] mastodon.notifications()[0]
# Returns the following dictionary: # Returns the following dictionary:
{ {
'id': # id of the notification 'id': # id of the notification
'type': # "mention", "reblog", "favourite" or "follow" 'type': # "mention", "reblog", "favourite" or "follow"
'created_at': # The time the notification was created 'created_at': # The time the notification was created
'account': # User dict of the user from whom the notification originates 'account': # User dict of the user from whom the notification originates
'status': # In case of "mention", the mentioning status 'status': # In case of "mention", the mentioning status
# In case of reblog / favourite, the reblogged / favourited status # In case of reblog / favourite, the reblogged / favourited status
} }
{% endcomment %} {% endcomment %}
{% block content %} {% block content %}
<h1 class="title">Your {{ timeline }} timeline</h1> <h1 class="title">Your {{ timeline }} timeline</h1>
{% for note in notes %} {% for note in notes %}
{% if note.type == 'mention' %} {% if note.type == 'mention' %}
<div class="box" > <p>
<p> <strong>{{ note.account.display_name }}</strong>
<strong>{{ note.account.display_name }}</strong> (<a href="{{ note.account.url | localuser }}">{{ note.account.acct }}</a>)
(<a href="{{ note.account.url }}">{{ note.account.acct }}</a>) mentioned you.
mentioned you. </p>
</p> <br>
<br> {% include "main/toot_partial.html" with toot=note.status reblog=False %}
{% include "main/toot_partial.html" with toot=note.status reblog=False %} <hr class="is-hidden">
</div> {% elif note.type == 'reblog' %}
<hr class="is-hidden"> <p>
{% elif note.type == 'reblog' %} {{ note.account.display_name }}
<div class="box"> (<a href="{{ note.account.url | localuser }}">{{ note.account.acct }}</a>)
<p> boosted your toot.
{{ note.account.display_name }} (<span>
(<a href="{{ note.account.url }}">{{ note.account.acct }}</a>) <small>{{ note.created_at |naturaltime }}</small>
boosted your toot. </span>)
(<a href="{{ note.url }}"> </p>
<small>{{ note.created_at |naturaltime }}</small> {% include "main/toot_partial.html" with toot=note.status reblog=True reblog_by=note.account.acct reblog_icon=note.account.avatar %}
</a>) <hr class="is-hidden">
</p> {% elif note.type == 'favourite' %}
{% include "main/toot_partial.html" with toot=note.status reblog=True reblog_by=note.account.acct reblog_icon=note.account.avatar %} <p>
</div> {{ note.account.display_name }}
<hr class="is-hidden"> (<a href="{{ note.account.url | localuser}}">{{ note.account.acct }}</a>)
{% elif note.type == 'favourite' %} favorited your toot.
<div class="box" > (<span>
<div class="level"> <small>{{ note.created_at |naturaltime }}</small>
<div class="level-left"> </span>)
<div class="level-item" > </p>
<img class="image is-32x32 fav-avatar" src="{{ note.account.avatar }}"> {% 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">
<div class="level-item" > {% elif note.type == 'follow' %}
{{ note.account.display_name }} <article class="media">
(<a href="{{ note.account.url }}">{{ note.account.acct }}</a>) <figure class="media-left">
favorited your toot. <p class="image is-64x64">
(<a href="{{ note.url }}"> <img src="{{ note.account.avatar }}" alt="">
<small>{{ note.created_at |naturaltime }}</small> </p>
</a>) </figure>
</div> <div class="media-content" >
</div> <div class="content">
</div> <strong>{{ note.account.display_name }}</strong>
{% include "main/toot_partial.html" with toot=note.status reblog=False %} (<a href="{{ note.account.url |localuser }}">{{ note.account.acct }}</a>)
</div> followed you.
<hr class="is-hidden"> (<a href="{{ note.url }}">
{% elif note.type == 'follow' %} <small>{{ note.created_at |naturaltime }}</small>
<div class="box" > </a>)
<article class="media"> </div>
<figure class="media-left"> </div>
<p class="image is-64x64"> </article>
<img src="{{ note.account.avatar }}" alt=""> <hr class="is-hidden">
</p> {% endif %}
</figure> {% endfor %}
<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 %}
{% endblock %} {% endblock %}

View File

@ -2,37 +2,35 @@
{% load humanize %} {% load humanize %}
{% block title %} {% block title %}
Brutaldon - {{ timeline_name }} timelime Brutaldon - {{ timeline_name }} timelime
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% if form %} {% if form %}
<h1 class="title">Post</h1> <h1 class="title">Post</h1>
<div class="box"> <div class="box">
{% include "main/post_minimal_partial.html" %} {% include "main/post_minimal_partial.html" %}
</div> </div>
<hr class="is-hidden"> <hr class="is-hidden">
{% endif %} {% endif %}
<h1 class="title">Your {{ timeline_name }} timeline</h1> <h1 class="title">Your {{ timeline_name }} 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 %} <hr class="is-hidden">
</div> {% endfor %}
<hr class="is-hidden">
{% endfor %}
{% block pagination %} {% block pagination %}
<nav class="pagination is-centered" role="navigation" aria-label="pagination"> <nav class="pagination is-centered" role="navigation" aria-label="pagination">
{% if prev %} {% if prev %}
<a class="pagination-next" href="{% url 'home_prev' prev.since_id %}">Newer</a> <a class="pagination-next" href="{% url 'home_prev' prev.since_id %}">Newer</a>
{% endif %} {% endif %}
{% if next %} {% if next %}
<a class="pagination-previous" href="{% url 'home_next' next.max_id %}">Older</a> <a class="pagination-previous" href="{% url 'home_next' next.max_id %}">Older</a>
{% endif %} {% endif %}
</nav> </nav>
{% endblock %} {% endblock %}
{% endblock %} {% endblock %}

View File

@ -20,42 +20,41 @@
{% endif %} {% endif %}
</figure> </figure>
<div class="media-content"> <div class="media-content">
<div class="content"> <p>
<p> <strong>{{ toot.account.display_name }}</strong>
<strong>{{ toot.account.display_name }}</strong> <small><a href="{% url "user" toot.account.acct %}">@{{ toot.account.acct }}</a></small>
<small><a href="{% url "user" toot.account.acct %}">@{{ toot.account.acct }}</a></small> <a href="{{ toot.url }}">
<a href="{{ toot.url }}"> <small>{{ toot.created_at |naturaltime }}</small>
<small>{{ toot.created_at |naturaltime }}</small> </a>
</a> {% if reblog %}
{% if reblog %} <br>
<br> Boosted by @{{ reblog_by }}
Boosted by @{{ reblog_by }} {% endif %}
{% endif %} </p>
</p> {% if toot.spoiler_text %}
{% if toot.spoiler_text %} <details class="toot">
<details> <summary><strong>{{ toot.spoiler_text }} </strong></summary>
<summary><strong>{{ toot.spoiler_text }} </strong></summary> <div class="toot">
<div class="toot"> {{ toot.content | relink_toot | strip_html | safe }}
{{ toot.content | relink_toot | strip_html | safe }} </div>
</div> </details>
</details> {% else %}
{% else %}
<div class="toot"> <div class="toot">
{{ toot.content | relink_toot | strip_html | safe }} {{ toot.content | relink_toot | strip_html | safe }}
</div> </div>
{% endif %} {% endif %}
{% if toot.media_attachments %} {% if toot.media_attachments %}
<br> <br>
<div class="level"> <div class="level">
<div class="level-left"> <div class="level-left">
{% for media in toot.media_attachments %} {% for media in toot.media_attachments %}
<a class="level-item" href="{{ media.url }}"> <a class="level-item" href="{{ media.url }}">
{% if toot.sensitive %} {% if toot.sensitive %}
<img src="{% static "images/sensitive.png" %}" <img src="{% static "images/sensitive.png" %}"
{% else %} {% else %}
<img src="{{ media.preview_url }}" <img src="{{ media.preview_url }}"
{% endif %} {% endif %}
alt="{% if media.description %} alt="{% if media.description %}
{{ media.description }} {{ media.description }}
{% elif media.text_url %} {% elif media.text_url %}
@ -67,42 +66,36 @@
title="{{ media.description }}" title="{{ media.description }}"
{% endif %} {% endif %}
class="image is-128x128"> class="image is-128x128">
</a> </a>
{% endfor %} {% endfor %}
</div>
</div> </div>
{% endif %} </div>
<br> {% endif %}
</div> <br>
<p class="is-hidden"></p> <p class="is-hidden"></p>
{% if not confirm_page %} {% if not confirm_page %}
<nav class="level is-mobile"> <nav class="level is-mobile">
<div class="level-left"> <div class="level-left">
<div class="level-item"> <a href="{% url "reply" toot.id %}" class="level-item">
<a href="{% url "reply" toot.id %}">
<span class="icon is-small"><i class="fa fa-reply"> <span class="icon is-small"><i class="fa fa-reply">
<span class="is-invisible">Reply</span> <span class="is-invisible">Reply</span>
</i></span> </i></span>
</a> </a>
</div> {% if toot.visibility != 'private' and toot.visibility != 'direct' %}
{% if toot.visibility != 'private' and toot.visibility != 'direct' %} <a href="{% url "boost" toot.id %}" class="level-item">
<div class="level-item"> <span class="icon is-small">
<a href="{% url "boost" toot.id %}"> {% if toot.reblogged %}
<span class="icon is-small"> <i class="fa fa-retweet has-text-warning">
{% if toot.reblogged %} {% else %}
<i class="fa fa-retweet has-text-warning"> <i class="fa fa-retweet" >
{% else %} {% endif %}
<i class="fa fa-retweet" > <span class="is-invisible" >Boost</span>
{% endif %} </i>
<span class="is-invisible" >Boost</span> </span>
</i> </a>
</span> {% endif %}
</a> <a href="{% url "fav" toot.id %}" class="level-item">
</div>
{% endif %}
<div class="level-item">
<a href="{% url "fav" toot.id %}">
<span class="icon is-small"> <span class="icon is-small">
{% if toot.favourited %} {% if toot.favourited %}
<i class="fa fa-heart has-text-warning"> <i class="fa fa-heart has-text-warning">
@ -114,23 +107,20 @@
</span> </span>
</a> </a>
</div> </div>
</div> <div class="level-right">
<div class="level-right"> {% if toot.account.acct == own_username %}
{% if toot.account.acct == own_username %} <a class="level-item" href="{% url "delete" toot.id %}">
<a class="level-item" href="{% url "delete" toot.id %}"> delete
delete </a>
{% endif %}
<span class="level-item">
{{ toot.visibility }}
</span>
<a class="level-item" href="{% url "thread" toot.id %}">
thread
</a> </a>
{% endif %} </div>
<span class="level-item"> </nav>
{{ toot.visibility }}
</span>
<a class="level-item" href="{% url "thread" toot.id %}">
thread
</a>
</div>
</nav>
{% endif %} {% endif %}
</div> </div>
<div class="media-right">
</div>
</article> </article>

View File

@ -16,10 +16,8 @@
<div class="card-header"> <div class="card-header">
{% endif %} {% endif %}
<div class="card-header-title title"> <div class="card-header-title title">
{{ user.display_name }}
<a href="{{ user.url }}"> <a href="{{ user.url }}">
(@{{ user.acct }}) {{ user.display_name }}
</a> </a>
</div> </div>
<figure class="image is-96x96 card-header-icon"> <figure class="image is-96x96 card-header-icon">

View File

@ -44,3 +44,15 @@ def relink_mentions(value):
@register.filter @register.filter
def relink_toot(value): def relink_toot(value):
return relink_tags(relink_mentions(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