From 73d968288a8a7d628bea12c261ea6c94f6a6f10e Mon Sep 17 00:00:00 2001
From: Aonrud <107251085+Aonrud@users.noreply.github.com>
Date: Mon, 13 Feb 2023 10:32:48 +0000
Subject: [PATCH] fix: stop overlap issue between actor and meta in ap-object
 display

This allows the username to be truncated with an ellipsis if the meta info list would overlap it.
---
 app/scss/ila.scss         | 49 ++++++++++++++--------------
 data/templates/utils.html | 67 +++++++++++++++++++++------------------
 2 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/app/scss/ila.scss b/app/scss/ila.scss
index 1d892b2..e2cd00b 100644
--- a/app/scss/ila.scss
+++ b/app/scss/ila.scss
@@ -19,6 +19,15 @@ $warning: #f0ad4e;
 $danger: #d9534f;
 
 
+.flex {
+	display: flex;
+}
+
+.flexcol {
+	@extend .flex;
+	flex-direction: column;
+}
+
 header.microblog {
 	background: top / cover no-repeat url('/static/header-3-2.jpeg');
 	margin: 0 0 15px;
@@ -77,27 +86,23 @@ header.microblog {
 		column-gap: 15px;
 		.icon-box {
 			flex: 0 0 50px;
-			border-top-left-radius: 4px;
 		}
 		.actor-icon {
 			max-width: 50px;
 		}
-		a.u-url {
-			font-size: 1.15em;
-			margin-top: 5px;
+		& > div {
 			flex: 1;
-			.actor-handle {
-				color: $muted-link;
-			}
-			&:hover, &:active {
-				text-decoration: none;
-				strong {
-					text-decoration: underline;
-				}
-				.actor-handle {
-					color: $muted-link-hover;
-				}
-			}
+			@extend .flexcol;
+		}
+		a.u-url {
+			flex: 1;
+			font-size: 1.15em;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		nav.flexbox ul {
+			padding: 0;
 		}
 	}
 	p {
@@ -106,6 +111,10 @@ header.microblog {
 	}
 }
 
+.actor-handle {
+	color: $muted-link;
+}
+
 .ap-object-expanded {
 	margin-left: -65px;
 	padding-left: 15px;
@@ -135,14 +144,6 @@ header.microblog {
 		max-width: 25px;
 	}
 
-.corner-meta {
-	position: absolute;
-	display: block;
-	top: 0;
-	right: 0;
-	color: $muted-text;
-}
-
 @mixin meta-link {
 	color: $muted-link;
 	text-decoration: none;
diff --git a/data/templates/utils.html b/data/templates/utils.html
index 05fc7bf..89f21d5 100644
--- a/data/templates/utils.html
+++ b/data/templates/utils.html
@@ -226,8 +226,6 @@
 {% endblock %}
 {% endmacro %}
 
-
-
 {% macro admin_profile_button(ap_actor_id) %}
 {% block admin_profile_button scoped %}
 <form action="{{ url_for("admin_profile") }}"  method="GET">
@@ -540,38 +538,45 @@
 {% set is_article_mode = object.is_from_outbox and object.ap_type == "Article" and is_object_page %}
 {% if object.ap_type in ["Note", "Article", "Video", "Page", "Question", "Event"] %}
 <div class="ap-object {% if expanded %}ap-object-expanded {% endif %}{% if is_h_entry %}h-entry{% endif %}{% if object.is_pinned %} pinned{% endif %}" id="{{ object.permalink_id }}">
-    <div class="corner-meta">
-        <nav class="flexbox">
-            <ul>
-                <li>
-                    <div><a href="{{ object.url }}"{% if object.is_from_inbox %} rel="nofollow"{% endif %} class="object-permalink u-url u-uid"><span class="fas fa-link"></span> permalink</a></div>
-                </li>
-                {% if not is_article_mode %}
-                    <li>
-                        <span class="fas fa-clock"></span>
-                        <time class="dt-published" datetime="{{ object.ap_published_at.replace(microsecond=0).isoformat() }}" title="{{ object.ap_published_at.replace(microsecond=0).isoformat() }}">{{ object.ap_published_at | timeago }}</time>
-                    </li>
-                {% endif %}
-                {% if is_admin %}
-                    <li>
-                        {{ object.visibility.value }}
-                    </li>
-                {% endif %}
-                {% if object.is_pinned %}
-                    <li title="Pinned Post"><i class="fas fa-thumbtack"></i></li>
-                {% endif %}
-            </ul>
-        </nav>
+    <div class="actor-box h-card p-author">
+        <div class="icon-box">
+            <img src="{{ object.actor.resized_icon_url }}" alt="{{ object.actor.display_name }}'s avatar" class="actor-icon u-photo">
+        </div>
+        <div>
+            <div class="flex">
+                <a href="{{ object.actor.url }}" class="u-url"><strong>{{ object.actor.display_name | clean_html(object.actor) | safe  }}</strong></a>
+                <nav class="flexbox">
+                    <ul>
+                        <li>
+                            <div><a href="{{ object.url }}"{% if object.is_from_inbox %} rel="nofollow"{% endif %} class="object-permalink u-url u-uid"><span class="fas fa-link"></span> permalink</a></div>
+                        </li>
+                        {% if not is_article_mode %}
+                            <li>
+                                <span class="fas fa-clock"></span>
+                                <time class="dt-published" datetime="{{ object.ap_published_at.replace(microsecond=0).isoformat() }}" title="{{ object.ap_published_at.replace(microsecond=0).isoformat() }}">{{ object.ap_published_at | timeago }}</time>
+                            </li>
+                        {% endif %}
+                        {% if is_admin %}
+                            <li>
+                                {{ object.visibility.value }}
+                            </li>
+                        {% endif %}
+                        {% if object.is_pinned %}
+                            <li title="Pinned Post"><i class="fas fa-thumbtack"></i></li>
+                        {% endif %}
+                    </ul>
+                </nav>
+            </div>
+            <div class="actor-handle p-name">{{ object.actor.handle }}</div>
+        </div>
     </div>
 
     {% if is_article_mode %}
-    <data class="h-card">
-        <data class="u-photo" value="{{ local_actor.icon_url }}"></data>
-        <data class="u-url" value="{{ local_actor.url}}"></data>
-        <data class="p-name" value="{{ local_actor.handle }}"></data>
-    </data>
-    {% else %}
-    {{ display_actor(object.actor, actors_metadata, embedded=True) }}
+        <data class="h-card">
+            <data class="u-photo" value="{{ local_actor.icon_url }}"></data>
+            <data class="u-url" value="{{ local_actor.url}}"></data>
+            <data class="p-name" value="{{ local_actor.handle }}"></data>
+        </data>
     {% endif %}
 
     {% if object.ap_type in ["Article", "Event"] %}