masonry visual improvements

app/post/routes.py

@@ -272,7 +272,8 @@ def post_vote(post_id: int, vote_direction):
         current_user.recalculate_attitude()
         db.session.commit()
     post.flush_cache()
-    return render_template('post/_post_voting_buttons.html', post=post, community=post.community,
+    template = 'post/_post_voting_buttons.html' if request.args.get('style', '') == '' else 'post/_post_voting_buttons_masonry.html'
+    return render_template(template, post=post, community=post.community,
                            upvoted_class=upvoted_class,
                            downvoted_class=downvoted_class)
 

app/static/structure.css

@@ -671,13 +671,20 @@ fieldset legend {
   width: 100%;
   height: auto;
 }
+.post_list_masonry .post_teaser .masonry_thumb a, .post_list_masonry_wide .post_teaser .masonry_thumb a {
+  border: none;
+}
 .post_list_masonry .post_teaser .masonry_info, .post_list_masonry_wide .post_teaser .masonry_info {
   position: absolute;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.3);
   width: 100%;
   text-align: center;
 }
+.post_list_masonry .post_teaser .masonry_info .voting_buttons_masonry, .post_list_masonry_wide .post_teaser .masonry_info .voting_buttons_masonry {
+  width: 100%;
+  display: flex;
+}
 .post_list_masonry .post_teaser .masonry_info p, .post_list_masonry_wide .post_teaser .masonry_info p {
   margin-bottom: 0;
 }
@@ -691,6 +698,49 @@ fieldset legend {
     line-height: 30px;
   }
 }
+.post_list_masonry .post_teaser .masonry_info .row, .post_list_masonry_wide .post_teaser .masonry_info .row {
+  margin-left: 0;
+  margin-right: 0;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col, .post_list_masonry_wide .post_teaser .masonry_info .row .col {
+  padding: 0;
+  flex-direction: row;
+  display: inline-flex;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a {
+  color: white;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button {
+  display: inline;
+  color: white;
+  padding-top: 5px;
+  width: 50%;
+  position: relative;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  left: 7px;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_up {
+  color: #00b550;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_down {
+  color: red;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col-8, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 {
+  justify-content: center;
+}
+.post_list_masonry .post_teaser .masonry_info .row .col-8 p, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.post_list_masonry .post_teaser .masonry_info .row .reply_col, .post_list_masonry_wide .post_teaser .masonry_info .row .reply_col {
+  justify-content: right;
+  padding-right: 5px;
+}
 .post_list_masonry .post_teaser .masonry_info_no_image, .post_list_masonry_wide .post_teaser .masonry_info_no_image {
   background-color: rgba(0, 0, 0, 0.2);
   width: 100%;

app/static/structure.scss

@@ -299,12 +299,21 @@ nav, etc which are used site-wide */
       height: auto;
     }
 
+    .masonry_thumb a {
+      border: none;
+    }
+
     .masonry_info {
       position: absolute;
       bottom: 0;
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: rgba(0, 0, 0, 0.3);
       width: 100%;
       text-align: center;
+
+      .voting_buttons_masonry {
+        width: 100%;
+        display: flex;
+      }
       p {
         margin-bottom: 0;
 
@@ -317,6 +326,55 @@ nav, etc which are used site-wide */
           }
         }
       }
+      .row {
+        margin-left: 0;
+        margin-right: 0;
+
+        .col {
+          padding: 0;
+          flex-direction: row;
+          display: inline-flex;
+
+          a {
+            color: white;
+          }
+
+          .upvote_button, .downvote_button {
+            display: inline;
+            color: white;
+            padding-top: 5px;
+            width: 50%;
+            position: relative;
+
+            .htmx-indicator {
+              position: absolute;
+              width: 20px;
+              height: 20px;
+              left: 7px;
+            }
+
+            &.voted_up {
+              color: $green;
+            }
+            &.voted_down {
+              color: red;
+            }
+          }
+        }
+        .col-8 {
+          justify-content: center;
+          p {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .reply_col {
+          justify-content: right;
+          padding-right: 5px;
+        }
+      }
     }
 
     .masonry_info_no_image {

app/templates/post/_post_teaser_masonry.html

@@ -31,7 +31,20 @@
                 {% endif %}
             </div>
             <div class="masonry_info">
-                <p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title|shorten(25) }}</a></p>
+                <div class="row">
+                    <div class="col col-3">
+                        <div class="voting_buttons_masonry">
+                        {% include "post/_post_voting_buttons_masonry.html" %}
+                        </div>
+                    </div>
+                    <div class="col col-8">
+                        <p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title }}</a></p>
+                    </div>
+                    <div class="col col-1 reply_col">
+                        <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') }}" aria-hidden="true"><span class="fe fe-reply"></span></a>
+                        {% if post.reply_count %}<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') }}">{{ post.reply_count }}</a>{% endif %}
+                    </div>
+                </div>
             </div>
         {% else %}
             {% if post.url and (post.url.endswith('.jpg') or post.url.endswith('.webp') or post.url.endswith('.png') or post.url.endswith('.gif') or post.url.endswith('.avif')  or post.url.endswith('.jpeg')) %}
@@ -40,7 +53,19 @@
                            alt="{{ post.title }}" loading="{{ 'lazy' if low_bandwidth else 'eager' }}" /></a>
                 </div>
                 <div class="masonry_info">
-                    <p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title|shorten(25) }}</a></p>
+                    <div class="row">
+                        <div class="col col-2">
+                            {% include "post/_post_voting_buttons_masonry.html" %}
+                        </div>
+                        <div class="col col-8">
+                            <p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title }}</a></p>
+                        </div>
+                        <div class="col col-2 reply_col">
+                            <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') }}" aria-hidden="true"><span class="fe fe-reply"></span></a>
+                            {% if post.reply_count %}<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') }}">{{ post.reply_count }}</a>{% endif %}
+                        </div>
+                    </div>
+
                 </div>
             {% else %}
             <div class="masonry_info_no_image">

app/templates/post/_post_voting_buttons_masonry.html

@@ -0,0 +1,23 @@
+{% if current_user.is_authenticated and current_user.verified %}
+        {% if can_upvote(current_user, post.community) %}
+                <div class="upvote_button {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}"
+                 hx-post="/post/{{ post.id }}/upvote?style=masonry" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_masonry" tabindex="0" title="{{ post.up_votes }} upvotes">
+                        <span class="fe fe-arrow-up"></span>
+                        <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
+                </div>
+        {% endif %}
+        {% if can_downvote(current_user, post.community) %}
+                <div class="downvote_button {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}"
+                 hx-post="/post/{{ post.id }}/downvote?style=masonry" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_masonry" tabindex="0" title="{{ post.down_votes }} downvotes">
+                        <span class="fe fe-arrow-down"></span>
+                        <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
+                </div>
+        {% endif %}
+{% else %}
+<div class="upvote_button digits_{{ digits(post.up_votes) }} {{ upvoted_class }} redirect_login" title="{{ shorten_number(post.up_votes) }} upvotes">
+        <span class="fe fe-arrow-up"></span>
+</div>
+<div class="downvote_button digits_{{ digits(post.down_votes) }} {{ downvoted_class }} redirect_login" title="{{ shorten_number(post.down_votes) }} downvotes">
+        <span class="fe fe-arrow-down"></span>
+</div>
+{% endif %}