From 10e4279eb44ff7c256478d8f9ef967539d5e781b Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 12:30:29 +0200 Subject: [PATCH 01/12] allow css debugging (the map file isn't fetched under normal circumstances) --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index ec649c25..465ad7d8 100644 --- a/.gitignore +++ b/.gitignore @@ -159,7 +159,6 @@ cython_debug/ # and can be added to the global gitignore or merged into this file. For a more nuclear # option (not recommended) you can uncomment the following to ignore the entire idea folder. .idea/ -app/static/*.css.map /app/static/media/ celery_worker.py From 285d9f525d6f52e0fe4fd7b9b6ea848eb7ff4ded Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 12:33:15 +0200 Subject: [PATCH 02/12] generalize hide button --- app/static/styles.css | 2 +- app/static/styles.scss | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 2d407725..becbe8a3 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -1238,7 +1238,7 @@ div.navbar { border-radius: 50%; vertical-align: middle; } -.comment .comment_author a.unhide { +.comment a.unhide { display: none; text-decoration: none; padding: 5px 15px; diff --git a/app/static/styles.scss b/app/static/styles.scss index 4c6b1b19..2ab91439 100644 --- a/app/static/styles.scss +++ b/app/static/styles.scss @@ -900,14 +900,14 @@ div.navbar { border-radius: 50%; vertical-align: middle; } + } - a.unhide { - display: none; - text-decoration: none; - padding: 5px 15px; - position: relative; - top: 3px; - } + a.unhide { + display: none; + text-decoration: none; + padding: 5px 15px; + position: relative; + top: 3px; } .comment_actions { From 13b1c7984d850a062744394ee0b009e5093573b4 Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 15:51:32 +0200 Subject: [PATCH 03/12] allow post_utilities to contain div and span elements in the exact next level in addition to anchors --- app/static/styles.css | 4 ++-- app/static/styles.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index becbe8a3..85edd914 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -765,13 +765,13 @@ div.navbar { bottom: -12px; left: 10px; } -.post_list .post_teaser .main_row .post_utilities a { +.post_list .post_teaser .main_row .post_utilities a, .post_list .post_teaser .main_row .post_utilities > div, .post_list .post_teaser .main_row .post_utilities > span { display: inline-block; min-width: 44px; line-height: 44px; text-align: center; } -.post_list .post_teaser .main_row .post_utilities a:first-child { +.post_list .post_teaser .main_row .post_utilities a:first-child, .post_list .post_teaser .main_row .post_utilities > div:first-child, .post_list .post_teaser .main_row .post_utilities > span:first-child { text-align: left; } .post_list .post_teaser .main_row .post_options { diff --git a/app/static/styles.scss b/app/static/styles.scss index 2ab91439..388a4acd 100644 --- a/app/static/styles.scss +++ b/app/static/styles.scss @@ -356,7 +356,7 @@ div.navbar { position: absolute; bottom: -12px; left: 10px; - a { + a, > div, > span { display: inline-block; min-width: 44px; line-height: 44px; From a6d60562f50156fab0cb1840ed43bf860900fd57 Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 16:14:05 +0200 Subject: [PATCH 04/12] remove the post_options css, only used once in the teaser and doesn't work anyways --- app/static/styles.css | 7 ------- app/static/styles.scss | 8 -------- app/templates/post/_post_teaser.html | 2 +- 3 files changed, 1 insertion(+), 16 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 85edd914..72e358cf 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -774,10 +774,6 @@ div.navbar { .post_list .post_teaser .main_row .post_utilities a:first-child, .post_list .post_teaser .main_row .post_utilities > div:first-child, .post_list .post_teaser .main_row .post_utilities > span:first-child { text-align: left; } -.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; @@ -785,9 +781,6 @@ div.navbar { justify-content: center; align-content: center; } -.post_list .post_teaser .utilities_row .preview_image, .post_list .post_teaser .utilities_row .post_options { - text-align: center; -} .post_list .post_teaser .thumbnail { float: right; padding-left: 0; diff --git a/app/static/styles.scss b/app/static/styles.scss index 388a4acd..53634ab1 100644 --- a/app/static/styles.scss +++ b/app/static/styles.scss @@ -367,11 +367,6 @@ div.navbar { } } } - - .post_options { - position: absolute; - bottom: -1px; - } } .utilities_row { @@ -382,9 +377,6 @@ div.navbar { justify-content: center; align-content: center; } - .preview_image, .post_options { - text-align: center; - } } .thumbnail { diff --git a/app/templates/post/_post_teaser.html b/app/templates/post/_post_teaser.html index efb759d4..601c6de1 100644 --- a/app/templates/post/_post_teaser.html +++ b/app/templates/post/_post_teaser.html @@ -84,7 +84,7 @@ {% endif -%} {% endif -%} - + From 5eeb2708caf208be5e949720f2fb209ce621030e Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 16:28:51 +0200 Subject: [PATCH 05/12] wrap the notification toggle like the other buttons --- app/static/styles.css | 7 +++++-- app/static/styles.scss | 13 ++++++++----- app/templates/post/_reply_notification_toggle.html | 4 ++-- app/templates/post/continue_discussion.html | 8 +++++--- app/templates/post/post.html | 8 +++++--- 5 files changed, 25 insertions(+), 15 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 72e358cf..86dd1b5f 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -1252,7 +1252,10 @@ div.navbar { .comment .comment_actions .hide_button a { padding: 5px 15px; } -.comment .comment_actions .notif_toggle { +.comment .comment_actions .notify_toggle { + display: inline-block; +} +.comment .comment_actions .notify_toggle a { text-decoration: none; font-size: 87%; padding: 5px 15px; @@ -1704,7 +1707,7 @@ form h5 { text-decoration: none; } -.notif_toggle { +.notify_toggle { display: block; position: absolute; top: 2px; diff --git a/app/static/styles.scss b/app/static/styles.scss index 53634ab1..63efa76e 100644 --- a/app/static/styles.scss +++ b/app/static/styles.scss @@ -918,10 +918,13 @@ div.navbar { } } - .notif_toggle { - text-decoration: none; - font-size: 87%; - padding: 5px 15px; + .notify_toggle { + display: inline-block; + a { + text-decoration: none; + font-size: 87%; + padding: 5px 15px; + } } } @@ -1408,7 +1411,7 @@ form { text-decoration: none; } -.notif_toggle { +.notify_toggle { display: block; position: absolute; top: 2px; diff --git a/app/templates/post/_reply_notification_toggle.html b/app/templates/post/_reply_notification_toggle.html index 4a47771f..c1cbc2ea 100644 --- a/app/templates/post/_reply_notification_toggle.html +++ b/app/templates/post/_reply_notification_toggle.html @@ -1,4 +1,4 @@ \ No newline at end of file +title="{{ _('Notify about replies') }}" aria-label="{{ _('Notify about replies') }}"> diff --git a/app/templates/post/continue_discussion.html b/app/templates/post/continue_discussion.html index 7abe23d6..102132ea 100644 --- a/app/templates/post/continue_discussion.html +++ b/app/templates/post/continue_discussion.html @@ -46,9 +46,11 @@ {% endif %} - {% if current_user.is_authenticated and current_user.verified and current_user.id == comment['comment'].author.id %} - {% include "post/_reply_notification_toggle.html" %} - {% endif %} +
+ {% if current_user.is_authenticated and current_user.verified and current_user.id == comment['comment'].author.id %} + {% include "post/_reply_notification_toggle.html" %} + {% endif %} +
{% if comment['replies'] %} diff --git a/app/templates/post/post.html b/app/templates/post/post.html index 252ad54b..95976b6c 100644 --- a/app/templates/post/post.html +++ b/app/templates/post/post.html @@ -107,9 +107,11 @@ {% endif -%} - {% if current_user.is_authenticated and current_user.verified -%} - {% include "post/_reply_notification_toggle.html" -%} - {% endif -%} +
+ {% if current_user.is_authenticated and current_user.verified -%} + {% include "post/_reply_notification_toggle.html" -%} + {% endif -%} +
{% if comment['replies'] -%} From 24c508f5522b8e7b78050c921ab6604da131a5a4 Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 21:13:43 +0200 Subject: [PATCH 06/12] proper comment teaser in flexbox layout --- app/templates/post/_post_reply_teaser.html | 88 +++++++++++++++++++++- 1 file changed, 84 insertions(+), 4 deletions(-) diff --git a/app/templates/post/_post_reply_teaser.html b/app/templates/post/_post_reply_teaser.html index 1913fb0a..4c3d9902 100644 --- a/app/templates/post/_post_reply_teaser.html +++ b/app/templates/post/_post_reply_teaser.html @@ -1,5 +1,85 @@ -
- {{ post_reply.body_html|safe }} -

{{ _('View context') }}

+{# Options: + teaser: Renders just a teaser + disable_voting: Disable voting buttons (to prevent mass downvoting) + no_collapse: Don't collapse for admin and moderator views +#} +{% set collapsed = (post_reply.score <= current_user.reply_collapse_threshold) + and not no_collapse -%} +
+ {% if not post_reply.author.indexable -%}{% endif -%} + {% if teaser -%} +
+
+ in reply to: {{ post_reply.post.title | truncate(80, True) }} +
+
+ {% endif -%} +
+
+ {{ render_communityname(post_reply.post.community) }} +
+
+ by + {{ render_username(post_reply.author) }} + {% if post_reply.author.id == post_reply.post.author.id -%} + [OP] + {% endif -%} +
+
+ {{ moment(post_reply.posted_at).fromNow(refresh=True) }} + {% if post_reply.edited_at -%}, edited {{ moment(post_reply.edited_at).fromNow(refresh=True) }} {% endif -%} +
+
+ {% if post_reply.reports and current_user.is_authenticated and post_reply.post.community.is_moderator(current_user) -%} + + {% endif -%} +
+
+ +
+
+ +
+
+ {{ post_reply.body_html | community_links | safe }} +
+
+
+
+ {% if post_reply.post.comments_enabled -%} + reply + {% endif -%} +
+
+ {% if not disable_voting -%} + {% with comment=post_reply, community=post_reply.post.community -%} + {% include "post/_comment_voting_buttons.html" -%} + {% endwith -%} + {% endif -%} +
+
+ {% if collapsed -%} + + {% else -%} + + {% endif -%} +
+
+ {% with comment=dict(comment=post_reply) -%} + {% include "post/_reply_notification_toggle.html" -%} + {% endwith -%} +
+
+ +
+
+ {% if not post_reply.author.indexable -%}{% endif -%} + {% if collapsed -%} + + {% endif -%}
-
\ No newline at end of file From ef5572260a7d0544e5d1c931854c60b8eda25bc6 Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 22:48:12 +0200 Subject: [PATCH 07/12] don't move voting_buttons_new around --- app/static/styles.css | 8 -------- app/static/styles.scss | 5 ----- 2 files changed, 13 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 86dd1b5f..228208ec 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -1063,9 +1063,7 @@ div.navbar { } .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button { display: inline-block; - padding: 5px 0 5px 3px; text-align: center; - position: relative; cursor: pointer; color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); min-width: 44px; @@ -1088,16 +1086,10 @@ div.navbar { color: darkred; font-weight: bold; } -.voting_buttons_new .upvote_button { - top: 1px; -} .voting_buttons_new .upvote_button .htmx-indicator { left: 13px; top: 7px; } -.voting_buttons_new .downvote_button { - top: 1px; -} .voting_buttons_new .downvote_button .htmx-indicator { left: 12px; top: 5px; diff --git a/app/static/styles.scss b/app/static/styles.scss index 63efa76e..f42a0f8d 100644 --- a/app/static/styles.scss +++ b/app/static/styles.scss @@ -702,9 +702,7 @@ div.navbar { .upvote_button, .downvote_button { display: inline-block; - padding: 5px 0 5px 3px; text-align: center; - position: relative; cursor: pointer; color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)); min-width: $min-touch-target; @@ -733,8 +731,6 @@ div.navbar { } .upvote_button { - top: 1px; - .htmx-indicator { left: 13px; top: 7px; @@ -742,7 +738,6 @@ div.navbar { } .downvote_button { - top: 1px; .htmx-indicator { left: 12px; top: 5px; From 563bf2a31d0a0ba1f8ffc29b62192ec2f70d6573 Mon Sep 17 00:00:00 2001 From: Hendrik L Date: Wed, 10 Jul 2024 22:55:11 +0200 Subject: [PATCH 08/12] use new comment teaser template --- app/templates/admin/deleted_posts.html | 7 +++++-- app/templates/admin/spam_posts.html | 7 +++++-- app/templates/user/bookmarks_comments.html | 5 ++++- app/templates/user/show_profile.html | 5 ++++- 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/app/templates/admin/deleted_posts.html b/app/templates/admin/deleted_posts.html index 1ad63f32..420ef09e 100644 --- a/app/templates/admin/deleted_posts.html +++ b/app/templates/admin/deleted_posts.html @@ -21,7 +21,10 @@

Deleted comments

{% for post_reply in post_replies.items %} - {% include 'post/_post_reply_teaser.html' %} + {% with teaser=True, disable_voting=True, no_collapse=True %} + {% include 'post/_post_reply_teaser.html' %} + {% endwith %} +
{% else %}

{{ _('No deleted comments.') }}

{% endfor %} @@ -38,4 +41,4 @@
-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/templates/admin/spam_posts.html b/app/templates/admin/spam_posts.html index 6124d164..8c3c98eb 100644 --- a/app/templates/admin/spam_posts.html +++ b/app/templates/admin/spam_posts.html @@ -19,7 +19,10 @@

Downvoted comments

{% for post_reply in post_replies.items %} - {% include 'post/_post_reply_teaser.html' %} + {% with teaser=True, disable_voting=True, no_collapse=True %} + {% include 'post/_post_reply_teaser.html' %} + {% endwith %} +
{% endfor %}
{% else %} @@ -34,4 +37,4 @@
-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/templates/user/bookmarks_comments.html b/app/templates/user/bookmarks_comments.html index 7f488fd9..031e5de0 100644 --- a/app/templates/user/bookmarks_comments.html +++ b/app/templates/user/bookmarks_comments.html @@ -20,7 +20,10 @@
{% for post_reply in post_replies.items %} - {% include 'post/_post_reply_teaser.html' %} + {% with teaser=True %} + {% include 'post/_post_reply_teaser.html' %} + {% endwith %} +
{% else -%}

{{ _('No comments have been bookmarked. Use the three dots on each comment to find the bookmark function.') }}

{% endfor -%} diff --git a/app/templates/user/show_profile.html b/app/templates/user/show_profile.html index 7d9ec758..1c1f31d4 100644 --- a/app/templates/user/show_profile.html +++ b/app/templates/user/show_profile.html @@ -122,7 +122,10 @@

Comments

{% for post_reply in post_replies.items %} - {% include 'post/_post_reply_teaser.html' %} + {% with teaser=True, disable_voting=True %} + {% include 'post/_post_reply_teaser.html' %} + {% endwith %} +
{% endfor %}