Itmens/lib.itmens
Itmens/lib.itmens
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

adjust feed

Browse source
This commit is contained in:
Your Name 2024-06-18 09:11:06 -04:00 • committed by Henri Dickson
parent 3bf583930e
commit e40121f400
6 changed files with 146 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
common/static/scss/_feed.scss
View file

@ -1,87 +1,23 @@
.feed-page { .feed-page {
.feed { .feed {
word-break: break-word; .post {
.cover {
.avatar { img {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px); max-width:6em;
width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px); max-height:12em;
margin:1em;
img { box-shadow: var(--pico-card-box-shadow);
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);
@media (max-width: 768px) { @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
common/static/scss/neodb.scss
View file

@ -1,4 +1,5 @@
@import '_header.scss'; @import '_header.scss';
@import '_feed.scss';
@import '_footer.scss'; @import '_footer.scss';
@import '_dialog.scss'; @import '_dialog.scss';
@import '_rating.scss'; @import '_rating.scss';

2
common/templates/common_libs.html
View file

@ -21,7 +21,7 @@
<script src="{{ cdn_url }}/npm/hyperscript.org@0.9.12"></script> <script src="{{ cdn_url }}/npm/hyperscript.org@0.9.12"></script>
<link rel="stylesheet" <link rel="stylesheet"
href="{{ cdn_url }}/npm/@picocss/pico@2/css/pico.min.css" /> 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" rel="stylesheet"
type="text/css" /> type="text/css" />
<link href="{{ cdn_url }}/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" <link href="{{ cdn_url }}/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css"

2
neodb-takahe

@ -1 +1 @@
Subproject commit 3f3f1ee9929f9086aecd15f5e023988f26d1ccef Subproject commit cb53b38b3e8de79233867de3e89459ce820c1e58

196
social/templates/feed_events.html
View file

@ -9,99 +9,115 @@
{% load duration %} {% load duration %}
{% for event in events %} {% for event in events %}
{% with event.subject_post as post %} {% with event.subject_post as post %}
<section class="activity post"> {% if not post %}
{% if event.type == "boost" %} <!-- invalid data {{ event.pk }} -->
<div class="boosted"> {% else %}
<i class="fa-solid fa-retweet" <section class="activity post">
title="{{ event.published|naturaldelta }}"></i> {% if event.type == "boost" %}
<a href="{{ event.subject_identity.url }}" <div class="boosted">
class="nickname" <i class="fa-solid fa-retweet"
title="@{{ event.subject_identity.handle }}">{{ event.subject_identity.name }}</a> title="{{ event.published|naturaldelta }}"></i>
{% trans 'boosted' %} <a href="{{ event.subject_identity.url }}"
</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 }}"
class="nickname" class="nickname"
title="@{{ post.author.handle }}">{{ post.author.name }}</a> title="@{{ event.subject_identity.handle }}">{{ event.subject_identity.name }}</a>
{% if post.piece and post.piece.classname == 'note' %} {% trans 'boosted' %}
{% trans "wrote a note" %} </div>
{% endif %} {% endif %}
</span> <div style="display:flex;">
<div>{{ post.summary|default:'' }}</div> <div>
<div {% if post.summary or post.sensitive %}class="spoiler" _="on click toggle .revealed on me"{% endif %}> <div class="avatar" style="margin:0.6em 0.6em 0.6em 0;">
<div class="attachments"> <a href="{{ post.author.url }}">
{% for attachment in post.attachments.all %} <img src="{{ post.author.icon_uri }}" alt="@{{ post.author.handle }}">
{% if attachment.is_image %} </a>
<a href="#img_{{ post.pk }}_{{ loop.index }}"> </div>
<img src="{{ attachment.thumbnail_url.relative }}" </div>
alt="image attachment" <div style="flex-grow:1;">
class="preview"> <span class="action">
</a> <span class="timestamp">{{ post.published|naturaldelta }}</span>
<a href="#" class="lightbox" id="img_{{ post.pk }}_{{ loop.index }}"> {% if post.piece and post.piece.item and post.piece.item.class_name != 'tvepisode' %}
<span style="background-image: url('{{ attachment.full_url.relative }}')"></span> <span>
</a> {% if post.piece.item.class_name == 'podcastepisode' %}
{% endif %} <a title="{% trans "play" %}"
{% endfor %} class="episode"
</div> data-uuid="{{ post.piece.item.uuid }}"
{% if post.piece and post.piece.classname == 'note' %} data-media="{{ post.piece.item.media_url }}"
<blockquote class="tldr" data-cover="{{ post.piece.item.cover_url|default:post.piece.item.parent_item.cover.url }}"
_="on click toggle .tldr on me" data-title="{{ post.piece.item.title }}"
style="margin:0; data-album="{{ post.piece.item.parent_item.title }}"
padding-top:0; data-hosts="{{ post.piece.item.parent_item.hosts|join:' / ' }}"
padding-bottom:0"> {% if request.user.is_authenticated %} data-comment-href="{% url 'journal:comment' post.piece.item.uuid %}" {% endif %}
{{ post.content|bleach:"a,p,span,br,div,img"|default:"" }} data-position="{{ post.piece.metadata.position | default:0 }}"><i class="fa-solid fa-circle-play"></i></a>
</blockquote> {% else %}
{% else %} <a title="{% trans "mark" %}"
{{ post.content|bleach:"a,p,span,br,div,img"|default:"" }} hx-get="{% url 'journal:mark' post.piece.item.uuid %}?shelf_type=wishlist"
{% endif %} 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> </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> <div id="replies_{{ post.pk }}"></div>
<div id="replies_{{ post.pk }}"></div> </section>
</section> {% endif %}
{% endwith %} {% endwith %}
{% if forloop.last %} {% if forloop.last %}
<div class="htmx-indicator" <div class="htmx-indicator"

26
social/views.py
View file

@ -59,10 +59,28 @@ def feed(request):
@require_http_methods(["GET"]) @require_http_methods(["GET"])
def data(request): def data(request):
since_id = int(request.GET.get("last", 0)) since_id = int(request.GET.get("last", 0))
events = TimelineEvent.objects.filter( events = (
identity_id=request.user.identity.pk, TimelineEvent.objects.filter(
type__in=[TimelineEvent.Types.post, TimelineEvent.Types.boost], identity_id=request.user.identity.pk,
).order_by("-id") 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: if since_id:
events = events.filter(id__lt=since_id) events = events.filter(id__lt=since_id)
return render(request, "feed_events.html", {"events": events}) return render(request, "feed_events.html", {"events": events})