mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-02-03 00:31:25 -08:00
post teaser refactor to improve maintainability
This commit is contained in:
rimu
parent
6741b1a35a
commit
b6a44b100c
9 changed files with 198 additions and 109 deletions
|
|
@ -782,12 +782,15 @@ div.navbar {
|
|||
max-width: 78%;
|
||||
}
|
||||
.post_list .post_teaser .col_thumbnail {
|
||||
width: 74px;
|
||||
width: 70px;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
left: -13px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.post_list .post_teaser .col_thumbnail {
|
||||
width: 22.667%;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
.post_list .post_teaser .thumbnail {
|
||||
|
|
@ -809,17 +812,12 @@ div.navbar {
|
|||
.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: -20px;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding-bottom: 1px;
|
||||
padding-left: 1px;
|
||||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
top: 0;
|
||||
}
|
||||
.post_list .post_teaser .thumbnail .fe-discussion, .post_list .post_teaser .thumbnail .fe-poll, .post_list .post_teaser .thumbnail .fe-link {
|
||||
font-size: 52px;
|
||||
|
|
@ -830,9 +828,6 @@ div.navbar {
|
|||
width: 60px;
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.post_list .post_teaser .thumbnail img {
|
||||
|
|
@ -879,7 +874,6 @@ div.navbar {
|
|||
}
|
||||
|
||||
.post_utilities_bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
|
@ -1757,9 +1751,6 @@ form h5 {
|
|||
|
||||
.post_options_link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -2px;
|
||||
width: 41px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -365,10 +365,13 @@ div.navbar {
|
|||
}
|
||||
|
||||
.col_thumbnail {
|
||||
width: 74px;
|
||||
width: 70px;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
left: -13px;
|
||||
@include breakpoint(tablet) {
|
||||
width: 22.667%;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -391,15 +394,12 @@ div.navbar {
|
|||
.fe-external, .fe-video, .fe-image, .fe-audio, .fe-magnify {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
@include breakpoint(tablet) {
|
||||
right: -4px;
|
||||
}
|
||||
right: 0;
|
||||
background-color: rgba(256,256,256, 0.7);
|
||||
padding-bottom: 1px;
|
||||
padding-left: 1px;
|
||||
border-radius: 2px;
|
||||
top: 3px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fe-discussion, .fe-poll, .fe-link {
|
||||
|
|
@ -412,9 +412,6 @@ div.navbar {
|
|||
width: 60px;
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
@include breakpoint(tablet) {
|
||||
height: 90px;
|
||||
width: 170px;
|
||||
|
|
@ -469,7 +466,6 @@ div.navbar {
|
|||
}
|
||||
|
||||
.post_utilities_bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: $min-touch-target;
|
||||
|
||||
|
|
@ -1450,9 +1446,6 @@ form {
|
|||
|
||||
.post_options_link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -2px;
|
||||
width: 41px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,85 +11,17 @@
|
|||
<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 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 -%}
|
||||
<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') }}"><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>
|
||||
{% 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>
|
||||
{% if post.type == POST_TYPE_ARTICLE %}
|
||||
{% include "post/post_teaser/_article.html" -%}
|
||||
{% elif post.type == POST_TYPE_LINK %}
|
||||
{% include "post/post_teaser/_link.html" -%}
|
||||
{% elif post.type == POST_TYPE_POLL %}
|
||||
{% include "post/post_teaser/_poll.html" -%}
|
||||
{% elif post.type == POST_TYPE_IMAGE %}
|
||||
{% include "post/post_teaser/_image.html" -%}
|
||||
{% elif post.type == POST_TYPE_VIDEO %}
|
||||
{% include "post/post_teaser/_video.html" -%}
|
||||
{% endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{% endif -%}
|
||||
|
|
|
|||
25
app/templates/post/post_teaser/_article.html
Normal file
25
app/templates/post/post_teaser/_article.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<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.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>
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</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 -%}
|
||||
30
app/templates/post/post_teaser/_image.html
Normal file
30
app/templates/post/post_teaser/_image.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<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>
|
||||
{% 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>
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</div>
|
||||
<div class="col col-2 col_thumbnail">
|
||||
{% if post.image_id -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
|
||||
{% if low_bandwidth -%}
|
||||
<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.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 -%}
|
||||
{% endif -%}
|
||||
</div>
|
||||
{% endif -%}
|
||||
</div>
|
||||
35
app/templates/post/post_teaser/_link.html
Normal file
35
app/templates/post/post_teaser/_link.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<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.domain_id -%}
|
||||
{% if 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>
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</div>
|
||||
<div class="col col-2 col_thumbnail">
|
||||
{% if post.image_id -%}
|
||||
<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>
|
||||
{% else -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
|
||||
<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>
|
||||
</div>
|
||||
{% endif -%}
|
||||
</div>
|
||||
30
app/templates/post/post_teaser/_poll.html
Normal file
30
app/templates/post/post_teaser/_poll.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<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>
|
||||
<span class="fe fe-poll" aria-hidden="true"> </span>
|
||||
{% 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>
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</div>
|
||||
<div class="col col-2 col_thumbnail">
|
||||
{% if post.image_id -%}
|
||||
<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>
|
||||
{% else -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
|
||||
<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>
|
||||
{% endif -%}
|
||||
</div>
|
||||
16
app/templates/post/post_teaser/_utilities_bar.html
Normal file
16
app/templates/post/post_teaser/_utilities_bar.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<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>
|
||||
37
app/templates/post/post_teaser/_video.html
Normal file
37
app/templates/post/post_teaser/_video.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<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.domain_id -%}
|
||||
{% if post.url and '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>
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</div>
|
||||
<div class="col col-2 col_thumbnail">
|
||||
{% if post.image_id -%}
|
||||
<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="{{ 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>
|
||||
{% endif -%}
|
||||
</div>
|
||||
{% else -%}
|
||||
<div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
|
||||
|
||||
</div>
|
||||
{% endif -%}
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue