From e7c09d6457ac874a61d0e2eba94de615e5c8bfc9 Mon Sep 17 00:00:00 2001
From: Andrew Godwin <andrew@aeracode.org>
Date: Thu, 22 Dec 2022 02:40:46 +0000
Subject: [PATCH] More UX tweaks

---
 static/css/style.css             | 66 ++++++++++++++++----------------
 templates/activities/_boost.html | 20 +++++-----
 templates/activities/_like.html  | 20 +++++-----
 templates/activities/_post.html  | 52 ++++++++++++-------------
 4 files changed, 77 insertions(+), 81 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 4045864..358ed09 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1002,7 +1002,7 @@ form .post {
 }
 
 .post .summary {
-    margin: 12px 0 4px 0;
+    margin: 12px 0 4px 64px;
     padding: 3px 6px;
     border-radius: 3px;
     background: var(--color-bg-menu);
@@ -1027,6 +1027,10 @@ form .post {
     color: var(--color-text-duller);
 }
 
+.post .content {
+    margin-left: 64px;
+}
+
 .post.mini .content,
 .post.mini .edited {
     margin-left: 0;
@@ -1058,33 +1062,29 @@ form .post {
 
 .post .actions {
     display: flex;
+    position: relative;
     justify-content: space-between;
     padding: 8px 0 0 0;
     align-items: center;
     align-content: center;
-    margin-bottom: -8px;
-}
-
-.post .post-action {
-    padding: 2px 4px;
-    border-radius: 4px;
-    min-width: 60px;
-    text-align: center;
-}
-
-.post .post-action:hover {
-    background-color: var(--color-bg-main);
+    margin: 0 0 -8px 64px;
 }
 
 .post .actions a {
+    padding: 2px 4px;
+    border-radius: 4px;
+    min-width: 60px;
     text-align: center;
     cursor: pointer;
     color: var(--color-text-dull);
 }
 
-.post .actions a.menu {
+.post .actions a:hover {
+    background-color: var(--color-bg-main);
 }
 
+.post .actions a.menu {}
+
 .post .actions menu {
     display: none;
     background-color: var(--color-bg-menu);
@@ -1092,8 +1092,8 @@ form .post {
     padding: 5px 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     position: absolute;
-    left: -130px;
-    top: -130px;
+    right: 0px;
+    bottom: 35px;
 }
 
 .post .actions menu.enabled {
@@ -1104,7 +1104,7 @@ form .post {
 .post .actions menu a {
     text-align: left;
     display: block;
-    width: 165px;
+    width: 185px;
     font-size: 15px;
 }
 
@@ -1113,10 +1113,6 @@ form .post {
     width: 16px;
 }
 
-.post .actions .dropdown {
-    position: relative;
-}
-
 .post .actions a:hover {
     color: var(--color-text-main);
 }
@@ -1177,7 +1173,7 @@ form .post {
 .mention-banner,
 .follow-banner,
 .like-banner {
-    padding: 3px 0 3px 10px;
+    padding: 0 0 3px 5px;
 }
 
 .boost-banner .emoji,
@@ -1298,7 +1294,7 @@ form .post {
 }
 
 
-@media (max-width: 700px) {
+@media (max-width: 750px) {
     header menu a.identity {
         width: 50px;
         padding: 10px 10px 0 0;
@@ -1339,19 +1335,25 @@ form .post {
         display: none;
     }
 
-    #main-content {
-        padding: 0;
-    }
-
-    #side-navigation,
-    header menu .identity {
-        border-left: 1px solid var(--color-input-border);
+    .left-column {
+        padding: 8px;
     }
 
     .post {
-        margin-bottom: 0;
-        border-bottom: 1px solid var(--color-input-border);
+        margin-bottom: 15px;
     }
+
+}
+
+
+@media (max-width: 550px) {
+
+    .post .content,
+    .post .summary,
+    .post .actions {
+        margin-left: 0;
+    }
+
 }
 
 /* Copy to clipboard action */
diff --git a/templates/activities/_boost.html b/templates/activities/_boost.html
index 9bf6e4f..008690b 100644
--- a/templates/activities/_boost.html
+++ b/templates/activities/_boost.html
@@ -1,11 +1,9 @@
-<span class="post-action">
-  {% if post.pk in interactions.boost %}
-      <a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
-          <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
-      </a>
-  {% else %}
-      <a title="Boost" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML">
-          <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
-      </a>
-  {% endif %}
-</span>
+{% if post.pk in interactions.boost %}
+    <a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
+        <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
+    </a>
+{% else %}
+    <a title="Boost" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML">
+        <i class="fa-solid fa-retweet"></i> {{ event.boost_count }}
+    </a>
+{% endif %}
diff --git a/templates/activities/_like.html b/templates/activities/_like.html
index 780c312..64118d2 100644
--- a/templates/activities/_like.html
+++ b/templates/activities/_like.html
@@ -1,11 +1,9 @@
-<span class="post-action">
-  {% if post.pk in interactions.like %}
-      <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
-          <i class="fa-solid fa-star"></i> {{ event.like_count }}
-      </a>
-  {% else %}
-      <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
-          <i class="fa-solid fa-star"></i> {{ event.like_count }}
-      </a>
-  {% endif %}
-</span>
+{% if post.pk in interactions.like %}
+    <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
+        <i class="fa-solid fa-star"></i> {{ event.like_count }}
+    </a>
+{% else %}
+    <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
+        <i class="fa-solid fa-star"></i> {{ event.like_count }}
+    </a>
+{% endif %}
diff --git a/templates/activities/_post.html b/templates/activities/_post.html
index c900904..63bdedf 100644
--- a/templates/activities/_post.html
+++ b/templates/activities/_post.html
@@ -62,36 +62,34 @@
         {% include "activities/_reply.html" %}
         {% include "activities/_like.html" %}
         {% include "activities/_boost.html" %}
-        <div class="dropdown">
-          <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
-            <i class="fa-solid fa-caret-down"></i>
+        <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
+          <i class="fa-solid fa-bars"></i>
+        </a>
+        <menu>
+          <a href="{{ post.urls.view }}" role="menuitem">
+            <i class="fa-solid fa-comment"></i> View Post &amp; Replies
           </a>
-          <menu>
-            <a href="{{ post.urls.view }}" role="menuitem">
-              <i class="fa-solid fa-comment"></i> View Post &amp; Replies
+          <a href="{{ post.urls.action_report }}" role="menuitem">
+            <i class="fa-solid fa-flag"></i> Report
+          </a>
+          {% if post.author == request.identity %}
+            <a href="{{ post.urls.action_edit }}" role="menuitem">
+              <i class="fa-solid fa-pen-to-square"></i> Edit
             </a>
-            <a href="{{ post.urls.action_report }}" role="menuitem">
-              <i class="fa-solid fa-flag"></i> Report
+            <a href="{{ post.urls.action_delete }}" role="menuitem">
+              <i class="fa-solid fa-trash"></i> Delete
             </a>
-            {% if post.author == request.identity %}
-              <a href="{{ post.urls.action_edit }}" role="menuitem">
-                <i class="fa-solid fa-pen-to-square"></i> Edit
-              </a>
-              <a href="{{ post.urls.action_delete }}" role="menuitem">
-                <i class="fa-solid fa-trash"></i> Delete
-              </a>
-            {% elif not post.local and post.url %}
-              <a href="{{ post.url }}" role="menuitem">
-                <i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
-              </a>
-            {% endif %}
-            {% if request.user.admin %}
-              <a href="{{ post.urls.admin_edit }}" role="menuitem">
-                <i class="fa-solid fa-gear"></i> View In Admin
-              </a>
-            {% endif %}
-          </menu>
-        </div>
+          {% elif not post.local and post.url %}
+            <a href="{{ post.url }}" role="menuitem">
+              <i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
+            </a>
+          {% endif %}
+          {% if request.user.admin %}
+            <a href="{{ post.urls.admin_edit }}" role="menuitem">
+              <i class="fa-solid fa-gear"></i> View In Admin
+            </a>
+          {% endif %}
+        </menu>
       </div>
     {% endif %}