mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-01-23 19:36:56 -08:00
masonry visual improvements
This commit is contained in:
rimu
parent
510176dea3
commit
a3777e7ff8
5 changed files with 162 additions and 5 deletions
|
|
@ -272,7 +272,8 @@ def post_vote(post_id: int, vote_direction):
|
|||
current_user.recalculate_attitude()
|
||||
db.session.commit()
|
||||
post.flush_cache()
|
||||
return render_template('post/_post_voting_buttons.html', post=post, community=post.community,
|
||||
template = 'post/_post_voting_buttons.html' if request.args.get('style', '') == '' else 'post/_post_voting_buttons_masonry.html'
|
||||
return render_template(template, post=post, community=post.community,
|
||||
upvoted_class=upvoted_class,
|
||||
downvoted_class=downvoted_class)
|
||||
|
||||
|
|
|
|||
|
|
@ -671,13 +671,20 @@ fieldset legend {
|
|||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_thumb a, .post_list_masonry_wide .post_teaser .masonry_thumb a {
|
||||
border: none;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info, .post_list_masonry_wide .post_teaser .masonry_info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .voting_buttons_masonry, .post_list_masonry_wide .post_teaser .masonry_info .voting_buttons_masonry {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info p, .post_list_masonry_wide .post_teaser .masonry_info p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -691,6 +698,49 @@ fieldset legend {
|
|||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row, .post_list_masonry_wide .post_teaser .masonry_info .row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col, .post_list_masonry_wide .post_teaser .masonry_info .row .col {
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
display: inline-flex;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a {
|
||||
color: white;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button {
|
||||
display: inline;
|
||||
color: white;
|
||||
padding-top: 5px;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 7px;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_up {
|
||||
color: #00b550;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_down {
|
||||
color: red;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col-8, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 {
|
||||
justify-content: center;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .col-8 p, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info .row .reply_col, .post_list_masonry_wide .post_teaser .masonry_info .row .reply_col {
|
||||
justify-content: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.post_list_masonry .post_teaser .masonry_info_no_image, .post_list_masonry_wide .post_teaser .masonry_info_no_image {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -299,12 +299,21 @@ nav, etc which are used site-wide */
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.masonry_thumb a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.masonry_info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.voting_buttons_masonry {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
|
||||
|
|
@ -317,6 +326,55 @@ nav, etc which are used site-wide */
|
|||
}
|
||||
}
|
||||
}
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
.col {
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
display: inline-flex;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upvote_button, .downvote_button {
|
||||
display: inline;
|
||||
color: white;
|
||||
padding-top: 5px;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
|
||||
.htmx-indicator {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
&.voted_up {
|
||||
color: $green;
|
||||
}
|
||||
&.voted_down {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col-8 {
|
||||
justify-content: center;
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.reply_col {
|
||||
justify-content: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.masonry_info_no_image {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,20 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
<div class="masonry_info">
|
||||
<p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title|shorten(25) }}</a></p>
|
||||
<div class="row">
|
||||
<div class="col col-3">
|
||||
<div class="voting_buttons_masonry">
|
||||
{% include "post/_post_voting_buttons_masonry.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-8">
|
||||
<p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title }}</a></p>
|
||||
</div>
|
||||
<div class="col col-1 reply_col">
|
||||
<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') }}" aria-hidden="true"><span class="fe fe-reply"></span></a>
|
||||
{% if post.reply_count %}<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') }}">{{ post.reply_count }}</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if post.url and (post.url.endswith('.jpg') or post.url.endswith('.webp') or post.url.endswith('.png') or post.url.endswith('.gif') or post.url.endswith('.avif') or post.url.endswith('.jpeg')) %}
|
||||
|
|
@ -40,7 +53,19 @@
|
|||
alt="{{ post.title }}" loading="{{ 'lazy' if low_bandwidth else 'eager' }}" /></a>
|
||||
</div>
|
||||
<div class="masonry_info">
|
||||
<p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title|shorten(25) }}</a></p>
|
||||
<div class="row">
|
||||
<div class="col col-2">
|
||||
{% include "post/_post_voting_buttons_masonry.html" %}
|
||||
</div>
|
||||
<div class="col col-8">
|
||||
<p><a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" title="{{ post.title }}">{{ post.title }}</a></p>
|
||||
</div>
|
||||
<div class="col col-2 reply_col">
|
||||
<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') }}" aria-hidden="true"><span class="fe fe-reply"></span></a>
|
||||
{% if post.reply_count %}<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') }}">{{ post.reply_count }}</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="masonry_info_no_image">
|
||||
|
|
|
|||
23
app/templates/post/_post_voting_buttons_masonry.html
Normal file
23
app/templates/post/_post_voting_buttons_masonry.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{% if current_user.is_authenticated and current_user.verified %}
|
||||
{% if can_upvote(current_user, post.community) %}
|
||||
<div class="upvote_button {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}"
|
||||
hx-post="/post/{{ post.id }}/upvote?style=masonry" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_masonry" tabindex="0" title="{{ post.up_votes }} upvotes">
|
||||
<span class="fe fe-arrow-up"></span>
|
||||
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if can_downvote(current_user, post.community) %}
|
||||
<div class="downvote_button {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}"
|
||||
hx-post="/post/{{ post.id }}/downvote?style=masonry" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_masonry" tabindex="0" title="{{ post.down_votes }} downvotes">
|
||||
<span class="fe fe-arrow-down"></span>
|
||||
<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" title="{{ shorten_number(post.up_votes) }} upvotes">
|
||||
<span class="fe fe-arrow-up"></span>
|
||||
</div>
|
||||
<div class="downvote_button digits_{{ digits(post.down_votes) }} {{ downvoted_class }} redirect_login" title="{{ shorten_number(post.down_votes) }} downvotes">
|
||||
<span class="fe fe-arrow-down"></span>
|
||||
</div>
|
||||
{% endif %}
|
||||
Loading…
Reference in a new issue