From 42a8f9291f68b8b1d04980fceba57b0bf802b7fb Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Sun, 31 Mar 2024 14:17:49 +1300
Subject: [PATCH] remove extra whitespace on desktop #130

---
 app/static/js/scripts.js             |  3 ++-
 app/static/structure.css             | 23 +++++++++++++++++++++++
 app/static/structure.scss            | 27 +++++++++++++++++++++++++++
 app/templates/post/_post_teaser.html | 27 ++++++++++++---------------
 4 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js
index 4e18b904..256cc0f8 100644
--- a/app/static/js/scripts.js
+++ b/app/static/js/scripts.js
@@ -3,7 +3,6 @@ document.addEventListener("DOMContentLoaded", function () {
     setupCommunityNameInput();
     setupShowMoreLinks();
     setupConfirmFirst();
-    setupImageExpander();
     setupSubmitOnInputChange();
     setupTimeTracking();
     setupMobileNav();
@@ -107,6 +106,8 @@ function setupAutoResize(element) {
 
 }
 
+
+// disabled for now
 function setupImageExpander() {
     // Get all elements with the class "preview_image"
     var imageLinks = document.querySelectorAll('.preview_image');
diff --git a/app/static/structure.css b/app/static/structure.css
index 3bfb3053..0350fc92 100644
--- a/app/static/structure.css
+++ b/app/static/structure.css
@@ -638,6 +638,28 @@ fieldset legend {
 .post_list .post_teaser .meta_row a, .post_list .post_teaser .main_row a, .post_list .post_teaser .utilities_row a {
   text-decoration: none;
 }
+.post_list .post_teaser .main_row {
+  position: relative;
+}
+.post_list .post_teaser .main_row .author {
+  margin-bottom: 30px;
+  display: inline-block;
+}
+.post_list .post_teaser .main_row .post_utilities {
+  position: absolute;
+  bottom: -12px;
+  left: 4px;
+}
+.post_list .post_teaser .main_row .post_utilities a {
+  display: inline-block;
+  min-width: 44px;
+  line-height: 44px;
+  text-align: center;
+}
+.post_list .post_teaser .main_row .post_options {
+  position: absolute;
+  bottom: -1px;
+}
 .post_list .post_teaser .utilities_row a {
   display: inline-block;
   min-width: 44px;
@@ -1011,6 +1033,7 @@ fieldset legend {
   cursor: pointer;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .voting_buttons .upvote_button.digits_4, .voting_buttons .downvote_button.digits_4 {
   width: 68px;
diff --git a/app/static/structure.scss b/app/static/structure.scss
index 06748afd..e0f7e8fb 100644
--- a/app/static/structure.scss
+++ b/app/static/structure.scss
@@ -234,6 +234,32 @@ html {
       }
     }
 
+    .main_row {
+      position: relative;
+
+      .author {
+        margin-bottom: 30px;
+        display: inline-block;
+      }
+
+      .post_utilities {
+        position: absolute;
+        bottom: -12px;
+        left: 4px;
+        a {
+          display: inline-block;
+          min-width: 44px;
+          line-height: 44px;
+          text-align: center;
+        }
+      }
+
+      .post_options {
+        position: absolute;
+        bottom: -1px;
+      }
+    }
+
     .utilities_row {
       a {
         display: inline-block;
@@ -651,6 +677,7 @@ html {
     cursor: pointer;
     display: flex;
     align-items: center;
+    justify-content: center;
 
     &.digits_4 {
       width: 68px;
diff --git a/app/templates/post/_post_teaser.html b/app/templates/post/_post_teaser.html
index 410c5ba0..7f3ddd37 100644
--- a/app/templates/post/_post_teaser.html
+++ b/app/templates/post/_post_teaser.html
@@ -61,24 +61,21 @@
                             {% if post.sticky %}<span class="fe fe-sticky-right"></span>{% endif %}
                             </h3>
 
-                            <span class="small">{% if show_post_community %}<strong><a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a></strong>{% endif %}
+                            <span class="author small">{% if show_post_community %}<strong><a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a></strong>{% endif %}
                                 by {{ render_username(post.author) }} {{ moment(post.last_active if sort == 'active' else post.posted_at).fromNow() }}</span>
-
-                        </div>
-
-                    </div>
-                    <div class="row utilities_row">
-                        <div class="col-6">
-                            <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}" aria-label="{{ _('View comments') }}"><span class="fe fe-reply"></span> <span aria-label="{{ _('Number of comments:') }}">{{ post.reply_count }}</span></a>
-                            {% if post.type == POST_TYPE_IMAGE %}
-                                {% if post.image_id %}
-                                    <a href="{{ post.image.view_url() }}" rel="nofollow ugc" class="preview_image" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
-                                {% else %}
-                                    <a href="{{ post.url }}" rel="nofollow ugc" class="preview_image" target="_blank" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
+                            <div class="post_utilities">
+                                <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}" aria-label="{{ _('View comments') }}"><span class="fe fe-reply"></span> <span aria-label="{{ _('Number of comments:') }}">{{ post.reply_count }}</span></a>
+                                {% if post.type == POST_TYPE_IMAGE %}
+                                    {% if post.image_id %}
+                                        <a href="{{ post.image.view_url() }}" rel="nofollow ugc" class="preview_image" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
+                                    {% else %}
+                                        <a href="{{ post.url }}" rel="nofollow ugc" class="preview_image" target="_blank" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
+                                    {% endif %}
                                 {% endif %}
-                            {% endif %}
+                                <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" class="post_options" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
+                            </div>
                         </div>
-                        <div class="col-6 text-right"><a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" class="post_options" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a></div>
+
                     </div>
                 </div>
             </div>