mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-01-23 19:36:56 -08:00
post teaser redesign #148
This commit is contained in:
rimu
parent
b2457545bf
commit
d70d5c2878
9 changed files with 266 additions and 168 deletions
|
|
@ -119,7 +119,7 @@ def nodeinfo():
|
|||
nodeinfo_data = {"links": [{"rel": "http://nodeinfo.diaspora.software/ns/schema/2.0",
|
||||
"href": f"https://{current_app.config['SERVER_NAME']}/nodeinfo/2.0"},
|
||||
{"rel": "https://www.w3.org/ns/activitystreams#Application",
|
||||
"href": f"https://{current_app.config['SERVER_NAME']}/actor"}]}
|
||||
"href": f"https://{current_app.config['SERVER_NAME']}"}]}
|
||||
return jsonify(nodeinfo_data)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -102,6 +102,10 @@ def url_needs_archive(url) -> bool:
|
|||
hostname = parsed_url.hostname.lower()
|
||||
except:
|
||||
return False
|
||||
if hostname == 'nytimes.com' and 'unlocked_article_code' in url:
|
||||
return False
|
||||
if hostname == 'theatlantic.com' and 'gift' in url:
|
||||
return False
|
||||
return hostname in paywalled_sites
|
||||
else:
|
||||
return False
|
||||
|
|
|
|||
|
|
@ -166,14 +166,22 @@
|
|||
}
|
||||
|
||||
.fe-reply {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.fe-reply::before {
|
||||
content: "\e990";
|
||||
}
|
||||
|
||||
.fe-discussion::before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.fe-link::before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.fe-layers {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
|
|
|||
|
|
@ -197,14 +197,22 @@
|
|||
}
|
||||
|
||||
.fe-reply {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.fe-reply::before {
|
||||
content: "\e990";
|
||||
}
|
||||
|
||||
.fe-discussion::before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.fe-link::before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.fe-layers {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
|
@ -773,54 +781,60 @@ div.navbar {
|
|||
display: inline-block;
|
||||
max-width: 78%;
|
||||
}
|
||||
.post_list .post_teaser .main_row .post_utilities {
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
left: 10px;
|
||||
}
|
||||
.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 > div:first-child, .post_list .post_teaser .main_row .post_utilities > span:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
.post_list .post_teaser .utilities_row a {
|
||||
display: inline-block;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
.post_list .post_teaser .thumbnail {
|
||||
float: right;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
.post_list .post_teaser .col_thumbnail {
|
||||
width: 74px;
|
||||
position: relative;
|
||||
}
|
||||
.post_list .post_teaser .thumbnail .fe {
|
||||
@media (min-width: 992px) {
|
||||
.post_list .post_teaser .col_thumbnail {
|
||||
width: 22.667%;
|
||||
}
|
||||
}
|
||||
.post_list .post_teaser .thumbnail {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.post_list .post_teaser .thumbnail a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.post_list .post_teaser .thumbnail .fe-external, .post_list .post_teaser .thumbnail .fe-video, .post_list .post_teaser .thumbnail .fe-image, .post_list .post_teaser .thumbnail .fe-audio, .post_list .post_teaser .thumbnail .fe-magnify {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: -20px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding-bottom: 1px;
|
||||
padding-left: 1px;
|
||||
border-radius: 2px;
|
||||
top: 0;
|
||||
top: 3px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.post_list .post_teaser .thumbnail .fe-external, .post_list .post_teaser .thumbnail .fe-video, .post_list .post_teaser .thumbnail .fe-image, .post_list .post_teaser .thumbnail .fe-audio, .post_list .post_teaser .thumbnail .fe-magnify {
|
||||
right: -4px;
|
||||
}
|
||||
}
|
||||
.post_list .post_teaser .thumbnail .fe-discussion, .post_list .post_teaser .thumbnail .fe-poll, .post_list .post_teaser .thumbnail .fe-link {
|
||||
font-size: 52px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.post_list .post_teaser .thumbnail img {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
margin-left: 5px;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.post_list .post_teaser .thumbnail img {
|
||||
height: 90px;
|
||||
width: 170px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.post_list .post_teaser .thumbnail img.blur {
|
||||
|
|
@ -849,7 +863,19 @@ div.navbar {
|
|||
font-size: 80%;
|
||||
}
|
||||
|
||||
.post_teaser_body {
|
||||
position: relative;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.post_utilities_bar_wrapper {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
.post_utilities_bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
|
@ -863,13 +889,33 @@ div.navbar {
|
|||
padding: 3px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.post_utilities_bar .post_options_link {
|
||||
.post_utilities_bar .post_replies_link {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 3px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.post_utilities_bar .voting_buttons_new {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
padding: 3px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.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 {
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
#masonry {
|
||||
|
|
@ -1072,6 +1118,9 @@ div.navbar {
|
|||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.voting_buttons_new .upvote_button span, .voting_buttons_new .downvote_button span {
|
||||
line-height: 44px;
|
||||
}
|
||||
.voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 {
|
||||
width: 68px;
|
||||
}
|
||||
|
|
@ -1091,11 +1140,11 @@ div.navbar {
|
|||
}
|
||||
.voting_buttons_new .upvote_button .htmx-indicator {
|
||||
left: 13px;
|
||||
top: 7px;
|
||||
top: 14px;
|
||||
}
|
||||
.voting_buttons_new .downvote_button .htmx-indicator {
|
||||
left: 12px;
|
||||
top: 5px;
|
||||
top: 14px;
|
||||
}
|
||||
.voting_buttons_new .htmx-indicator {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -362,49 +362,47 @@ div.navbar {
|
|||
display: inline-block;
|
||||
max-width: 78%;
|
||||
}
|
||||
|
||||
.post_utilities {
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
left: 10px;
|
||||
a, > div, > span {
|
||||
display: inline-block;
|
||||
min-width: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.utilities_row {
|
||||
a {
|
||||
display: inline-block;
|
||||
min-width: $min-touch-target;
|
||||
min-height: $min-touch-target;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
.col_thumbnail {
|
||||
width: 74px;
|
||||
position: relative;
|
||||
@include breakpoint(tablet) {
|
||||
width: 22.667%;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
float: right;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
|
||||
.fe {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fe-external, .fe-video, .fe-image, .fe-audio, .fe-magnify {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: -20px;
|
||||
@include breakpoint(tablet) {
|
||||
right: -4px;
|
||||
}
|
||||
background-color: rgba(256,256,256, 0.7);
|
||||
padding-bottom: 1px;
|
||||
padding-left: 1px;
|
||||
border-radius: 2px;
|
||||
top: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.fe-discussion, .fe-poll, .fe-link {
|
||||
font-size: 52px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -412,10 +410,13 @@ div.navbar {
|
|||
width: 60px;
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
margin-left: 5px;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
@include breakpoint(tablet) {
|
||||
height: 90px;
|
||||
width: 170px;
|
||||
max-width: 100%;
|
||||
}
|
||||
&.blur {
|
||||
filter: blur(3px);
|
||||
|
|
@ -454,7 +455,19 @@ div.navbar {
|
|||
}
|
||||
}
|
||||
|
||||
.post_teaser_body {
|
||||
position: relative;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.post_utilities_bar_wrapper {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
.post_utilities_bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: $min-touch-target;
|
||||
|
||||
|
|
@ -469,13 +482,37 @@ div.navbar {
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
.post_options_link {
|
||||
.post_replies_link {
|
||||
display: flex;
|
||||
width: $min-touch-target;
|
||||
height: $min-touch-target;
|
||||
padding: 3px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.voting_buttons_new {
|
||||
display: flex;
|
||||
height: $min-touch-target;
|
||||
padding: 3px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post_options_link, .preview_image {
|
||||
display: flex;
|
||||
width: $min-touch-target;
|
||||
height: $min-touch-target;
|
||||
padding: 3px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.post_full .post_utilities_bar {
|
||||
.voting_buttons_new {
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -703,6 +740,9 @@ div.navbar {
|
|||
color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
|
||||
min-width: $min-touch-target;
|
||||
min-height: $min-touch-target;
|
||||
span {
|
||||
line-height: $min-touch-target;
|
||||
}
|
||||
|
||||
&.digits_4 {
|
||||
width: 68px;
|
||||
|
|
@ -729,14 +769,14 @@ div.navbar {
|
|||
.upvote_button {
|
||||
.htmx-indicator {
|
||||
left: 13px;
|
||||
top: 7px;
|
||||
top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.downvote_button {
|
||||
.htmx-indicator {
|
||||
left: 12px;
|
||||
top: 5px;
|
||||
top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
{% endif -%}
|
||||
{% include "_home_nav.html" %}
|
||||
{% include "_view_filter_nav.html" %}
|
||||
<div class="post_list">
|
||||
<div class="post_list h-feed">
|
||||
{% for post in posts.items -%}
|
||||
{% include 'post/_post_teaser.html' %}
|
||||
{% else -%}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="row position-relative">
|
||||
<div class="row position-relative post_full">
|
||||
{% if post.type == POST_TYPE_IMAGE -%}
|
||||
<div class="col post_col post_type_image">
|
||||
<nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
|
||||
|
|
@ -10,9 +10,6 @@
|
|||
<li class="breadcrumb-item active">{{ post.title|shorten(15) }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="voting_buttons" aria-live="assertive">
|
||||
{% include "post/_post_voting_buttons.html" -%}
|
||||
</div>
|
||||
<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' -%}
|
||||
|
|
@ -62,9 +59,6 @@
|
|||
<li class="breadcrumb-item active">{{ post.title|shorten(15) }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="voting_buttons" aria-live="assertive">
|
||||
{% include "post/_post_voting_buttons.html" -%}
|
||||
</div>
|
||||
<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' -%}
|
||||
|
|
@ -193,17 +187,21 @@
|
|||
</div>
|
||||
{% endif -%}
|
||||
|
||||
{% if post.tags.count() > 0 -%}
|
||||
<nav role="navigation">
|
||||
<h3 class="visually-hidden">{{ _('Hashtags') }}</h3>
|
||||
<ul class="post_tags">
|
||||
{% for tag in post.tags -%}
|
||||
<li class="post_tag small"><a href="{{ url_for('tag.show_tag', tag=tag.name) }}">#{{ tag.display_as }}</a></li>
|
||||
{% endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif -%}
|
||||
|
||||
<div class="post_utilities_bar">
|
||||
{% if post.tags.count() > 0 -%}
|
||||
<nav role="navigation">
|
||||
<h3 class="visually-hidden">{{ _('Hashtags') }}</h3>
|
||||
<ul class="post_tags">
|
||||
{% for tag in post.tags -%}
|
||||
<li class="post_tag small"><a href="{{ url_for('tag.show_tag', tag=tag.name) }}">#{{ tag.display_as }}</a></li>
|
||||
{% endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif -%}
|
||||
<div class="voting_buttons_new" aria-live="assertive">
|
||||
{% include "post/_post_voting_buttons.html" -%}
|
||||
</div>
|
||||
{% if post.cross_posts -%}
|
||||
<div class="cross_post_button">
|
||||
<a href="{{ url_for('post.post_cross_posts', post_id=post.id) }}" aria-label="{{ _('Show cross-posts') }}"
|
||||
|
|
|
|||
|
|
@ -8,87 +8,88 @@
|
|||
{% if content_blocked and content_blocked == '-1' -%}
|
||||
{# do nothing - blocked by keyword filter #}
|
||||
{% else -%}
|
||||
<div class="post_teaser type_{{ post.type }}{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}{{ ' blur' if blur_content }}"
|
||||
<div class="h-entry post_teaser type_{{ post.type }}{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}{{ ' blur' if blur_content }}"
|
||||
{% if content_blocked -%} title="{{ _('Filtered: ') }}{{ content_blocked }}"{% endif -%} tabindex="0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="row main_row">
|
||||
<div class="col">
|
||||
{% if not hide_vote_buttons -%}
|
||||
<div class="voting_buttons" aria-hidden="true">
|
||||
{% include "post/_post_voting_buttons.html" -%}
|
||||
</div>
|
||||
{% endif -%}
|
||||
{% if post.image_id -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
|
||||
{% if low_bandwidth -%}
|
||||
{% if post.type == POST_TYPE_LINK or post.type == POST_TYPE_VIDEO -%}
|
||||
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
|
||||
{% elif post.type == POST_TYPE_IMAGE -%}
|
||||
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span></a>
|
||||
{% else -%}
|
||||
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
|
||||
{% endif -%}
|
||||
{% else -%}
|
||||
{% if post.type == POST_TYPE_VIDEO -%}
|
||||
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}"><span class="fe fe-video"></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>
|
||||
{% elif post.type == POST_TYPE_LINK -%}
|
||||
<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>
|
||||
{% elif post.type == POST_TYPE_IMAGE -%}
|
||||
{% if post.image_id -%}
|
||||
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></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 -%}
|
||||
{% else -%}
|
||||
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></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 -%}
|
||||
{% endif -%}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-2 col_thumbnail">
|
||||
{% if post.image_id -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
|
||||
{% if low_bandwidth -%}
|
||||
{% if post.type == POST_TYPE_LINK or post.type == POST_TYPE_VIDEO -%}
|
||||
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
|
||||
{% elif post.type == POST_TYPE_IMAGE -%}
|
||||
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span></a>
|
||||
{% else -%}
|
||||
{% if (post.type == POST_TYPE_LINK or post.type == POST_TYPE_VIDEO) and post.domain_id -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }} missing_thumbnail" aria-hidden="true">
|
||||
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span></a>
|
||||
</div>
|
||||
{% endif -%}
|
||||
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
|
||||
{% endif -%}
|
||||
<h3>{% if post.sticky -%}<span class="fe fe-sticky-left"></span>{% endif -%}<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}" class="post_teaser_title_a">{{ post.title }}</a>
|
||||
{% if post.type == POST_TYPE_IMAGE -%}<span class="fe fe-image" aria-hidden="true"> </span>
|
||||
{% elif post.type == POST_TYPE_POLL -%}<span class="fe fe-poll" aria-hidden="true"> </span>
|
||||
{% elif (post.type == POST_TYPE_LINK or post.type == POST_TYPE_VIDEO) and post.domain_id -%}
|
||||
{% if post.url and (post.type == POST_TYPE_VIDEO or 'youtube.com' in post.url) -%}
|
||||
<span class="fe fe-video" aria-hidden="true"></span>
|
||||
{% elif post.url.endswith('.mp3') -%}
|
||||
<span class="fe fe-audio" aria-hidden="true"></span>
|
||||
{% else -%}
|
||||
{% if post.type == POST_TYPE_VIDEO -%}
|
||||
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}"><span class="fe fe-video"></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>
|
||||
{% elif post.type == POST_TYPE_LINK -%}
|
||||
<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>
|
||||
{% elif post.type == POST_TYPE_IMAGE -%}
|
||||
{% if post.image_id -%}
|
||||
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></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 -%}
|
||||
<span class="domain_link" aria-hidden="true">(<a href="/d/{{ post.domain_id }}" aria-label="{{ _('All posts about this domain') }}">{{ post.domain.name }}</a>)</span>
|
||||
{% 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 -%}
|
||||
{% 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.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 -%}
|
||||
{% if post.sticky -%}<span class="fe fe-sticky-right"></span>{% endif -%}
|
||||
</h3>
|
||||
|
||||
<span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
|
||||
by {{ render_username(post.author) }} {{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</span>
|
||||
<div class="post_utilities">
|
||||
<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>
|
||||
{% if post.type == POST_TYPE_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>
|
||||
{% 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>
|
||||
{% endif -%}
|
||||
{% endif -%}
|
||||
<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>
|
||||
{% endif -%}
|
||||
</div>
|
||||
{% else -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
|
||||
{% if post.type == POST_TYPE_ARTICLE %}
|
||||
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-discussion"></span></a>
|
||||
{% elif post.type == POST_TYPE_LINK %}
|
||||
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-link"></span></a>
|
||||
{% elif post.type == POST_TYPE_POLL %}
|
||||
<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>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif -%}
|
||||
</div>
|
||||
<div class="col post_teaser_body">
|
||||
<h3>{% if post.sticky -%}<span class="fe fe-sticky-left"></span>{% endif -%}<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}" class="post_teaser_title_a">{{ post.title }}</a>
|
||||
{% if post.type == POST_TYPE_IMAGE -%}<span class="fe fe-image" aria-hidden="true"> </span>
|
||||
{% elif post.type == POST_TYPE_POLL -%}<span class="fe fe-poll" aria-hidden="true"> </span>
|
||||
{% elif (post.type == POST_TYPE_LINK or post.type == POST_TYPE_VIDEO) and post.domain_id -%}
|
||||
{% if post.url and (post.type == POST_TYPE_VIDEO or 'youtube.com' in post.url) -%}
|
||||
<span class="fe fe-video" aria-hidden="true"></span>
|
||||
{% elif post.url.endswith('.mp3') -%}
|
||||
<span class="fe fe-audio" aria-hidden="true"></span>
|
||||
{% endif -%}
|
||||
<span class="domain_link" aria-hidden="true">(<a href="/d/{{ post.domain_id }}" aria-label="{{ _('All posts about this domain') }}">{{ post.domain.name }}</a>)</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.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 -%}
|
||||
{% if post.sticky -%}<span class="fe fe-sticky-right"></span>{% endif -%}
|
||||
</h3>
|
||||
<span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
|
||||
by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
|
||||
<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="voting_buttons_new" aria-live="assertive">
|
||||
{% include "post/_post_voting_buttons.html" -%}
|
||||
</div>
|
||||
{% if post.type == POST_TYPE_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>
|
||||
{% 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>
|
||||
{% 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif -%}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,25 @@
|
|||
{% if current_user.is_authenticated and current_user.verified -%}
|
||||
{% if can_upvote(current_user, post.community) -%}
|
||||
<div class="upvote_button {{ 'voted_up' if in_sorted_list(recently_upvoted, post.id) }}" role="button" aria-label="{{ _('UpVote button, %(count)d upvotes so far.', count=post.up_votes) }}" aria-live="assertive"
|
||||
hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons" tabindex="0">
|
||||
hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0">
|
||||
<span class="fe fe-arrow-up"></span>
|
||||
{{ shorten_number(post.up_votes) }}
|
||||
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
|
||||
</div>
|
||||
{% endif -%}
|
||||
<span title="{{ post.up_votes }}, {{ post.down_votes }}" aria-live="assertive" aria-label="{{ _('Score: ') }}{{ post.up_votes - post.down_votes }}.">{{ shorten_number(post.up_votes - post.down_votes) }}</span>
|
||||
{% if can_downvote(current_user, post.community) -%}
|
||||
<div class="downvote_button {{ 'voted_down' if in_sorted_list(recently_downvoted, post.id) }}" role="button" aria-label="{{ _('DownVote button, %(count)d downvotes so far.', count=post.down_votes) }}" aria-live="assertive"
|
||||
hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons" tabindex="0">
|
||||
hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0">
|
||||
<span class="fe fe-arrow-down"></span>
|
||||
{{ shorten_number(post.down_votes) }}
|
||||
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
|
||||
</div>
|
||||
{% endif -%}
|
||||
{% else -%}
|
||||
<div class="upvote_button digits_{{ digits(post.up_votes) }} {{ upvoted_class }} redirect_login">
|
||||
<span class="fe fe-arrow-up"></span>
|
||||
{{ shorten_number(post.up_votes) }}
|
||||
</div>
|
||||
<span title="{{ post.up_votes }}, {{ post.down_votes }}" aria-live="assertive" aria-label="{{ _('Score: ') }}{{ post.up_votes - post.down_votes }}.">{{ shorten_number(post.up_votes - post.down_votes) }}</span>
|
||||
<div class="downvote_button digits_{{ digits(post.down_votes) }} {{ downvoted_class }} redirect_login">
|
||||
<span class="fe fe-arrow-down"></span>
|
||||
{{ shorten_number(post.down_votes) }}
|
||||
</div>
|
||||
{% endif -%}
|
||||
|
|
|
|||
Loading…
Reference in a new issue