From 5f34c2aee618705cf3fa0ad9d81e3213d6d89d80 Mon Sep 17 00:00:00 2001
From: Thomas Sileo <t@a4.io>
Date: Mon, 4 Jul 2022 19:02:30 +0200
Subject: [PATCH] Tweak templates

---
 app/templates/layout.html |  2 +-
 app/templates/login.html  |  4 +--
 app/templates/lookup.html |  2 +-
 app/templates/utils.html  | 52 ++++++++++++++++++++++++++-------------
 4 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/app/templates/layout.html b/app/templates/layout.html
index 9d5efc8..8fcc18f 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -44,7 +44,7 @@
 </div>
 
 <footer class="footer">
-	Powered by <a href="https://microblog.pub">microblog.pub</a> <small class="microblogpub-version"><code>{{ microblogpub_version }}</code></small> (<a href="https://github.com/tsileo/microblog.pub">source code</a>) and the <a href="https://activitypub.rocks/">ActivityPub</a> protocol
+	Powered by <a href="https://docs.microblog.pub">microblog.pub</a> <small class="microblogpub-version"><code>{{ microblogpub_version }}</code></small> and the <a href="https://activitypub.rocks/">ActivityPub</a> protocol
 </footer>
 </body>
 </html>
diff --git a/app/templates/login.html b/app/templates/login.html
index f0ea385..22381f3 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -5,8 +5,8 @@
 <div style="margin:auto;">
 <form class="form" action="/admin/login" method="POST">
 <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-<input type="password" placeholder="password" name="password">
-<input type="submit" value="Login">
+<input type="password" placeholder="password" name="password" autofocus>
+<input type="submit" value="login">
 </form>
 </div>
 </div>
diff --git a/app/templates/lookup.html b/app/templates/lookup.html
index 5e46518..ec2d4f5 100644
--- a/app/templates/lookup.html
+++ b/app/templates/lookup.html
@@ -5,7 +5,7 @@
     <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 "" }}">
+        <input type="text" name="query" value="{{ query if query else "" }}" autofocus>
         <input type="submit" value="Lookup">
     </form>
     {% if ap_object and ap_object.ap_type == "Person" %}
diff --git a/app/templates/utils.html b/app/templates/utils.html
index e8dee88..ebb0f51 100644
--- a/app/templates/utils.html
+++ b/app/templates/utils.html
@@ -240,15 +240,29 @@
 
 {{ display_og_meta(object) }}
 
-<a href="{{ object.url }}" class="u-url u-uid"><time class="dt-published" datetime="{{ object.ap_published_at }}">{{ object.ap_published_at | format_date }}</time></a>
-{{ object.visibility.value }}
-{% if object.is_from_outbox %}
-{{ object.likes_count }} likes
-{% endif %}
-
-{% if object.is_from_outbox %}
-{{ object.announces_count }} shares
-{% endif %}
+<nav class="flexbox">
+    <ul>
+        <li>
+            <a href="{{ object.url }}" class="u-url u-uid"><time class="dt-published" datetime="{{ object.ap_published_at }}">{{ object.ap_published_at | format_date }}</time></a>
+        </li>
+        {% if is_admin %}
+        <li>
+            {{ object.visibility.value }}
+        </li>
+        {% if object.is_from_outbox %}
+        <li>
+            <strong>{{ object.likes_count }}</strong> likes
+        </li>
+        <li> 
+            <strong>{{ object.announces_count }}</strong> shares
+        </li>
+        <li> 
+            <strong>{{ object.replies_count }}</strong> replies
+        </li>
+        {% endif %}
+        {% endif %}
+</ul>
+</nav>
 
 {{ display_attachments(object) }}
 
@@ -257,11 +271,11 @@
     <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="{{ like.actor.url }}" title="{{ like.actor.handle }}" style="height:50px;">
+<a href="{{ like.actor.url }}" 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 style="width:50px;text-align:center;">And 2223 more.</div>
+<div style="width:50px;text-align:center;">And {{ object.likes_count - 10 }} more.</div>
 
 
     </div>
@@ -270,7 +284,7 @@
     <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="{{ share.actor.url }}" title="{{ share.actor.handle }}" style="height:50px;">
+<a href="{{ share.actor.url }}" 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 %}
@@ -322,17 +336,21 @@
     <ul>
         {% if not is_admin or object.is_from_outbox %}<li><div><a href="{{ object.url }}"{% if object.is_from_inbox %} rel="nofollow"{% endif %}>permalink</a></div></li>{% endif %}
     {% if object.is_from_outbox %}
+    {% if object.likes_count %}
     <li>
-        <div class="comment-count">{{ object.likes_count }} like{{ object.likes_count | pluralize }}</div>
+        <a href="{{ object.url }}"><strong>{{ object.likes_count }}</strong> like{{ object.likes_count | pluralize }}</a>
     </li>
-    
+    {% endif %}
+    {% if object.announces_count %}
     <li>
-        <div class="retweet-count">{{ object.announces_count }} share{{ object.announces_count | pluralize }}</div>
+        <a href="{{ object.url }}"><strong>{{ object.announces_count }}</strong> share{{ object.announces_count | pluralize }}</a
     </li>
-
+    {% endif %}
+    {% if object.replies_count %}
     <li>
-        <div class="retweet-count">{{ object.replies_count }} repl{{ object.replies_count | pluralize("y", "ies") }}</div>
+        <a href="{{ object.url }}"><strong>{{ object.replies_count }}</strong> repl{{ object.replies_count | pluralize("y", "ies") }}</a>
     </li>
+    {% endif %}
 
     {% if is_admin %}
     <li>