unify notification bell and try to fix related css in the action/option bars

app/static/styles.css

@@ -873,7 +873,6 @@ div.navbar {
 
 .post_teaser_body {
   position: relative;
-  padding-bottom: 32px;
 }
 
 .post_teaser_article_preview, .post_teaser_link_preview {
@@ -969,12 +968,6 @@ time {
   width: 100%;
 }
 
-.post_utilities_bar_wrapper {
-  position: absolute;
-  bottom: -9px;
-  width: 97%;
-}
-
 .post_utilities_bar {
   display: flex;
   min-height: 44px;
@@ -986,38 +979,16 @@ time {
     justify-content: left;
   }
 }
-.post_utilities_bar .cross_post_button {
+.post_utilities_bar div {
   display: flex;
-  justify-content: left;
+  justify-content: center;
   align-items: center;
-  width: 44px;
-  height: 44px;
-  line-height: 44px;
-  padding: 3px;
-  padding-left: 0;
-}
-.post_utilities_bar .post_replies_link {
-  display: flex;
   min-width: 44px;
   height: 44px;
-  padding: 3px;
+  line-height: 44px;
-  align-items: center;
-  margin-left: -3px;
 }
-.post_utilities_bar .voting_buttons_new {
+.post_utilities_bar .notify_toggle {
-  display: flex;
+  margin-left: auto; /* pull right */
-  height: 44px;
-  padding: 3px;
-  justify-content: center;
-  align-items: center;
-}
-.post_utilities_bar .post_cross_post_link, .post_utilities_bar .post_options_link, .post_utilities_bar .preview_image {
-  display: flex;
-  width: 44px;
-  height: 44px;
-  padding: 3px;
-  justify-content: center;
-  align-items: center;
 }
 
 .post_full .post_utilities_bar .voting_buttons_new {
@@ -1213,9 +1184,6 @@ time {
   height: auto;
 }
 
-.voting_buttons_new {
-  display: inline-block;
-}
 .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button {
   position: relative; /* so the htmx-indicators can be position: absolute */
   display: inline-block;
@@ -1396,26 +1364,27 @@ time {
 }
 .comment .comment_actions {
   margin-top: -18px;
-  position: relative;
+  display: flex;
-  padding-bottom: 5px;
+  min-height: 44px;
+  /* justify-content: space-between; */
+  justify-content: left;
 }
-.comment .comment_actions a {
+@media (min-width: 992px) {
-  text-decoration: none;
+  .comment .comment_actions {
-  padding: 0;
+    justify-content: left;
+  }
 }
-.comment .comment_actions .hide_button {
+.comment .comment_actions div {
-  display: inline-block;
+  display: flex;
-}
+  justify-content: center;
-.comment .comment_actions .hide_button a {
+  align-items: center;
-  padding: 5px 15px;
+  min-width: 44px;
+  height: 44px;
+  line-height: 44px;
 }
 .comment .comment_actions .notify_toggle {
-  display: inline-block;
+  margin-left: auto; /* pull right */
-}
-.comment .comment_actions .notify_toggle a {
-  text-decoration: none;
   font-size: 87%;
-  padding: 5px 15px;
 }
 .comment .replies {
   margin-top: 0;
@@ -1883,30 +1852,6 @@ form h5 {
   margin-bottom: 10px;
 }
 
-.post_options_link {
-  display: block;
-  width: 41px;
-  text-decoration: none;
-}
-
-.comment_actions_link {
-  display: block;
-  position: absolute;
-  top: 3px;
-  right: -16px;
-  width: 41px;
-  text-decoration: none;
-}
-
-.notify_toggle {
-  display: block;
-  position: absolute;
-  top: 2px;
-  right: 30px;
-  width: 41px;
-  text-decoration: none;
-}
-
 .alert {
   width: 96%;
 }

app/static/styles.scss

@@ -469,7 +469,6 @@ div.navbar {
 
 .post_teaser_body {
   position: relative;
-  padding-bottom: 32px;
 }
 
 .post_teaser_article_preview, .post_teaser_link_preview {
@@ -571,12 +570,6 @@ time {
   width: 100%;
 }
 
-.post_utilities_bar_wrapper {
-  position: absolute;
-  bottom: -9px;
-  width: 97%;
-}
-
 .post_utilities_bar {
   display: flex;
   min-height: $min-touch-target;
@@ -586,41 +579,17 @@ time {
     justify-content: left;
   }
 
-  .cross_post_button {
+  div {
     display: flex;
-    justify-content: left;
+    justify-content: center;
     align-items: center;
-    width: $min-touch-target;
-    height: $min-touch-target;
-    line-height: $min-touch-target;
-    padding: 3px;
-    padding-left: 0;
-  }
-
-  .post_replies_link {
-    display: flex;
     min-width: $min-touch-target;
     height: $min-touch-target;
-    padding: 3px;
+    line-height: $min-touch-target;
-    align-items: center;
-    margin-left: -3px;
   }
 
-  .voting_buttons_new {
+  .notify_toggle {
-    display: flex;
+    margin-left: auto; /* pull right */
-    height: $min-touch-target;
-    padding: 3px;
-    justify-content: center;
-    align-items: center;
-  }
-
-   .post_cross_post_link, .post_options_link, .preview_image {
-    display: flex;
-    width: $min-touch-target;
-    height: $min-touch-target;
-    padding: 3px;
-    justify-content: center;
-    align-items: center;
   }
 }
 
@@ -848,8 +817,6 @@ time {
 }
 
 .voting_buttons_new {
-  display: inline-block;
-
   .upvote_button, .downvote_button {
     position: relative; /* so the htmx-indicators can be position: absolute */
     display: inline-block;
@@ -1059,28 +1026,26 @@ time {
 
   .comment_actions {
     margin-top: -18px;
-    position: relative;
+    display: flex;
-    padding-bottom: 5px;
+    min-height: $min-touch-target;
-    a {
+    /* justify-content: space-between; */
-      text-decoration: none;
+    justify-content: left;
-      padding: 0;
+    @include breakpoint(tablet) {
+      justify-content: left;
     }
 
-    .hide_button {
+    div {
-      display: inline-block;
+      display: flex;
-
+      justify-content: center;
-      a {
+      align-items: center;
-        padding: 5px 15px;
+      min-width: $min-touch-target;
-      }
+      height: $min-touch-target;
+      line-height: $min-touch-target;
     }
 
     .notify_toggle {
-      display: inline-block;
+      margin-left: auto; /* pull right */
-      a {
+      font-size: 87%;
-        text-decoration: none;
-        font-size: 87%;
-        padding: 5px 15px;
-      }
     }
   }
 
@@ -1594,30 +1559,6 @@ form {
   margin-bottom: 10px;
 }
 
-.post_options_link {
-  display: block;
-  width: 41px;
-  text-decoration: none;
-}
-
-.comment_actions_link {
-  display: block;
-  position: absolute;
-  top: 3px;
-  right: -16px;
-  width: 41px;
-  text-decoration: none;
-}
-
-.notify_toggle  {
-  display: block;
-  position: absolute;
-  top: 2px;
-  right: 30px;
-  width: 41px;
-  text-decoration: none;
-}
-
 .alert {
   width: 96%;
 }

app/templates/post/_post_full.html

@@ -2,9 +2,6 @@
         <div class="col post_col {% if post.type == POST_TYPE_IMAGE %}post_col post_type_image{% else %}post_type_normal{% endif %}">
             {% include "post/_breadcrumb_nav.html" %}
             <h1 class="mt-2 post_title" {% if post.language_id and post.language.code != 'en' %}lang="{{ post.language.code }}"{% endif %}>{{ post.title }}
-                {% if current_user.is_authenticated -%}
-                    {% include 'post/_post_notification_toggle.html' -%}
-                {% endif -%}
                 {% if post.nsfw -%}<span class="warning_badge nsfw" title="{{ _('Not safe for work') }}">nsfw</span>{% endif -%}
                 {% if post.nsfl -%}<span class="warning_badge nsfl" title="{{ _('Potentially emotionally scarring content') }}">nsfl</span>{% endif -%}
             </h1>
@@ -175,6 +172,13 @@
             <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span></a>
         </div>
         {% endif -%}
-        <a href="{{ url_for('post.post_options', post_id=post.id) }}" class="post_options_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
+        <div class="notify_toggle">
+            {% if current_user.is_authenticated and current_user.verified -%}
+                {% include 'post/_post_notification_toggle.html' -%}
+            {% endif -%}
+        </div>
+        <div class="post_options_link">
+            <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
+        </div>
     </div>
 </div>

app/templates/post/_post_reply_teaser.html

@@ -65,13 +65,15 @@
         </div>
     </div>
     <div class="comment_actions hidable">
+        <div class="post_replies_link">
             {% if post_reply.post.comments_enabled -%}
                 {% if not post_reply.post.deleted and not post_reply.deleted -%}
-                    <a href="{{ url_for('post.add_reply', post_id=post_reply.post.id, comment_id=post_reply.id) }}" class="" rel="nofollow noindex"><span class="fe fe-reply"></span> reply</a>
+                    <a href="{{ url_for('post.add_reply', post_id=post_reply.post.id, comment_id=post_reply.id) }}" rel="nofollow noindex"><span class="fe fe-reply"></span> reply</a>
                 {% else -%}
                     <span class="fe fe-reply"></span> reply
                 {% endif -%}
             {% endif -%}
+        </div>
         <div class="voting_buttons_new">
             {% with comment=post_reply, community=post_reply.post.community -%}
                 {% include "post/_comment_voting_buttons.html" -%}
@@ -91,9 +93,11 @@
                 {% endwith -%}
             {% endif -%}
         </div>
-        {% if not post_reply.post.deleted -%}
+        <div class="comment_actions_link">
-            <a href="{{ url_for('post.post_reply_options', post_id=post_reply.post.id, comment_id=post_reply.id) }}" class="comment_actions_link" rel="nofollow noindex" aria-label="{{ _('Comment options') }}"><span class="fe fe-options" title="Options"> </span></a>
+            {% if not post_reply.post.deleted -%}
-        {% endif -%}
+                <a href="{{ url_for('post.post_reply_options', post_id=post_reply.post.id, comment_id=post_reply.id) }}" rel="nofollow noindex" aria-label="{{ _('Comment options') }}"><span class="fe fe-options" title="Options"> </span></a>
+            {% endif -%}
+        </div>
     </div>
     {% if not post_reply.author.indexable -%}<!--googleon all-->{% endif -%}
 

app/templates/post/post_teaser/_utilities_bar.html

@@ -1,19 +1,30 @@
-<div class="post_utilities_bar_wrapper">
     <div class="post_utilities_bar">
-        <a class="post_replies_link" 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>
+        <div class="post_replies_link">
+            <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>
+        </div>
         <div class="voting_buttons_new" aria-live="assertive">
             {% include "post/_post_voting_buttons.html" -%}
         </div>
         {% if post.type == POST_TYPE_IMAGE and low_bandwidth -%}
-            {% if post.image_id -%}
+            <div class="preview_image">
-                <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>
+                {% if post.image_id -%}
-            {% else -%}
+                    <a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
-                <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>
+                {% else -%}
-            {% endif -%}
+                    <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
+                {% endif -%}
+            </div>
         {% endif -%}
         {% if current_user.is_authenticated and post.type == POST_TYPE_LINK and post.author.bot and (post.cross_posts is none or len(post.cross_posts) == 0) -%}
-            <a class="post_cross_post_link" rel="nofollow" aria-label="{{ _('Cross-post') }}" href="{{ url_for('post.post_cross_post', post_id=post.id) }}"><span class="fe fe-cross-post"></span></a>
+            <div class="post_cross_post_link">
+                <a rel="nofollow" aria-label="{{ _('Cross-post') }}" href="{{ url_for('post.post_cross_post', post_id=post.id) }}"><span class="fe fe-cross-post"></span></a>
+            </div>
         {% endif -%}
-        <a class="post_options_link" href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
+        <div class="notify_toggle">
+            {% if current_user.is_authenticated and current_user.verified -%}
+                {% include 'post/_post_notification_toggle.html' -%}
+            {% endif -%}
+        </div>
+        <div class="post_options_link">
+          <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
+        </div>
     </div>
-</div>