diff --git a/app/static/styles.css b/app/static/styles.css index eabb86b7..41c86ecb 100644 --- a/app/static/styles.css +++ b/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; - align-items: center; - margin-left: -3px; + line-height: 44px; } -.post_utilities_bar .voting_buttons_new { - display: flex; - 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_utilities_bar .notify_toggle { + margin-left: auto; /* pull right */ } .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; - padding-bottom: 5px; + display: flex; + min-height: 44px; + /* justify-content: space-between; */ + justify-content: left; } -.comment .comment_actions a { - text-decoration: none; - padding: 0; +@media (min-width: 992px) { + .comment .comment_actions { + justify-content: left; + } } -.comment .comment_actions .hide_button { - display: inline-block; -} -.comment .comment_actions .hide_button a { - padding: 5px 15px; +.comment .comment_actions div { + display: flex; + justify-content: center; + align-items: center; + min-width: 44px; + height: 44px; + line-height: 44px; } .comment .comment_actions .notify_toggle { - display: inline-block; -} -.comment .comment_actions .notify_toggle a { - text-decoration: none; + margin-left: auto; /* pull right */ 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%; } diff --git a/app/static/styles.scss b/app/static/styles.scss index e5fa0451..896523d9 100644 --- a/app/static/styles.scss +++ b/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; - align-items: center; - margin-left: -3px; + line-height: $min-touch-target; } - .voting_buttons_new { - display: flex; - 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; + .notify_toggle { + margin-left: auto; /* pull right */ } } @@ -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; - padding-bottom: 5px; - a { - text-decoration: none; - padding: 0; + display: flex; + min-height: $min-touch-target; + /* justify-content: space-between; */ + justify-content: left; + @include breakpoint(tablet) { + justify-content: left; } - .hide_button { - display: inline-block; - - a { - padding: 5px 15px; - } + div { + display: flex; + justify-content: center; + align-items: center; + min-width: $min-touch-target; + height: $min-touch-target; + line-height: $min-touch-target; } .notify_toggle { - display: inline-block; - a { - text-decoration: none; - font-size: 87%; - padding: 5px 15px; - } + margin-left: auto; /* pull right */ + font-size: 87%; } } @@ -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%; } diff --git a/app/templates/post/_post_full.html b/app/templates/post/_post_full.html index 931f8eed..79e2fe1e 100644 --- a/app/templates/post/_post_full.html +++ b/app/templates/post/_post_full.html @@ -2,9 +2,6 @@
{% include "post/_breadcrumb_nav.html" %}

{{ post.title }} - {% if current_user.is_authenticated -%} - {% include 'post/_post_notification_toggle.html' -%} - {% endif -%} {% if post.nsfw -%}nsfw{% endif -%} {% if post.nsfl -%}nsfl{% endif -%}

@@ -175,6 +172,13 @@ {{ len(post.cross_posts) }}
{% endif -%} - +
+ {% if current_user.is_authenticated and current_user.verified -%} + {% include 'post/_post_notification_toggle.html' -%} + {% endif -%} +
+
+ +
diff --git a/app/templates/post/_post_reply_teaser.html b/app/templates/post/_post_reply_teaser.html index 5fc96e7d..505db19e 100644 --- a/app/templates/post/_post_reply_teaser.html +++ b/app/templates/post/_post_reply_teaser.html @@ -65,13 +65,15 @@
+
{% if post_reply.post.comments_enabled -%} {% if not post_reply.post.deleted and not post_reply.deleted -%} - reply + reply {% else -%} reply {% endif -%} {% endif -%} +
{% with comment=post_reply, community=post_reply.post.community -%} {% include "post/_comment_voting_buttons.html" -%} @@ -91,9 +93,11 @@ {% endwith -%} {% endif -%}
- {% if not post_reply.post.deleted -%} - - {% endif -%} +
{% if not post_reply.author.indexable -%}{% endif -%} diff --git a/app/templates/post/post_teaser/_utilities_bar.html b/app/templates/post/post_teaser/_utilities_bar.html index 0986b33d..f2d9392f 100644 --- a/app/templates/post/post_teaser/_utilities_bar.html +++ b/app/templates/post/post_teaser/_utilities_bar.html @@ -1,19 +1,30 @@ -
- {{ post.reply_count }} +
+ {{ post.reply_count }} +
{% include "post/_post_voting_buttons.html" -%}
{% if post.type == POST_TYPE_IMAGE and low_bandwidth -%} - {% if post.image_id -%} - - {% else -%} - - {% endif -%} +
+ {% if post.image_id -%} + + {% else -%} + + {% endif -%} +
{% 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) -%} - +
+ +
{% endif -%} - +
+ {% if current_user.is_authenticated and current_user.verified -%} + {% include 'post/_post_notification_toggle.html' -%} + {% endif -%} +
+
+ +
-
\ No newline at end of file