Fix a bunch of mobile formatting issues

brutaldon/static/css/brutaldon.css

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

brutaldon/templates/main/notifications.html

@@ -1,74 +1,61 @@
 {% 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>
+<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 }}">{{ note.account.acct }}</a>)
+    (<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 %}
-            </div>
-            <hr class="is-hidden">
-        {% elif note.type == 'reblog' %}
-            <div class="box">
-                <p>
+</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 }}">{{ note.account.acct }}</a>)
+    (<a href="{{ note.account.url | localuser }}">{{ note.account.acct }}</a>)
     boosted your toot.
-                    (<a href="{{ note.url }}">
+    (<span>
     <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" >
+    </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 }}">{{ note.account.acct }}</a>)
+    (<a href="{{ note.account.url | localuser}}">{{ note.account.acct }}</a>)
     favorited your toot.
-                            (<a href="{{ note.url }}">
+    (<span>
     <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">
+    </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="">
@@ -77,17 +64,16 @@
     <div class="media-content" >
         <div class="content">
             <strong>{{ note.account.display_name }}</strong>
-                            (<a href="{{ note.account.url }}">{{ note.account.acct }}</a>)
+            (<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>
-            </div>
-            <hr class="is-hidden">
-        {% endif %}
-    {% endfor %}
+</article>
+<hr class="is-hidden">
+{% endif %}
+{% endfor %}
 
 {% endblock %}

brutaldon/templates/main/timeline.html

@@ -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">
+<h1 class="title">Post</h1>
+<div class="box">
     {% include "main/post_minimal_partial.html" %}
-    </div>
-    <hr class="is-hidden">
+</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">
+{% 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 %}
+</nav>
+{% endblock %}
 {% endblock %}

brutaldon/templates/main/toot_partial.html

@@ -20,7 +20,6 @@
         {% 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>
@@ -33,7 +32,7 @@
             {% endif %}
         </p>
         {% if toot.spoiler_text %}
-                <details>
+            <details class="toot">
                 <summary><strong>{{ toot.spoiler_text }} </strong></summary>
                 <div class="toot">
                     {{ toot.content | relink_toot | strip_html | safe }}
@@ -73,22 +72,18 @@
             </div>
         {% endif %}
         <br>
-        </div>
         <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 %}">
+                    <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 %}">
+                        <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">
@@ -99,10 +94,8 @@
                                         </i>
                             </span>
                         </a>
-                </div>
                     {% endif %}
-                <div class="level-item">
-                    <a href="{% url "fav" toot.id %}">
+                    <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,7 +107,6 @@
                         </span>
                     </a>
                 </div>
-            </div>
                 <div class="level-right">
                     {% if toot.account.acct == own_username %}
                         <a class="level-item" href="{% url "delete" toot.id %}">
@@ -131,6 +123,4 @@
             </nav>
         {% endif %}
     </div>
-    <div class="media-right">
-    </div>
 </article>

brutaldon/templates/main/user.html

@@ -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">

brutaldon/templatetags/taglinks.py

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