adjust feed
This commit is contained in:
Your Name
Henri Dickson
parent
3bf583930e
commit
e40121f400
6 changed files with 146 additions and 175 deletions
|
|
@ -1,87 +1,23 @@
|
|||
.feed-page {
|
||||
.feed {
|
||||
word-break: break-word;
|
||||
|
||||
.avatar {
|
||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px);
|
||||
width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px);
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> section {
|
||||
margin-bottom: var(--pico-spacing);
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0px;
|
||||
// align-items: center;
|
||||
// justify-content: left;
|
||||
|
||||
.nickname a {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.time {
|
||||
width: max-content;
|
||||
float: right;
|
||||
color: var(--pico-muted-color);
|
||||
opacity: 0.5;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.rating-star {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
.rating-star,
|
||||
.rating-star>* {
|
||||
color: var(--pico-primary);
|
||||
}
|
||||
|
||||
article {
|
||||
padding: calc(var(--pico-block-spacing-horizontal) / 2);
|
||||
margin-bottom: var(--pico-block-spacing-horizontal);
|
||||
|
||||
>div.item {
|
||||
column-gap: calc(var(--pico-block-spacing-horizontal) / 2);
|
||||
|
||||
.post {
|
||||
.cover {
|
||||
img {
|
||||
max-width:6em;
|
||||
max-height:12em;
|
||||
margin:1em;
|
||||
box-shadow: var(--pico-card-box-shadow);
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: calc(2.5rem * var(--pico-line-height)) auto
|
||||
max-width:4em;
|
||||
max-height:8em;
|
||||
margin:0.5em 0 0.5em 0.5em;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
max-width:8em;
|
||||
max-height:16em;
|
||||
margin:1em 1em 2em 2em;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: calc(var(--pico-block-spacing-horizontal) / 2);
|
||||
margin-left: calc(var(--pico-block-spacing-horizontal) * -0.5);
|
||||
margin-right: calc(var(--pico-block-spacing-horizontal) * -0.5);
|
||||
margin-top: calc(var(--pico-block-spacing-horizontal)/2);
|
||||
}
|
||||
|
||||
// margin-right: 4px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
color: var(--pico-muted-color);
|
||||
|
||||
a {
|
||||
color: var(--pico-muted-color);
|
||||
}
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.spacing {
|
||||
margin-bottom: calc(var(--pico-block-spacing-horizontal)/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import '_header.scss';
|
||||
@import '_feed.scss';
|
||||
@import '_footer.scss';
|
||||
@import '_dialog.scss';
|
||||
@import '_rating.scss';
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<script src="{{ cdn_url }}/npm/hyperscript.org@0.9.12"></script>
|
||||
<link rel="stylesheet"
|
||||
href="{{ cdn_url }}/npm/@picocss/pico@2/css/pico.min.css" />
|
||||
<link href="{% sass_src 'scss/neodb.scss' %}"
|
||||
<link href="{% sass_src 'scss/neodb.scss' %}?ooooodro"
|
||||
rel="stylesheet"
|
||||
type="text/css" />
|
||||
<link href="{{ cdn_url }}/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css"
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 3f3f1ee9929f9086aecd15f5e023988f26d1ccef
|
||||
Subproject commit cb53b38b3e8de79233867de3e89459ce820c1e58
|
||||
|
|
@ -9,99 +9,115 @@
|
|||
{% load duration %}
|
||||
{% for event in events %}
|
||||
{% with event.subject_post as post %}
|
||||
<section class="activity post">
|
||||
{% if event.type == "boost" %}
|
||||
<div class="boosted">
|
||||
<i class="fa-solid fa-retweet"
|
||||
title="{{ event.published|naturaldelta }}"></i>
|
||||
<a href="{{ event.subject_identity.url }}"
|
||||
class="nickname"
|
||||
title="@{{ event.subject_identity.handle }}">{{ event.subject_identity.name }}</a>
|
||||
{% trans 'boosted' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div style="display:flex;">
|
||||
<div>
|
||||
<div class="avatar" style="margin:0.6em 0.6em 0.6em 0;">
|
||||
<img src="{{ post.author.icon_uri }}" alt="@{{ post.author.handle }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow:1;">
|
||||
<span class="action">
|
||||
<span class="timestamp">{{ post.published|naturaldelta }}</span>
|
||||
{% if post.piece and post.piece.item and post.piece.item.classname != 'tvepisode' %}
|
||||
<span>
|
||||
{% if post.piece.item.classname == 'podcastepisode' %}
|
||||
<a title="{% trans "play" %}"
|
||||
class="episode"
|
||||
data-uuid="{{ post.piece.item.uuid }}"
|
||||
data-media="{{ post.piece.item.media_url }}"
|
||||
data-cover="{{ post.piece.item.cover_url|default:post.piece.item.parent_item.cover.url }}"
|
||||
data-title="{{ post.piece.item.title }}"
|
||||
data-album="{{ post.piece.item.parent_item.title }}"
|
||||
data-hosts="{{ post.piece.item.parent_item.hosts|join:' / ' }}"
|
||||
{% if request.user.is_authenticated %} data-comment-href="{% url 'journal:comment' post.piece.item.uuid %}" {% endif %}
|
||||
data-position="{{ post.piece.metadata.position | default:0 }}"><i class="fa-solid fa-circle-play"></i></a>
|
||||
{% else %}
|
||||
<a title="{% trans "mark" %}"
|
||||
hx-get="{% url 'journal:mark' post.piece.item.uuid %}?shelf_type=wishlist"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
<i class="fa-regular fa-bookmark"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% include "action_reply_post.html" %}
|
||||
{% include "action_like_post.html" %}
|
||||
{% include "action_boost_post.html" %}
|
||||
{% include "action_open_post.html" %}
|
||||
</span>
|
||||
<span>
|
||||
<a href="{{ post.author.url }}"
|
||||
{% if not post %}
|
||||
<!-- invalid data {{ event.pk }} -->
|
||||
{% else %}
|
||||
<section class="activity post">
|
||||
{% if event.type == "boost" %}
|
||||
<div class="boosted">
|
||||
<i class="fa-solid fa-retweet"
|
||||
title="{{ event.published|naturaldelta }}"></i>
|
||||
<a href="{{ event.subject_identity.url }}"
|
||||
class="nickname"
|
||||
title="@{{ post.author.handle }}">{{ post.author.name }}</a>
|
||||
{% if post.piece and post.piece.classname == 'note' %}
|
||||
{% trans "wrote a note" %}
|
||||
{% endif %}
|
||||
</span>
|
||||
<div>{{ post.summary|default:'' }}</div>
|
||||
<div {% if post.summary or post.sensitive %}class="spoiler" _="on click toggle .revealed on me"{% endif %}>
|
||||
<div class="attachments">
|
||||
{% for attachment in post.attachments.all %}
|
||||
{% if attachment.is_image %}
|
||||
<a href="#img_{{ post.pk }}_{{ loop.index }}">
|
||||
<img src="{{ attachment.thumbnail_url.relative }}"
|
||||
alt="image attachment"
|
||||
class="preview">
|
||||
</a>
|
||||
<a href="#" class="lightbox" id="img_{{ post.pk }}_{{ loop.index }}">
|
||||
<span style="background-image: url('{{ attachment.full_url.relative }}')"></span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if post.piece and post.piece.classname == 'note' %}
|
||||
<blockquote class="tldr"
|
||||
_="on click toggle .tldr on me"
|
||||
style="margin:0;
|
||||
padding-top:0;
|
||||
padding-bottom:0">
|
||||
{{ post.content|bleach:"a,p,span,br,div,img"|default:"" }}
|
||||
</blockquote>
|
||||
{% else %}
|
||||
{{ post.content|bleach:"a,p,span,br,div,img"|default:"" }}
|
||||
{% endif %}
|
||||
title="@{{ event.subject_identity.handle }}">{{ event.subject_identity.name }}</a>
|
||||
{% trans 'boosted' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div style="display:flex;">
|
||||
<div>
|
||||
<div class="avatar" style="margin:0.6em 0.6em 0.6em 0;">
|
||||
<a href="{{ post.author.url }}">
|
||||
<img src="{{ post.author.icon_uri }}" alt="@{{ post.author.handle }}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow:1;">
|
||||
<span class="action">
|
||||
<span class="timestamp">{{ post.published|naturaldelta }}</span>
|
||||
{% if post.piece and post.piece.item and post.piece.item.class_name != 'tvepisode' %}
|
||||
<span>
|
||||
{% if post.piece.item.class_name == 'podcastepisode' %}
|
||||
<a title="{% trans "play" %}"
|
||||
class="episode"
|
||||
data-uuid="{{ post.piece.item.uuid }}"
|
||||
data-media="{{ post.piece.item.media_url }}"
|
||||
data-cover="{{ post.piece.item.cover_url|default:post.piece.item.parent_item.cover.url }}"
|
||||
data-title="{{ post.piece.item.title }}"
|
||||
data-album="{{ post.piece.item.parent_item.title }}"
|
||||
data-hosts="{{ post.piece.item.parent_item.hosts|join:' / ' }}"
|
||||
{% if request.user.is_authenticated %} data-comment-href="{% url 'journal:comment' post.piece.item.uuid %}" {% endif %}
|
||||
data-position="{{ post.piece.metadata.position | default:0 }}"><i class="fa-solid fa-circle-play"></i></a>
|
||||
{% else %}
|
||||
<a title="{% trans "mark" %}"
|
||||
hx-get="{% url 'journal:mark' post.piece.item.uuid %}?shelf_type=wishlist"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
<i class="fa-regular fa-bookmark"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% include "action_reply_post.html" %}
|
||||
{% include "action_like_post.html" %}
|
||||
{% include "action_boost_post.html" %}
|
||||
{% include "action_open_post.html" %}
|
||||
</span>
|
||||
<span>
|
||||
<a href="{{ post.author.url }}"
|
||||
class="nickname"
|
||||
title="@{{ post.author.handle }}">{{ post.author.name }}</a>
|
||||
{% if post.piece and post.piece.classname == 'note' %}
|
||||
{% trans "wrote a note" %}
|
||||
{% endif %}
|
||||
</span>
|
||||
<div>{{ post.summary|default:'' }}</div>
|
||||
<div style="display:flex;">
|
||||
<div style="flex-grow:1"
|
||||
{% if post.summary or post.sensitive %}class="spoiler" _="on click toggle .revealed on me"{% endif %}>
|
||||
<div class="attachments">
|
||||
{% for attachment in post.attachments.all %}
|
||||
{% if attachment.is_image %}
|
||||
<a href="#img_{{ post.pk }}_{{ loop.index }}">
|
||||
<img src="{{ attachment.thumbnail_url.relative }}"
|
||||
alt="image attachment"
|
||||
class="preview">
|
||||
</a>
|
||||
<a href="#" class="lightbox" id="img_{{ post.pk }}_{{ loop.index }}">
|
||||
<span style="background-image: url('{{ attachment.full_url.relative }}')"></span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if post.piece and post.piece.classname == 'note' %}
|
||||
<blockquote class="tldr"
|
||||
_="on click toggle .tldr on me"
|
||||
style="margin:0;
|
||||
padding-top:0;
|
||||
padding-bottom:0">
|
||||
{{ post.content|bleach:"a,p,span,br,div,img"|default:"" }}
|
||||
</blockquote>
|
||||
{% else %}
|
||||
{{ post.content|bleach:"a,p,span,br,div,img"|default:"" }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="cover">
|
||||
{% if post.piece %}
|
||||
{% if post.piece.item %}
|
||||
{# <article>{% include "_item_card.html" with item=post.piece.item allow_embed=1 %}</article> #}
|
||||
<a href="{{ post.piece.item.url }}" title="{{ post.piece.item.title }}">
|
||||
<img src="{{ post.piece.item.cover_image_url }}"
|
||||
title="{{ post.piece.item.title }}"
|
||||
alt="cover">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if post.piece %}
|
||||
{% if post.piece.item %}
|
||||
<article>{% include "_item_card.html" with item=post.piece.item allow_embed=1 %}</article>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="replies_{{ post.pk }}"></div>
|
||||
</section>
|
||||
<div id="replies_{{ post.pk }}"></div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% if forloop.last %}
|
||||
<div class="htmx-indicator"
|
||||
|
|
|
|||
|
|
@ -59,10 +59,28 @@ def feed(request):
|
|||
@require_http_methods(["GET"])
|
||||
def data(request):
|
||||
since_id = int(request.GET.get("last", 0))
|
||||
events = TimelineEvent.objects.filter(
|
||||
identity_id=request.user.identity.pk,
|
||||
type__in=[TimelineEvent.Types.post, TimelineEvent.Types.boost],
|
||||
).order_by("-id")
|
||||
events = (
|
||||
TimelineEvent.objects.filter(
|
||||
identity_id=request.user.identity.pk,
|
||||
type__in=[TimelineEvent.Types.post, TimelineEvent.Types.boost],
|
||||
)
|
||||
.order_by("-id")
|
||||
.select_related(
|
||||
"subject_post",
|
||||
"subject_post__author",
|
||||
"subject_post__author__domain",
|
||||
"subject_identity",
|
||||
"subject_identity__domain",
|
||||
"subject_post_interaction",
|
||||
"subject_post_interaction__identity",
|
||||
"subject_post_interaction__identity__domain",
|
||||
)
|
||||
.prefetch_related(
|
||||
"subject_post__attachments",
|
||||
"subject_post__mentions",
|
||||
"subject_post__emojis",
|
||||
)
|
||||
)
|
||||
if since_id:
|
||||
events = events.filter(id__lt=since_id)
|
||||
return render(request, "feed_events.html", {"events": events})
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue