Better reply UI on compose form

3 files changed, 40 insertions, 1 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 8660ae2..737d9bf 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -693,23 +693,41 @@ h1.identity small {
     overflow: hidden;
 }
 
+.post.mini {
+    font-size: 14px;
+}
+
 .left-column .post {
     background: var(--color-bg-box);
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
     padding: 10px;
 }
 
+.left-column form .post {
+    background-color: var(--color-bg-main);
+}
+
 .post .icon {
     height: 48px;
     width: auto;
     float: left;
 }
 
+.post.mini .icon {
+    height: 28px;
+    width: auto;
+    float: left;
+}
+
 .post .handle {
     display: block;
     padding: 7px 0 0 64px;
 }
 
+.post.mini .handle {
+    padding: 7px 0 0 36px;
+}
+
 .post time {
     display: block;
     float: right;
@@ -750,6 +768,10 @@ h1.identity small {
     margin-left: 64px;
 }
 
+.post.mini .content {
+    margin-left: 0px;
+}
+
 .post .content.hidden {
     display: none;
 }
diff --git a/templates/activities/_mini_post.html b/templates/activities/_mini_post.html
new file mode 100644
index 0000000..80ed213
--- /dev/null
+++ b/templates/activities/_mini_post.html
@@ -0,0 +1,16 @@
+{% load static %}
+{% load activity_tags %}
+<div class="post mini" data-takahe-id="{{ post.id }}">
+
+    <a href="{{ post.author.urls.view }}">
+        <img src="{{ post.author.local_icon_url }}" class="icon">
+    </a>
+
+    <a href="{{ post.author.urls.view }}" class="handle">
+        {{ post.author.name_or_handle }}
+    </a>
+
+    <div class="content">
+        {{ post.safe_content_local }}
+    </div>
+</div>
diff --git a/templates/activities/compose.html b/templates/activities/compose.html
index 9d02988..1a02227 100644
--- a/templates/activities/compose.html
+++ b/templates/activities/compose.html
@@ -8,7 +8,8 @@
         <fieldset>
             <legend>Content</legend>
             {% if reply_to %}
-                <p>Replying to <a href="{{ reply_to.urls.view }}">{{ reply_to }}</a></p>
+                <label>Replying to</label>
+                {% include "activities/_mini_post.html" with post=reply_to %}
             {% endif %}
             {{ form.reply_to }}
             {% include "forms/_field.html" with field=form.text %}