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

Merge pull request 'more cleanup for posts and CSS, unify utility/action bars' (#380) from h3ndrik/pyfedi:post_cleanup2 into main

Browse source 
Reviewed-on: https://codeberg.org/rimu/pyfedi/pulls/380
This commit is contained in:
rimu 2024-12-09 19:20:19 +00:00
commit 84460e7433
10 changed files with 143 additions and 289 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
app/static/styles.css
View file

@ -783,11 +783,9 @@ div.navbar {
max-width: 78%; max-width: 78%;
} }
.post_list .post_teaser .col_thumbnail { .post_list .post_teaser .col_thumbnail {
float: right;
width: 70px; width: 70px;
position: relative; position: relative;
padding-left: 0;
padding-right: 0;
left: -13px;
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.post_list .post_teaser .col_thumbnail { .post_list .post_teaser .col_thumbnail {
@ -873,7 +871,6 @@ div.navbar {
.post_teaser_body { .post_teaser_body {
position: relative; position: relative;
padding-bottom: 32px;
} }
.post_teaser_article_preview, .post_teaser_link_preview { .post_teaser_article_preview, .post_teaser_link_preview {
@ -897,7 +894,6 @@ div.navbar {
.post_teaser_image_preview { .post_teaser_image_preview {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px;
} }
.post_teaser_image_preview a { .post_teaser_image_preview a {
display: inline-block; display: inline-block;
@ -914,7 +910,6 @@ div.navbar {
.post_teaser_video_preview { .post_teaser_video_preview {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px;
position: relative; position: relative;
} }
.post_teaser_video_preview .fe-video { .post_teaser_video_preview .fe-video {
@ -969,12 +964,6 @@ time {
width: 100%; width: 100%;
} }
.post_utilities_bar_wrapper {
position: absolute;
bottom: -9px;
width: 97%;
}
.post_utilities_bar { .post_utilities_bar {
display: flex; display: flex;
min-height: 44px; min-height: 44px;
@ -986,38 +975,16 @@ time {
justify-content: left; justify-content: left;
} }
} }
.post_utilities_bar .cross_post_button { .post_utilities_bar div {
display: flex; display: flex;
justify-content: left; justify-content: center;
align-items: 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; min-width: 44px;
height: 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 { .post_full .post_utilities_bar .voting_buttons_new {
@ -1213,9 +1180,6 @@ time {
height: auto; height: auto;
} }
.voting_buttons_new {
display: inline-block;
}
.voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button { .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button {
position: relative; /* so the htmx-indicators can be position: absolute */ position: relative; /* so the htmx-indicators can be position: absolute */
display: inline-block; display: inline-block;
@ -1396,26 +1360,27 @@ time {
} }
.comment .comment_actions { .comment .comment_actions {
margin-top: -18px; 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 { .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%; font-size: 87%;
padding: 5px 15px;
} }
.comment .replies { .comment .replies {
margin-top: 0; margin-top: 0;
@ -1883,30 +1848,6 @@ form h5 {
margin-bottom: 10px; 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 { .alert {
width: 96%; width: 96%;
} }

105
app/static/styles.scss
View file

@ -369,11 +369,9 @@ div.navbar {
} }
.col_thumbnail { .col_thumbnail {
float: right;
width: 70px; width: 70px;
position: relative; position: relative;
padding-left: 0;
padding-right: 0;
left: -13px;
@include breakpoint(tablet) { @include breakpoint(tablet) {
width: 170px; width: 170px;
} }
@ -469,7 +467,6 @@ div.navbar {
.post_teaser_body { .post_teaser_body {
position: relative; position: relative;
padding-bottom: 32px;
} }
.post_teaser_article_preview, .post_teaser_link_preview { .post_teaser_article_preview, .post_teaser_link_preview {
@ -494,7 +491,6 @@ div.navbar {
.post_teaser_image_preview { .post_teaser_image_preview {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px;
a { a {
display: inline-block; display: inline-block;
max-width: 512px; max-width: 512px;
@ -511,7 +507,6 @@ div.navbar {
.post_teaser_video_preview { .post_teaser_video_preview {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px;
position: relative; position: relative;
.fe-video { .fe-video {
@ -571,12 +566,6 @@ time {
width: 100%; width: 100%;
} }
.post_utilities_bar_wrapper {
position: absolute;
bottom: -9px;
width: 97%;
}
.post_utilities_bar { .post_utilities_bar {
display: flex; display: flex;
min-height: $min-touch-target; min-height: $min-touch-target;
@ -586,41 +575,17 @@ time {
justify-content: left; justify-content: left;
} }
.cross_post_button { div {
display: flex; display: flex;
justify-content: left; justify-content: center;
align-items: 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; min-width: $min-touch-target;
height: $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 +813,6 @@ time {
} }
.voting_buttons_new { .voting_buttons_new {
display: inline-block;
.upvote_button, .downvote_button { .upvote_button, .downvote_button {
position: relative; /* so the htmx-indicators can be position: absolute */ position: relative; /* so the htmx-indicators can be position: absolute */
display: inline-block; display: inline-block;
@ -1059,28 +1022,26 @@ time {
.comment_actions { .comment_actions {
margin-top: -18px; 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 { .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 +1555,6 @@ form {
margin-bottom: 10px; 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 { .alert {
width: 96%; width: 96%;
} }

8
app/templates/post/_breadcrumb_nav.html Normal file
View file

@ -0,0 +1,8 @@
<nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
<ol class="breadcrumb">
{% for breadcrumb in breadcrumbs -%}
<li class="breadcrumb-item">{% if breadcrumb.url -%}<a href="{{ breadcrumb.url }}">{% endif -%}{{ breadcrumb.text }}{% if breadcrumb.url -%}</a>{% endif -%}</li>
{% endfor -%}
<li class="breadcrumb-item"><a href="/c/{{ post.community.link() }}" title="{{ post.community.ap_domain }}">{{ post.community.title }}@{{ post.community.ap_domain }}</a></li>
</ol>
</nav>

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

@ -1,69 +1,7 @@
<div class="row position-relative post_full"> <div class="row position-relative post_full">
{% if post.type == POST_TYPE_IMAGE -%} <div class="col post_col {% if post.type == POST_TYPE_IMAGE %}post_col post_type_image{% else %}post_type_normal{% endif %}">
<div class="col post_col post_type_image"> {% include "post/_breadcrumb_nav.html" %}
<nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
<ol class="breadcrumb">
{% for breadcrumb in breadcrumbs -%}
<li class="breadcrumb-item">{% if breadcrumb.url -%}<a href="{{ breadcrumb.url }}">{% endif -%}{{ breadcrumb.text }}{% if breadcrumb.url -%}</a>{% endif -%}</li>
{% endfor -%}
<li class="breadcrumb-item"><a href="/c/{{ post.community.link() }}" title="{{ post.community.ap_domain }}">{{ post.community.title }}@{{ post.community.ap_domain }}</a></li>
</ol>
</nav>
<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>
{% if post.url -%}
<p><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="Go to image">{{ post.url|shorten_url }}
<span class="fe fe-external"></span></a></p>
{% endif -%}
<p>{% if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) -%}
<span class="red fe fe-report" title="{{ _('Reported. Check post for issues.') }}"></span>
{% endif -%}<small>submitted {{ arrow.get(post.posted_at).humanize(locale=locale) }} by {{ render_username(post.author) }}
{% if post.edited_at -%} edited {{ arrow.get(post.edited_at).humanize(locale=locale) }}{% endif -%}
</small></p>
<div class="post_image">
{% if post.image_id -%}
{% if low_bandwidth -%}
<a href="{{ post.image.view_url(resize=True) }}" rel="nofollow ugc"><img src="{{ post.image.medium_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else post.title }}" fetchpriority="high" referrerpolicy="same-origin"
width="{{ post.image.width }}" height="{{ post.image.height }}" /></a>
{% else -%}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc">
<img src="{{ post.image.view_url(resize=True) }}" lowsrc="{{ post.image.medium_url() }}"
sizes="(max-width: 512px) 100vw, 854px" srcset="{{ post.image.medium_url() }} 512w, {{ post.image.view_url(resize=True) }} 1024w"
alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"
fetchpriority="high" referrerpolicy="same-origin" >
</a>
{% endif -%}
{% else -%}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="Go to image"><img src="{{ post.url }}" style="max-width: 100%; height: auto;" /></a>
{% endif -%}
</div>
<div class="post_body mt-2"{% if post.language_id and post.language.code != 'en' %} lang="{{ post.language.code }}"{% endif %}>
{{ post.body_html|community_links|safe if post.body_html else '' }}
{% if post.licence_id -%}
<p>Licence: {{ post.licence.name }}</p>
{% endif -%}
</div>
</div>
{% else -%}
<div class="col post_col post_type_normal">
<nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
<ol class="breadcrumb">
{% for breadcrumb in breadcrumbs -%}
<li class="breadcrumb-item">{% if breadcrumb.url -%}<a href="{{ breadcrumb.url }}">{% endif -%}{{ breadcrumb.text }}{% if breadcrumb.url -%}</a>{% endif -%}</li>
{% endfor -%}
<li class="breadcrumb-item"><a href="/c/{{ post.community.link() }}">{{ post.community.title }}@{{ post.community.ap_domain }}</a></li>
</ol>
</nav>
<h1 class="mt-2 post_title" {% if post.language_id and post.language.code != 'en' %}lang="{{ post.language.code }}"{% endif %}>{{ post.title }} <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.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 -%} {% if post.nsfl -%}<span class="warning_badge nsfl" title="{{ _('Potentially emotionally scarring content') }}">nsfl</span>{% endif -%}
</h1> </h1>
@ -72,6 +10,9 @@
<a href="{{ post.url }}" target="_blank" rel="nofollow ugc" class="post_link"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else '' }}" <a href="{{ post.url }}" target="_blank" rel="nofollow ugc" class="post_link"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else '' }}"
width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" loading="lazy" /></a> width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" loading="lazy" /></a>
</div> </div>
{% elif post.type == POST_TYPE_IMAGE and post.url -%}
<p><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="Go to image">{{ post.url|shorten_url }}
<span class="fe fe-external"></span></a></p>
{% endif -%} {% endif -%}
<p>{% if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) -%} <p>{% if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) -%}
<span class="red fe fe-report" title="{{ _('Reported. Check post for issues.') }}"></span> <span class="red fe fe-report" title="{{ _('Reported. Check post for issues.') }}"></span>
@ -79,7 +20,26 @@
{{ render_username(post.author) }} {{ render_username(post.author) }}
{% if post.edited_at -%} edited {{ arrow.get(post.edited_at).humanize(locale=locale) }}{% endif -%}</small> {% if post.edited_at -%} edited {{ arrow.get(post.edited_at).humanize(locale=locale) }}{% endif -%}</small>
</p> </p>
{% if post.type == POST_TYPE_LINK -%} {% if post.type == POST_TYPE_IMAGE -%}
<div class="post_image">
{% if post.image_id -%}
{% if low_bandwidth -%}
<a href="{{ post.image.view_url(resize=True) }}" rel="nofollow ugc"><img src="{{ post.image.medium_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else post.title }}" fetchpriority="high" referrerpolicy="same-origin"
width="{{ post.image.width }}" height="{{ post.image.height }}" /></a>
{% else -%}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc">
<img src="{{ post.image.view_url(resize=True) }}" lowsrc="{{ post.image.medium_url() }}"
sizes="(max-width: 512px) 100vw, 854px" srcset="{{ post.image.medium_url() }} 512w, {{ post.image.view_url(resize=True) }} 1024w"
alt="{{ post.image.alt_text if post.image.alt_text else post.title }}"
fetchpriority="high" referrerpolicy="same-origin" >
</a>
{% endif -%}
{% else -%}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="Go to image"><img src="{{ post.url }}" style="max-width: 100%; height: auto;" /></a>
{% endif -%}
</div>
{% elif post.type == POST_TYPE_LINK -%}
<p><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" class="post_link" aria-label="Go to post url">{{ post.url|shorten_url }} <p><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" class="post_link" aria-label="Go to post url">{{ post.url|shorten_url }}
<span class="fe fe-external"></span></a></p> <span class="fe fe-external"></span></a></p>
{% if post.url.endswith('.mp3') -%} {% if post.url.endswith('.mp3') -%}
@ -189,7 +149,6 @@
</div> </div>
{% endif -%} {% endif -%}
</div> </div>
{% endif -%}
{% if post.tags.count() > 0 -%} {% if post.tags.count() > 0 -%}
<nav role="navigation"> <nav role="navigation">
@ -213,6 +172,13 @@
<span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span></a> <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span></a>
</div> </div>
{% endif -%} {% 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>
</div> </div>

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

@ -65,13 +65,15 @@
</div> </div>
</div> </div>
<div class="comment_actions hidable"> <div class="comment_actions hidable">
<div class="post_replies_link">
{% if post_reply.post.comments_enabled -%} {% if post_reply.post.comments_enabled -%}
{% if not post_reply.post.deleted and not post_reply.deleted -%} {% 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 -%} {% else -%}
<span class="fe fe-reply"></span> reply <span class="fe fe-reply"></span> reply
{% endif -%} {% endif -%}
{% endif -%} {% endif -%}
</div>
<div class="voting_buttons_new"> <div class="voting_buttons_new">
{% with comment=post_reply, community=post_reply.post.community -%} {% with comment=post_reply, community=post_reply.post.community -%}
{% include "post/_comment_voting_buttons.html" -%} {% include "post/_comment_voting_buttons.html" -%}
@ -91,9 +93,11 @@
{% endwith -%} {% endwith -%}
{% endif -%} {% endif -%}
</div> </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> </div>
{% if not post_reply.author.indexable -%}<!--googleon all-->{% endif -%} {% if not post_reply.author.indexable -%}<!--googleon all-->{% endif -%}

10
app/templates/post/post_cross_post.html
View file

@ -8,15 +8,7 @@
{% block app_content %} {% block app_content %}
<div class="row"> <div class="row">
<div class="col-12 col-md-8 position-relative main_pane"> <div class="col-12 col-md-8 position-relative main_pane">
<nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation"> {% include "post/_breadcrumb_nav.html" %}
<ol class="breadcrumb">
{% for breadcrumb in breadcrumbs -%}
<li class="breadcrumb-item">{% if breadcrumb.url -%}<a href="{{ breadcrumb.url }}">{% endif -%}{{ breadcrumb.text }}{% if breadcrumb.url -%}</a>{% endif -%}</li>
{% endfor -%}
<li class="breadcrumb-item"><a href="/c/{{ post.community.link() }}" title="{{ post.community.ap_domain }}">{{ post.community.title }}@{{ post.community.ap_domain }}</a></li>
<li class="breadcrumb-item active">{{ post.title|shorten(15) }}</li>
</ol>
</nav>
<h1 class="mt-2">{{ _('Cross-post %(post_name)s', post_name=post.title) }}</h1> <h1 class="mt-2">{{ _('Cross-post %(post_name)s', post_name=post.title) }}</h1>
{{ render_form(form) }} {{ render_form(form) }}
</div> </div>

23
app/templates/post/post_teaser/_article.html
View file

@ -1,4 +1,15 @@
<div class="col post_teaser_body"> <div class="col post_teaser_body">
{% if post.image_id -%}
<div class="col_thumbnail thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
{% if low_bandwidth -%}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
{% else -%}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
{% endif -%}
</div>
{% endif -%}
{% include "post/post_teaser/_title.html" %} {% include "post/post_teaser/_title.html" %}
{% if post.body_html -%} {% if post.body_html -%}
<div class="post_teaser_article_preview small post_teaser_clickable"> <div class="post_teaser_article_preview small post_teaser_clickable">
@ -7,15 +18,3 @@
{% endif -%} {% endif -%}
{% include "post/post_teaser/_utilities_bar.html" %} {% include "post/post_teaser/_utilities_bar.html" %}
</div> </div>
{% if post.image_id -%}
<div class="col col-2 col_thumbnail">
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
{% if low_bandwidth -%}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
{% else -%}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
{% endif -%}
</div>
</div>
{% endif -%}

22
app/templates/post/post_teaser/_link.html
View file

@ -1,4 +1,14 @@
<div class="col post_teaser_body"> <div class="col post_teaser_body">
{% if post.image_id -%}
<div class="col_thumbnail thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
{% if low_bandwidth -%}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
{% else -%}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
{% endif -%}
</div>
{% endif -%}
{% include "post/post_teaser/_title.html" %} {% include "post/post_teaser/_title.html" %}
{% if post.body_html -%} {% if post.body_html -%}
<div class="post_teaser_link_preview small post_teaser_clickable"> <div class="post_teaser_link_preview small post_teaser_clickable">
@ -7,15 +17,3 @@
{% endif -%} {% endif -%}
{% include "post/post_teaser/_utilities_bar.html" %} {% include "post/post_teaser/_utilities_bar.html" %}
</div> </div>
{% if post.image_id -%}
<div class="col col-2 col_thumbnail">
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
{% if low_bandwidth -%}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
{% else -%}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
{% endif -%}
</div>
</div>
{% endif -%}

18
app/templates/post/post_teaser/_poll.html
View file

@ -1,15 +1,6 @@
<div class="col post_teaser_body"> <div class="col post_teaser_body">
{% include "post/post_teaser/_title.html" %}
{% if post.body_html -%}
<div class="post_teaser_link_preview small post_teaser_clickable">
{{ first_paragraph(post.body_html) | safe }}
</div>
{% endif -%}
{% include "post/post_teaser/_utilities_bar.html" %}
</div>
<div class="col col-2 col_thumbnail">
{% if post.image_id -%} {% if post.image_id -%}
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true"> <div class="col_thumbnail thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
{% if low_bandwidth -%} {% if low_bandwidth -%}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a> <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
{% else -%} {% else -%}
@ -22,4 +13,11 @@
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-poll"></span></a> <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-poll"></span></a>
</div> </div>
{% endif -%} {% endif -%}
{% include "post/post_teaser/_title.html" %}
{% if post.body_html -%}
<div class="post_teaser_link_preview small post_teaser_clickable">
{{ first_paragraph(post.body_html) | safe }}
</div>
{% endif -%}
{% include "post/post_teaser/_utilities_bar.html" %}
</div> </div>

31
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"> <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"> <div class="voting_buttons_new" aria-live="assertive">
{% include "post/_post_voting_buttons.html" -%} {% include "post/_post_voting_buttons.html" -%}
</div> </div>
{% if post.type == POST_TYPE_IMAGE and low_bandwidth -%} {% 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 -%} {% 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) -%} {% 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 -%} {% 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>
</div>