remove extra whitespace on desktop #130

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');

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;

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;

app/templates/post/_post_teaser.html

@@ -61,14 +61,9 @@
                             {% 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 class="post_utilities">
-                        </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 %}
@@ -77,8 +72,10 @@
                                         <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 %}
+                                <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 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>
             </div>