From beca3db5d1863036fdd65a3cc9f9084f50e4cf2a Mon Sep 17 00:00:00 2001
From: Thomas Sileo <t@a4.io>
Date: Sat, 9 Jul 2022 08:15:33 +0200
Subject: [PATCH] Tweak design/CSS

---
 app/main.py                      |   2 +-
 app/scss/main.scss               |  62 +++++++--
 app/templates/admin_new.html     |   4 +-
 app/templates/layout.html        |   2 +-
 app/templates/lookup.html        |   3 +
 app/templates/notifications.html |  20 +--
 app/templates/object.html        |   2 +-
 app/templates/utils.html         | 226 +++++++++++++++++++++++++++----
 8 files changed, 267 insertions(+), 54 deletions(-)

diff --git a/app/main.py b/app/main.py
index bf4f79b..6a6b597 100644
--- a/app/main.py
+++ b/app/main.py
@@ -64,7 +64,7 @@ _RESIZED_CACHE: MutableMapping[tuple[str, int], tuple[bytes, str, Any]] = LFUCac
 # TODO(ts):
 #
 # Next:
-# - [ ] show [reply to @truc] next to visiblity
+# - FT5 text search
 # - support update post with history
 #
 # - [ ] block support
diff --git a/app/scss/main.scss b/app/scss/main.scss
index 0f4e627..05fb820 100644
--- a/app/scss/main.scss
+++ b/app/scss/main.scss
@@ -1,5 +1,6 @@
 $font-stack: Helvetica, sans-serif;
 $background: #002B36;  // solarized background color    
+$light-background: #003d4d; //#e6e6e6;
 // font-family: Inconsolata, monospace;
 $text-color: #ccc;
 $primary-color: #e14eea;
@@ -11,7 +12,12 @@ $muted-color: #586e75; // solarized comment text
 // #93a1a1; solarized body text
 
 // Load custom theme
-@import "vars.scss";
+// @import "vars.scss";
+
+
+.light-background {
+    background: $light-background;
+}
 
 
 body {
@@ -35,6 +41,9 @@ strong {
 color: $primary-color;
 }
 }
+.box {
+    padding: 0 20px;
+}
 
 .codehilite {
     margin: 50px 0;
@@ -71,6 +80,7 @@ code, pre {
     }
 }
 header {
+  padding: 0 20px;
   .title {
     font-size: 1.3em;
     text-decoration: none;
@@ -94,7 +104,7 @@ a {
 }
 main {
     width: 100%;
-    max-width: 960px;
+    max-width: 1000px;
     margin: 30px auto;
 }
 footer {
@@ -106,7 +116,7 @@ footer {
 .actor-box {
   display: flex;
   column-gap: 20px;
-  margin:20px 0 10px 0;
+  margin:10px 0;
   .icon-box {
     flex: 0 0 50px;
   }
@@ -116,7 +126,6 @@ footer {
     color: $muted-color;
   }
   .actor-icon {
-    margin-top: 5px;
     max-width: 50px;
   }
 }
@@ -174,17 +183,41 @@ nav.flexbox {
     }
 }
 
-.activity-expanded {
-  .activity-attachment {
-img, audio, video {
-      width: 100%;
-      max-width: 740px;
-      margin: 30px 0;
+.ap-object {
+    margin: 15px 0;
+    padding: 20px;
+    .in-reply-to {
+        color: $muted-color;
+        &:hover {
+            color: $secondary-color;
+        }
+    }
+    nav {
+        color: $muted-color;
+    } 
+    nav a {
+        color: $muted-color;
+        &:hover {
+            color: $secondary-color;
+        }
+    }
+    nav a.p {
+        color: $text-color;
+        &:hover {
+            color: $secondary-color;
+        }
+    }
+    .activity-attachment {
+        img, audio, video {
+            width: 100%;
+            max-width: 740px;
+            margin: 30px 0;
+        }
     }
-
-  }
 }
-
+.ap-object-expanded {
+    border: 2px dashed $secondary-color;
+}
 
 .activity-wrap {
   margin: 0 auto;
@@ -244,7 +277,8 @@ img, audio, video {
 }
 .actor-action {
   margin-top:20px;
-  margin-bottom:-10px;
+  margin-bottom:-20px;
+  padding: 0 20px;
   span {
     color: $muted-color;
   }
diff --git a/app/templates/admin_new.html b/app/templates/admin_new.html
index 529e1aa..a3bded1 100644
--- a/app/templates/admin_new.html
+++ b/app/templates/admin_new.html
@@ -3,10 +3,11 @@
 {% block content %}
 
 {% if in_reply_to_object %}
-<p>In reply to:</p>
+<div class="actor-action">In reply to:</div>
 {{ utils.display_object(in_reply_to_object) }}
 {% endif %}
 
+<div class="box">
 <form class="form" action="{{ request.url_for("admin_actions_new") }}" enctype="multipart/form-data" method="POST">
     {{ utils.embed_csrf_token() }}
     {{ utils.embed_redirect_url() }}
@@ -39,6 +40,7 @@
         <input type="submit" value="Publish">
     </p>
 </form>
+</div>
 <script>
 // The new post textarea
 var ta = document.getElementsByTagName("textarea")[0];
diff --git a/app/templates/layout.html b/app/templates/layout.html
index 09cb128..fe91722 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -22,7 +22,7 @@
 {% set url_for = request.app.router.url_path_for(url) %}
 <a href="{{ url_for }}" {% if request.url.path == url_for %}class="active"{% endif %}>{{ text }}</a>
 {% endmacro %}
-<div style="margin-bottom:30px;">
+<div style="margin-bottom:30px;padding: 0 20px;">
 <nav class="flexbox">
     <ul>
         <li>Admin</li>
diff --git a/app/templates/lookup.html b/app/templates/lookup.html
index ec2d4f5..0c7b940 100644
--- a/app/templates/lookup.html
+++ b/app/templates/lookup.html
@@ -2,12 +2,15 @@
 {% extends "layout.html" %}
 {% block content %}
 
+    <div class="box">
     <p>Interact with an ActivityPub object via its URL or look for a user using <i>@user@domain.tld</i></p>
 
     <form class="form" action="{{ url_for("get_lookup") }}" method="GET">
         <input type="text" name="query" value="{{ query if query else "" }}" autofocus>
         <input type="submit" value="Lookup">
     </form>
+    </div>
+
     {% if ap_object and ap_object.ap_type == "Person" %}
     {{ utils.display_actor(ap_object, actors_metadata) }}
     {% elif ap_object %}
diff --git a/app/templates/notifications.html b/app/templates/notifications.html
index 76b4e5c..7857a30 100644
--- a/app/templates/notifications.html
+++ b/app/templates/notifications.html
@@ -1,48 +1,52 @@
 {%- import "utils.html" as utils with context -%}
 {% extends "layout.html" %}
 {% block content %}
+    <div class="box">
     <h2>Notifications</h2>
+    </div>
     <div id="notifications">
     {%- for notif in notifications %}
     <div>
             {%- if notif.notification_type.value == "new_follower" %}
-                <div title="{{ notif.created_at.isoformat() }}">
+                <div class="actor-action" title="{{ notif.created_at.isoformat() }}">
                     <a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> followed you
                 </div>
                 {{ utils.display_actor(notif.actor, actors_metadata) }}
             {% elif notif.notification_type.value == "unfollow" %}
-                <div title="{{ notif.created_at.isoformat() }}">
+                <div class="actor-action" title="{{ notif.created_at.isoformat() }}">
                     <a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> unfollowed you
                 </div>
                 {{ utils.display_actor(notif.actor, actors_metadata) }}
             {% elif notif.notification_type.value == "like" %}
-                <div title="{{ notif.created_at.isoformat() }}">
+                <di vclass="actor-action" title="{{ notif.created_at.isoformat() }}">
                     <a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> liked a post
                 </div>
                 {{ utils.display_object(notif.outbox_object) }}
            {% elif notif.notification_type.value == "undo_like" %}
-                <div title="{{ notif.created_at.isoformat() }}">
+                <div class="actor-action" title="{{ notif.created_at.isoformat() }}">
                     <a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> un-liked a post
                 </div>
                 {{ utils.display_object(notif.outbox_object) }}
             {% elif notif.notification_type.value == "announce" %}
-                <div title="{{ notif.created_at.isoformat() }}">
+                <div class="actor-action" title="{{ notif.created_at.isoformat() }}">
                     <a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> boosted a post
                 </div>
                 {{ utils.display_object(notif.outbox_object) }}
            {% elif notif.notification_type.value == "undo_announce" %}
-                <div title="{{ notif.created_at.isoformat() }}">
+                <div class="actor-action" title="{{ notif.created_at.isoformat() }}">
                     <a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> un-boosted a post
                 </div>
                 {{ utils.display_object(notif.outbox_object) }}
             {% elif notif.notification_type.value == "mention" %}
-                <div title="{{ notif.created_at.isoformat() }}">
+                <div class="actor-action" title="{{ notif.created_at.isoformat() }}">
                     <a style="font-weight:bold;" href="{{ notif.actor.url }}">{{ notif.actor.display_name }}</a> mentioned you
                 </div>
                 {{ utils.display_object(notif.inbox_object) }}
  
             {% else %}
-            Implement {{ notif.notification_type }}
+            <div class="actor-action">
+                Implement {{ notif.notification_type }}
+            </div>
             {%- endif %}
     </div>
     {%- endfor %}
diff --git a/app/templates/object.html b/app/templates/object.html
index 9b0e59d..9f902f0 100644
--- a/app/templates/object.html
+++ b/app/templates/object.html
@@ -21,7 +21,7 @@
 {% macro display_replies_tree(replies_tree_node) %}
 
 {% if replies_tree_node.is_requested %}
-    {{ utils.display_object_expanded(replies_tree_node.ap_object, likes=likes, shares=shares) }}
+    {{ utils.display_object(replies_tree_node.ap_object, likes=likes, shares=shares, expanded=True) }}
 {% else %}
     {{ utils.display_object(replies_tree_node.ap_object) }}
 {% endif %}
diff --git a/app/templates/utils.html b/app/templates/utils.html
index d42d051..e08676d 100644
--- a/app/templates/utils.html
+++ b/app/templates/utils.html
@@ -130,7 +130,7 @@
 {% endmacro %}
 
 {% macro display_box_filters(route) %}
-<nav class="flexbox">
+<nav class="flexbox box">
 <ul>
     <li>Filter by</li>
 {% for ap_type in ["Note", "Like", "Announce", "Follow"] %}
@@ -144,11 +144,17 @@
         <a href="{{ url_for(route) }}">Reset filter</a>
     </li>
 {% endif %}
+</ul>
 </nav>
 {% endmacro %}
 
-{% macro display_actor(actor, actors_metadata) %}
+{% macro display_actor(actor, actors_metadata={}, embedded=False) %}
 {% set metadata = actors_metadata.get(actor.ap_id) %}
+
+{% if not embedded %}
+<div class="ap-object">
+{% endif %}
+
 <div class="actor-box h-card p-author">
     <div class="icon-box">
         <img src="{{ actor.resized_icon_url }}" class="actor-icon">
@@ -161,7 +167,7 @@
 {% if is_admin and metadata %}
 <div>
     <nav class="flexbox actor-metadata">
-    <ul>
+        <ul>
             {% if metadata.is_following %}
                 <li>already following</li>
                 <li>{{ admin_undo_button(metadata.outbox_follow_ap_id, "unfollow")}}</li>
@@ -174,15 +180,19 @@
             {% if metadata.is_follower %}
                 <li>follows you</li>
                 {% if not metadata.is_following %}
-                <li>{{ admin_profile_button(actor.ap_id) }}</li>
+                    <li>{{ admin_profile_button(actor.ap_id) }}</li>
                 {% endif %}
+                </li>
             {% endif %}
-        </li>
-    </ul>
+        </ul>
     </nav>
 </div>
 {% endif %}
 
+{% if not embedded %}
+</div>
+{% endif %}
+
 {% endmacro %}
 
 {% macro display_og_meta(object) %}
@@ -191,7 +201,7 @@
 <div class="activity-og-meta" style="display:flex;column-gap: 20px;margin:20px 0;">
     {% if og_meta.image %}
     <div>
-    <img src="{{ og_meta.image | media_proxy_url }}" style="max-width:200px;">
+    <img src="{{ og_meta.image | media_proxy_url }}" style="max-width:200px;max-height:100px;">
     </div>
     <div>
     <a href="{{ og_meta.url }}">{{ og_meta.title }}</a>
@@ -275,37 +285,197 @@
 {% if likes or shares %}
 <div style="display: flex;column-gap: 20px;margin:20px 0;">
     {% if likes %}
-    <div style="flex: 0 1 50%;max-width: 50%;">Likes
-    <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
-{% for like in likes %}
-<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ like.actor.ap_id }}{% else %}{{ like.actor.url }}{% endif %}" title="{{ like.actor.handle }}" style="height:50px;" rel="noreferrer">
-    <img src="{{ like.actor.resized_icon_url }}" alt="{{ like.actor.handle}}" style="max-width:50px;">
-    </a>
-{% endfor %}
-
-
-    </div>
-    </div>
+        <div style="flex: 0 1 50%;max-width: 50%;">Likes
+            <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
+            {% for like in likes %}
+                <a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ like.actor.ap_id }}{% else %}{{ like.actor.url }}{% endif %}" title="{{ like.actor.handle }}" style="height:50px;" rel="noreferrer">
+                    <img src="{{ like.actor.resized_icon_url }}" alt="{{ like.actor.handle}}" style="max-width:50px;">
+                </a>
+            {% endfor %}
+            </div>
+        </div>
     {% endif %}
 
     {% if shares %}
-    <div style="flex: 0 1 50%;max-width: 50%;">Shares
-    <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
-{% for share in shares %}
-<a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ share.actor.ap_id }}{% else %}{{ share.actor.url }}{% endif %}" title="{{ share.actor.handle }}" style="height:50px;" rel="noreferrer">
-    <img src="{{ share.actor.resized_icon_url }}" alt="{{ share.actor.handle}}" style="max-width:50px;">
-    </a>
-{% endfor %}
-    </div>
-    </div>
+        <div style="flex: 0 1 50%;max-width: 50%;">Shares
+            <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
+            {% for share in shares %}
+                <a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ share.actor.ap_id }}{% else %}{{ share.actor.url }}{% endif %}" title="{{ share.actor.handle }}" style="height:50px;" rel="noreferrer">
+                    <img src="{{ share.actor.resized_icon_url }}" alt="{{ share.actor.handle}}" style="max-width:50px;">
+                </a>
+            {% endfor %}
+            </div>
+        </div>
     {% endif %}
+</div>
 {% endif %}
 
 </div>
 
 {% endmacro %}
 
-{% macro display_object(object) %}
+
+{% macro display_object(object, likes=[], shares=[], expanded=False) %}
+{% if object.ap_type in ["Note", "Article", "Video"] %}
+<div class="ap-object {% if expanded %}ap-object-expanded {% endif %}h-entry" id="{{ object.permalink_id }}">
+    {{ display_actor(object.actor, {}, embedded=True) }}
+
+    {% if object.in_reply_to %}
+        <a href="{% if is_admin %}{{ url_for("get_lookup") }}?query={% endif %}{{ object.in_reply_to }}" title="{{ object.in_reply_to }}" class="in-reply-to" rel="nofollow">
+            in reply to {{ object.in_reply_to|truncate(64, True) }}
+        </a>
+    {% endif %}
+
+
+    {% if object.summary %}
+        <p class="p-summary">{{ object.summary | clean_html(object) | safe }}</p>
+    {% endif %}
+
+    {% if object.sensitive and object.summary and not request.query_params.show_more == object.permalink_id %}
+        {{ show_more_button(object.permalink_id) }} 
+    {% endif %}
+
+    {% if not object.sensitive or (object.sensitive and object.summary and request.query_params.show_more == object.permalink_id) %}
+        <div class="e-content">
+            {{ object.content | clean_html(object) | safe }}
+        </div>
+    {% endif %}
+
+    {{ display_og_meta(object) }}
+
+    <div class="activity-attachment">
+    {{ display_attachments(object) }}
+    </div>
+
+    <nav class="flexbox activity-bar">
+    <ul>
+        <li>
+            <a href="{{ object.url }}" class="u-url u-uid" title="{{ object.ap_published_at.isoformat() }}">
+                <time class="dt-published" datetime="{{ object.ap_published_at }}">{{ object.ap_published_at | timeago }}</time>
+            </a>
+        </li>
+        {% if is_admin %}
+            <li>
+                {{ object.visibility.value }}
+            </li>
+        {% endif %}
+        <li>
+            <div><a href="{{ object.url }}"{% if object.is_from_inbox %} rel="nofollow"{% endif %}>permalink</a></div>
+        </li>
+
+        {% if object.is_from_outbox %}
+            {% if object.likes_count %}
+            <li>
+                <a href="{{ object.url }}"><strong>{{ object.likes_count }}</strong> like{{ object.likes_count | pluralize }}</a>
+            </li>
+            {% endif %}
+
+            {% if object.announces_count %}
+            <li>
+                <a href="{{ object.url }}"><strong>{{ object.announces_count }}</strong> share{{ object.announces_count | pluralize }}</a>
+            </li>
+            {% endif %}
+        {% endif %}
+
+        {% if (object.is_from_outbox or is_admin) and object.replies_count %}
+        <li>
+            <a href="{{ object.url }}"><strong>{{ object.replies_count }}</strong> repl{{ object.replies_count | pluralize("y", "ies") }}</a>
+        </li>
+        {% endif %}
+
+    </ul>
+    </nav>
+
+    {% if is_admin %}
+    <nav class="flexbox activity-bar">
+    <ul>
+        {% if object.is_from_outbox %}
+            <li>
+                {{ admin_delete_button(object.ap_id) }}
+            </li>
+
+            <li>
+                {% if object.is_pinned %}
+                    {{ admin_unpin_button(object.ap_id) }}
+                {% else %}
+                    {{ admin_pin_button(object.ap_id) }}
+                {% endif %}
+            </li>
+        {% endif %}
+
+        <li>
+            {{ admin_reply_button(object.ap_id) }}
+        </li>
+
+        <li>
+            {% if object.liked_via_outbox_object_ap_id %}
+                {{ admin_undo_button(object.liked_via_outbox_object_ap_id, "unlike") }}
+            {% else %}
+                {{ admin_like_button(object.ap_id) }}
+            {% endif %}
+        </li>
+
+        <li>
+            {% if object.is_bookmarked %}
+                {{ admin_unbookmark_button(object.ap_id) }}
+            {% else %}
+                {{ admin_bookmark_button(object.ap_id) }}
+            {% endif %}
+        </li>
+
+        <li>
+            {% if object.announced_via_outbox_object_ap_id %}
+                {{ admin_undo_button(object.liked_via_outbox_object_ap_id, "unshare") }}
+            {% else %}
+                {{ admin_announce_button(object.ap_id, disabled=object.visibility not in [visibility_enum.PUBLIC, visibility_enum.UNLISTED]) }}
+            {% endif %}
+        </li>
+
+        <li>
+            {{ admin_profile_button(object.actor.ap_id) }}
+        </li>
+        <li>
+            {{ admin_expand_button(object.ap_id) }}
+        </li>
+    </ul>
+    </nav>
+    {% endif %} 
+
+
+    {% if likes or shares %}
+    <div style="display: flex;column-gap: 20px;margin:20px 0;">
+        {% if likes %}
+            <div style="flex: 0 1 50%;max-width: 50%;">Likes
+                <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
+                {% for like in likes %}
+                    <a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ like.actor.ap_id }}{% else %}{{ like.actor.url }}{% endif %}" title="{{ like.actor.handle }}" style="height:50px;" rel="noreferrer">
+                        <img src="{{ like.actor.resized_icon_url }}" alt="{{ like.actor.handle}}" style="max-width:50px;">
+                    </a>
+                {% endfor %}
+                </div>
+            </div>
+        {% endif %}
+
+        {% if shares %}
+            <div style="flex: 0 1 50%;max-width: 50%;">Shares
+                <div style="display: flex;column-gap: 20px;row-gap:20px;flex-wrap: wrap;margin-top:20px;">
+                {% for share in shares %}
+                    <a href="{% if is_admin %}{{ url_for("admin_profile") }}?actor_id={{ share.actor.ap_id }}{% else %}{{ share.actor.url }}{% endif %}" title="{{ share.actor.handle }}" style="height:50px;" rel="noreferrer">
+                        <img src="{{ share.actor.resized_icon_url }}" alt="{{ share.actor.handle}}" style="max-width:50px;">
+                    </a>
+                {% endfor %}
+                </div>
+            </div>
+        {% endif %}
+    </div>
+    {% endif %}
+
+
+</div>
+{% endif %}
+{% endmacro %}
+
+{% macro display_object_bak(object) %}
 {% if object.ap_type in ["Note", "Article", "Video"] %}
 <div class="activity-wrap h-entry" id="{{ object.permalink_id }}">
   <div class="activity-content">