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,5 +1,6 @@
 {% extends "base.html" %}
 {% load humanize %}
+{% load taglinks %}
 
 {% block title %}
 Brutaldon - {{ timeline }} timelime
@@ -23,51 +24,37 @@
 <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>)
+    (<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>
     {{ 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>)
+    </span>)
 </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" >
+<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">
+    </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' %}
-            <div class="box" >
 <article class="media">
     <figure class="media-left">
         <p class="image is-64x64">
@@ -77,7 +64,7 @@
     <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>
@@ -85,7 +72,6 @@
         </div>
     </div>
 </article>
-            </div>
 <hr class="is-hidden">
 {% endif %}
 {% endfor %}

brutaldon/templates/main/timeline.html

@@ -15,13 +15,11 @@
 {% 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 %}
 

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