From 69a678a5ce0d6c6c647d0e07d35227740c6b0527 Mon Sep 17 00:00:00 2001
From: Jason McBrayer <jmcbray@carcosa.net>
Date: Wed, 23 May 2018 08:27:45 -0400
Subject: [PATCH] Fix a bunch of mobile formatting issues

---
 brutaldon/static/css/brutaldon.css          |  12 ++
 brutaldon/templates/main/notifications.html | 146 +++++++++-----------
 brutaldon/templates/main/timeline.html      |  52 ++++---
 brutaldon/templates/main/toot_partial.html  | 142 +++++++++----------
 brutaldon/templates/main/user.html          |   4 +-
 brutaldon/templatetags/taglinks.py          |  12 ++
 6 files changed, 182 insertions(+), 186 deletions(-)

diff --git a/brutaldon/static/css/brutaldon.css b/brutaldon/static/css/brutaldon.css
index dcb7dc2..3084b0e 100644
--- a/brutaldon/static/css/brutaldon.css
+++ b/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;
+}
diff --git a/brutaldon/templates/main/notifications.html b/brutaldon/templates/main/notifications.html
index 51a5a63..568acbd 100644
--- a/brutaldon/templates/main/notifications.html
+++ b/brutaldon/templates/main/notifications.html
@@ -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 %}
diff --git a/brutaldon/templates/main/timeline.html b/brutaldon/templates/main/timeline.html
index 0479bfc..498d533 100644
--- a/brutaldon/templates/main/timeline.html
+++ b/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">
-        {% 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 %}
diff --git a/brutaldon/templates/main/toot_partial.html b/brutaldon/templates/main/toot_partial.html
index 427e7a9..ac4bc51 100644
--- a/brutaldon/templates/main/toot_partial.html
+++ b/brutaldon/templates/main/toot_partial.html
@@ -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>
diff --git a/brutaldon/templates/main/user.html b/brutaldon/templates/main/user.html
index 2699275..51de3af 100644
--- a/brutaldon/templates/main/user.html
+++ b/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">
diff --git a/brutaldon/templatetags/taglinks.py b/brutaldon/templatetags/taglinks.py
index 216ad87..b495868 100644
--- a/brutaldon/templatetags/taglinks.py
+++ b/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