list user comment ui
This commit is contained in:
Your Name
Henri Dickson
parent
cd2081a6af
commit
60ac03a951
6 changed files with 192 additions and 138 deletions
|
|
@ -13,7 +13,7 @@
|
|||
{% if item.episodes.all %}
|
||||
<span class="season-number"><a class="current">全部</a></span>
|
||||
{% for ep in item.episodes.all %}
|
||||
<span class="season-number">
|
||||
<span class="season-number" id="ci_{{ ep.uuid }}">
|
||||
<a hx-swap="innerHTML"
|
||||
hx-get="{% url "catalog:comments_by_episode" item.url_path item.uuid %}?episode_uuid={{ ep.uuid }}"
|
||||
hx-target="#comments">第{{ ep.episode_number }}集</a>
|
||||
|
|
@ -24,6 +24,13 @@
|
|||
{% endif %}
|
||||
</small>
|
||||
</p>
|
||||
<script defer>
|
||||
$(function(){
|
||||
window.cil.forEach(function(uuid){
|
||||
$('#ci_'+uuid).addClass('marked');
|
||||
})
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% for comment in comments %}
|
||||
{% if forloop.counter <= 10 %}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
hx-target="#comments">全部</a>
|
||||
</span>
|
||||
{% for ep in item.episodes.all %}
|
||||
<span class="season-number">
|
||||
<span class="season-number" id="ci_{{ ep.uuid }}">
|
||||
<a hx-swap="innerHTML"
|
||||
{% if ep.uuid == episode_uuid %} class="current" {% else %} hx-get="{% url "catalog:comments_by_episode" item.url_path item.uuid %}?episode_uuid={{ ep.uuid }}" {% endif %}
|
||||
hx-target="#comments">第{{ ep.episode_number }}集</a>
|
||||
|
|
@ -41,6 +41,13 @@
|
|||
</a>
|
||||
</small>
|
||||
</p>
|
||||
<script defer>
|
||||
$(function(){
|
||||
window.cil.forEach(function(uuid){
|
||||
$('#ci_'+uuid).addClass('marked');
|
||||
})
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% for comment in comments %}
|
||||
{% if forloop.counter <= 10 %}
|
||||
|
|
|
|||
155
catalog/templates/_item_user_data.html
Normal file
155
catalog/templates/_item_user_data.html
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
{% load user_actions %}
|
||||
<section>
|
||||
<h5>
|
||||
我的标签
|
||||
<small>
|
||||
<a href="#"
|
||||
hx-get="{% url 'journal:mark' item.uuid %}"
|
||||
class="item-mark-icon"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
{% if mark.tags %}
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
{% else %}
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</small>
|
||||
</h5>
|
||||
<div class="tag-list">
|
||||
{% for tag in mark.tags %}
|
||||
<span>
|
||||
<a href="{% url 'journal:user_tag_member_list' request.user.mastodon_username tag %}">{{ tag }}</a>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h5>
|
||||
我的短评
|
||||
<small>
|
||||
<a href="#"
|
||||
hx-get="{% url 'journal:mark' item.uuid %}"
|
||||
class="item-mark-icon"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
{% if mark.comment_text %}
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
{% else %}
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</small>
|
||||
</h5>
|
||||
{% if mark.comment %}
|
||||
<span class="action">
|
||||
<span>
|
||||
{% liked_piece mark.comment as liked %}
|
||||
{% include 'like_stats.html' with liked=liked piece=mark.comment %}
|
||||
</span>
|
||||
<span>
|
||||
<a target="_blank"
|
||||
rel="noopener"
|
||||
{% if mark.comment.metadata.shared_link %} href="{{ mark.comment.metadata.shared_link }}" title="打开联邦网络分享链接" {% else %} class="disabled" {% endif %}><i class="fa-solid {% if mark.comment.visibility > 0 %} fa-lock {% else %} fa-globe {% endif %}"></i></a>
|
||||
</span>
|
||||
{% comment %} <span class="timestamp">{{ mark.comment.created_time|date }}</span> {% endcomment %}
|
||||
</span>
|
||||
<p>{{ mark.comment.html|safe }}</p>
|
||||
{% else %}
|
||||
<!-- <span class="empty">暂无</span> -->
|
||||
{% endif %}
|
||||
<script>window.cil=[];</script>
|
||||
{% for comment in child_item_comments %}
|
||||
<script>window.cil.push('{{ comment.item.uuid }}');</script>
|
||||
<span class="action">
|
||||
<span>
|
||||
<a href="#"
|
||||
hx-get="{% url 'journal:comment' comment.item.uuid %}"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend"><i class="fa-solid fa-pen-to-square"></i></a>
|
||||
</span>
|
||||
<span>
|
||||
{% liked_piece comment as liked %}
|
||||
{% include 'like_stats.html' with liked=liked piece=comment %}
|
||||
</span>
|
||||
<span>
|
||||
<a target="_blank"
|
||||
rel="noopener"
|
||||
{% if comment.metadata.shared_link %} href="{{ comment.metadata.shared_link }}" title="打开联邦网络分享链接" {% else %} class="disabled" {% endif %}><i class="fa-solid {% if comment.visibility > 0 %} fa-lock {% else %} fa-globe {% endif %}"></i></a>
|
||||
</span>
|
||||
{% comment %} <span class="timestamp">{{ comment.created_time|date }}</span> {% endcomment %}
|
||||
</span>
|
||||
<p>
|
||||
评<a href="{{ comment.item.url }}">{{ comment.item.title }}</a>: {{ comment.html|safe }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<section>
|
||||
<h5>
|
||||
我的评论
|
||||
<small>
|
||||
{% if review %}
|
||||
<a href="{% url 'journal:review_edit' item.uuid review.uuid %}"
|
||||
class="item-mark-icon">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{% url 'journal:review_create' item.uuid %}"
|
||||
class="item-mark-icon">
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</small>
|
||||
</h5>
|
||||
{% if review %}
|
||||
<span class="action">
|
||||
<span>
|
||||
{% liked_piece mark.review as liked %}
|
||||
{% include 'like_stats.html' with liked=liked piece=mark.review %}
|
||||
</span>
|
||||
<span>
|
||||
<a target="_blank"
|
||||
rel="noopener"
|
||||
{% if mark.review.metadata.shared_link %} href="{{ mark.review.metadata.shared_link }}" title="打<><E68993><EFBFBD>联邦网<E982A6><E7BD91><EFBFBD>分享链接" {% else %} class="disabled" {% endif %}><i class="fa-solid {% if mark.review.visibility > 0 %} fa-lock {% else %} fa-globe {% endif %}"></i></a>
|
||||
</span>
|
||||
<span class="timestamp">{{ mark.review.created_time|date }}</span>
|
||||
</span>
|
||||
<p>
|
||||
<a href="{% url 'journal:review_retrieve' review.uuid %}">{{ review.title }}</a>
|
||||
</p>
|
||||
{% else %}
|
||||
<!-- <span class="empty">暂无</span> -->
|
||||
{% endif %}
|
||||
</section>
|
||||
<section>
|
||||
<h5>
|
||||
我的收藏单
|
||||
<small>
|
||||
<a href="#"
|
||||
hx-get="{% url 'journal:add_to_collection' item.uuid %}"
|
||||
class="edit"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
</a>
|
||||
</small>
|
||||
</h5>
|
||||
<div>
|
||||
{% for c in my_collections %}
|
||||
<p>
|
||||
<a href="{{ c.url }}">{{ c.title }}</a>
|
||||
{% if c.visibility > 0 %}<i class="fa-solid fa-lock"></i>{% endif %}
|
||||
</p>
|
||||
{% empty %}
|
||||
<!-- <span class="empty">暂无</span> -->
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section>
|
||||
<h5>标记历史</h5>
|
||||
<div>
|
||||
{% for log in mark.logs %}{{ log.timestamp|date }} {{ log.action_label }}<br>{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
|
|
@ -106,135 +106,7 @@
|
|||
{% endif %}
|
||||
<div id="item-sidebar" class="right">
|
||||
{% if request.user.is_authenticated %}
|
||||
<section>
|
||||
<h5>
|
||||
我的标签
|
||||
<small>
|
||||
<a href="#"
|
||||
hx-get="{% url 'journal:mark' item.uuid %}"
|
||||
class="item-mark-icon"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
{% if mark.tags %}
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
{% else %}
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</small>
|
||||
</h5>
|
||||
<div class="tag-list">
|
||||
{% for tag in mark.tags %}
|
||||
<span>
|
||||
<a href="{% url 'journal:user_tag_member_list' request.user.mastodon_username tag %}">{{ tag }}</a>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h5>
|
||||
我的短评
|
||||
<small>
|
||||
<a href="#"
|
||||
hx-get="{% url 'journal:mark' item.uuid %}"
|
||||
class="item-mark-icon"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
{% if mark.comment_text %}
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
{% else %}
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</small>
|
||||
</h5>
|
||||
{% if mark.comment %}
|
||||
<span class="action">
|
||||
<span>
|
||||
{% liked_piece mark.comment as liked %}
|
||||
{% include 'like_stats.html' with liked=liked piece=mark.comment %}
|
||||
</span>
|
||||
<span>
|
||||
<a target="_blank"
|
||||
rel="noopener"
|
||||
{% if mark.comment.metadata.shared_link %} href="{{ mark.comment.metadata.shared_link }}" title="打开联邦网络分享链接" {% else %} class="disabled" {% endif %}><i class="fa-solid {% if mark.comment.visibility > 0 %} fa-lock {% else %} fa-globe {% endif %}"></i></a>
|
||||
</span>
|
||||
{% comment %} <span class="timestamp">{{ mark.comment.created_time|date }}</span> {% endcomment %}
|
||||
</span>
|
||||
<p>{{ mark.comment.html|safe }}</p>
|
||||
{% else %}
|
||||
<!-- <span class="empty">暂无</span> -->
|
||||
{% endif %}
|
||||
</section>
|
||||
<section>
|
||||
<h5>
|
||||
我的评论
|
||||
<small>
|
||||
{% if review %}
|
||||
<a href="{% url 'journal:review_edit' item.uuid review.uuid %}"
|
||||
class="item-mark-icon">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{% url 'journal:review_create' item.uuid %}"
|
||||
class="item-mark-icon">
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</small>
|
||||
</h5>
|
||||
{% if review %}
|
||||
<span class="action">
|
||||
<span>
|
||||
{% liked_piece mark.review as liked %}
|
||||
{% include 'like_stats.html' with liked=liked piece=mark.review %}
|
||||
</span>
|
||||
<span>
|
||||
<a target="_blank"
|
||||
rel="noopener"
|
||||
{% if mark.review.metadata.shared_link %} href="{{ mark.review.metadata.shared_link }}" title="打<><E68993><EFBFBD>联邦网<E982A6><E7BD91><EFBFBD>分享链接" {% else %} class="disabled" {% endif %}><i class="fa-solid {% if mark.review.visibility > 0 %} fa-lock {% else %} fa-globe {% endif %}"></i></a>
|
||||
</span>
|
||||
<span class="timestamp">{{ mark.review.created_time|date }}</span>
|
||||
</span>
|
||||
<p>
|
||||
<a href="{% url 'journal:review_retrieve' review.uuid %}">{{ review.title }}</a>
|
||||
</p>
|
||||
{% else %}
|
||||
<!-- <span class="empty">暂无</span> -->
|
||||
{% endif %}
|
||||
</section>
|
||||
<section>
|
||||
<h5>
|
||||
我的收藏单
|
||||
<small>
|
||||
<a href="#"
|
||||
hx-get="{% url 'journal:add_to_collection' item.uuid %}"
|
||||
class="edit"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
</a>
|
||||
</small>
|
||||
</h5>
|
||||
<div>
|
||||
{% for c in my_collections %}
|
||||
<p>
|
||||
<a href="{{ c.url }}">{{ c.title }}</a>
|
||||
{% if c.visibility > 0 %}<i class="fa-solid fa-lock"></i>{% endif %}
|
||||
</p>
|
||||
{% empty %}
|
||||
<!-- <span class="empty">暂无</span> -->
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section>
|
||||
<h5>标记历史</h5>
|
||||
<div>
|
||||
{% for log in mark.logs %}{{ log.timestamp|date }} {{ log.action_label }}<br>{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
{% include "_item_user_data.html" %}
|
||||
{% else %}
|
||||
<section>
|
||||
<p class="empty">
|
||||
|
|
|
|||
|
|
@ -85,10 +85,14 @@ def retrieve(request, item_path, item_uuid):
|
|||
review = None
|
||||
my_collections = []
|
||||
collection_list = []
|
||||
child_item_comments = []
|
||||
shelf_types = [(n[1], n[2]) for n in iter(ShelfTypeNames) if n[0] == item.category]
|
||||
if request.user.is_authenticated:
|
||||
visible = query_visible(request.user)
|
||||
mark = Mark(request.user, item)
|
||||
child_item_comments = Comment.objects.filter(
|
||||
owner=request.user, item__in=item.child_items.all()
|
||||
)
|
||||
review = mark.review
|
||||
my_collections = item.collections.all().filter(owner=request.user)
|
||||
collection_list = (
|
||||
|
|
@ -113,6 +117,7 @@ def retrieve(request, item_path, item_uuid):
|
|||
"focus_item": focus_item,
|
||||
"mark": mark,
|
||||
"review": review,
|
||||
"child_item_comments": child_item_comments,
|
||||
"my_collections": my_collections,
|
||||
"collection_list": collection_list,
|
||||
"shelf_types": shelf_types,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
}
|
||||
|
||||
span.season-number {
|
||||
line-height: 1.2em;
|
||||
|
||||
a {
|
||||
border-radius: calc(var(--pico-spacing)/4);
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -17,14 +19,20 @@
|
|||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&.current {
|
||||
color: var(--pico-form-element-background-color);
|
||||
background: var(--pico-primary);
|
||||
line-height: 1.2em;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.marked a {
|
||||
background: var(--pico-secondary);
|
||||
border: var(--pico-secondary) solid 1px;
|
||||
color: var(--pico-form-element-background-color);
|
||||
}
|
||||
|
||||
a.current {
|
||||
color: var(--pico-form-element-background-color);
|
||||
background: var(--pico-primary);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.muted .fa-lock {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue