michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 19:36:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Hendrik L 2024-12-09 14:05:09 +01:00
parent 5780e9b05e
commit d772f2304b
5 changed files with 78 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
app/static/styles.css
View file

@ -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%;
}

97
app/static/styles.scss
View file

@ -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;
margin-left: auto; /* pull right */
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%;
}

12
app/templates/post/_post_full.html
View file

@ -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>

8
app/templates/post/_post_reply_teaser.html
View file

@ -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,10 +93,12 @@
{% endwith -%}
{% endif -%}
</div>
<div class="comment_actions_link">
{% if not post_reply.post.deleted -%}
<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>
<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 -%}
{% if children -%}

27
app/templates/post/post_teaser/_utilities_bar.html
View file

@ -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 -%}
<div class="preview_image">
{% if post.image_id -%}
<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>
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
{% else -%}
<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>
<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>
{% 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="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 -%}
<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>