tweak collection page

This commit is contained in:
Your Name 2023-05-21 10:24:08 -04:00 committed by Henri Dickson
parent 8d49ff4bf2
commit 2db748dff6
5 changed files with 80 additions and 84 deletions

View file

@ -11,7 +11,7 @@
{% load user_actions %}
{% load duration %}
<!DOCTYPE html>
<html lang="en" id="item-page">
<html lang="en" class="item-page">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

View file

@ -1,4 +1,4 @@
#item-page {
.item-page {
.muted {
color: var(--pico-muted-color);

View file

@ -29,7 +29,7 @@
}
}
#item-page {
.item-page {
main {
width: 100vw;
padding: calc(1*var(--pico-spacing)) calc(3*var(--pico-spacing));
@ -188,7 +188,7 @@
margin: var(--pico-spacing);
}
>div:has(article) {
>div:has(>article) {
margin: 0;
}

View file

@ -29,64 +29,63 @@
{% include "_header.html" %}
<main>
<div class="grid__main">
<article>
<header>
<hgroup>
<h3>
<div class="action">
{% if request.user.is_authenticated %}
<span>
{% liked_piece collection as liked %}
{% include 'like_stats.html' with liked=liked piece=collection label='关注' icon='fa-bookmark' %}
</span>
<span>{% include '_feature_stats.html' with featured=featured_since %}</span>
<span>
<a href="#"
hx-get="{% url 'journal:collection_share' collection.uuid %}"
hx-target="body"
hx-swap="beforeend"
title="分享到联邦网络"><i class="fa-solid fa-share-nodes"></i></a>
</span>
{% endif %}
</div>
{{ collection.title }}
{% if collection.visibility > 0 %}<small><i class="fa-solid fa-lock"></i></small>{% endif %}
</h3>
</hgroup>
<div class="owner-info">
<div class="owner">
<span class="avatar">
<img src="{{ collection.owner.mastodon_account.avatar }}"
alt="{{ collection.owner.username }}">
</span>
</div>
<div class="info">
<p>
<a href="{% url 'journal:user_profile' collection.owner.mastodon_username %}">{{ collection.owner.mastodon_account.display_name }}</a>
<span class="handler">@{{ collection.owner.mastodon_username }}</span>
</p>
<p>
{% for cat, count in collection.get_summary.items %}
{% if count %}<span>{{ count }} {{ cat|prural_items }}</span>&nbsp;&nbsp;{% endif %}
{% endfor %}
</p>
{% if featured_since %}
<p>
<progress value="{{ stats.percentage }}"
max="100"
title="{{ stats.percentage }}%" />
</p>
<section>
<hgroup>
<h3>
<div class="action">
{% if request.user.is_authenticated %}
<span>
{% liked_piece collection as liked %}
{% include 'like_stats.html' with liked=liked piece=collection label='关注' icon='fa-bookmark' %}
</span>
<span>{% include '_feature_stats.html' with featured=featured_since %}</span>
<span>
<a href="#"
hx-get="{% url 'journal:collection_share' collection.uuid %}"
hx-target="body"
hx-swap="beforeend"
title="分享到联邦网络"><i class="fa-solid fa-share-nodes"></i></a>
</span>
{% endif %}
<div class="markdown-content">{{ collection.html | safe }}</div>
</div>
<div class="more">
<div style="text-align: center;">
<img src="{{ collection.cover|thumb:'normal' }}" alt="">
</div>
{{ collection.title }}
{% if collection.visibility > 0 %}<small><i class="fa-solid fa-lock"></i></small>{% endif %}
</h3>
</hgroup>
<div class="owner-info">
<div class="owner">
<span class="avatar">
<img src="{{ collection.owner.mastodon_account.avatar }}"
alt="{{ collection.owner.username }}">
</span>
</div>
<div class="info">
<p>
<a href="{% url 'journal:user_profile' collection.owner.mastodon_username %}">{{ collection.owner.mastodon_account.display_name }}</a>
<span class="handler">@{{ collection.owner.mastodon_username }}</span>
</p>
<p>
{% for cat, count in collection.get_summary.items %}
{% if count %}<span>{{ count }} {{ cat|prural_items }}</span>&nbsp;&nbsp;{% endif %}
{% endfor %}
</p>
{% if featured_since %}
<p>
<progress value="{{ stats.percentage }}"
max="100"
title="{{ stats.percentage }}%" />
</p>
{% endif %}
<div class="markdown-content">{{ collection.html | safe }}</div>
</div>
<div class="more">
<div style="text-align: center;">
<img src="{{ collection.cover|thumb:'normal' }}" alt="">
</div>
</div>
</header>
{% comment %}
</div>
</section>
{% comment %}
{% if featured_since %}
<section style="min-width:10vw;">
<div class="donut" style="background: conic-gradient(#7CBDFE 0deg {{ stats.complete_deg }}deg, #B4D2A5 {{ stats.complete_deg }}deg {{ stats.complete_deg|add:stats.progress_deg }}deg, #ccc {{ stats.complete_deg|add:stats.progress_deg }}deg 1deg );"><div class="hole"><div class="text">
@ -108,28 +107,27 @@
</div>
</section>
{% endif %}
{% endcomment %}
<section>
<div class="entity-list"
hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}"
hx-trigger="load"></div>
</section>
<footer>
<div class="action">
{% if request.user == collection.owner %}
<span>
<a href="{% url 'journal:collection_edit' collection.uuid %}">{% trans '编辑' %}</a>
</span>
<span>
<a href="{% url 'journal:collection_delete' collection.uuid %}">{% trans '删除' %}</a>
</span>
{% elif editable %}
<a href="{% url 'journal:collection_edit' collection.uuid %}">{% trans '协助整理' %}</a>
{% endif %}
</div>
<span>创建于 {{ collection.created_time | date }}</span>
</footer>
</article>
{% endcomment %}
<section>
<div class="entity-list"
hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}"
hx-trigger="load"></div>
</section>
<section>
<div class="action">
{% if request.user == collection.owner %}
<span>
<a href="{% url 'journal:collection_edit' collection.uuid %}">{% trans '编辑' %}</a>
</span>
<span>
<a href="{% url 'journal:collection_delete' collection.uuid %}">{% trans '删除' %}</a>
</span>
{% elif editable %}
<a href="{% url 'journal:collection_edit' collection.uuid %}">{% trans '协助整理' %}</a>
{% endif %}
</div>
<span>创建于 {{ collection.created_time | date }}</span>
</section>
</div>
{% include "_sidebar.html" with user=collection.owner show_profile=1 %}
</main>

View file

@ -39,7 +39,7 @@
{% endif %}
</span>
{% include "_item_card.html" with item=item %}
{% if mark or collection_member %}
{% if mark or collection_edit or collection_member.note %}
<footer>
{% if mark %}
<section>
@ -104,9 +104,7 @@
{% endif %}
{% endif %}
{% if collection_member %}
<p class="entity-marks__mark-content"
hx-target="this"
hx-swap="innerHTML">
<p hx-target="this" hx-swap="innerHTML">
{% if collection_edit %}
<span class="action">
<a title="修改备注"