all edit on the item page
This commit is contained in:
qilinz
Henri Dickson
parent
05b6e07a2b
commit
79e13b7546
5 changed files with 99 additions and 146 deletions
|
|
@ -159,12 +159,7 @@
|
|||
标记历史
|
||||
{% if mark.logs %}
|
||||
<small>
|
||||
<a href="{% url 'journal:mark_history' item.uuid %}"
|
||||
class="item-mark-icon"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
</a>
|
||||
<a href="#" onclick="toggleEditing()" id="edit">编辑</a>
|
||||
</small>
|
||||
{% endif %}
|
||||
</h5>
|
||||
|
|
@ -172,12 +167,72 @@
|
|||
<ul class="log-list">
|
||||
{% for log in mark.logs %}
|
||||
<li>
|
||||
<span class="log-info">{{ log.timestamp|date }}</span>
|
||||
<span class="log-info">{{ log.action_label }}</span>
|
||||
<form id="mark_log_delete_{{ log.id }}"
|
||||
action="{% url 'journal:mark_log' item.uuid log.id %}"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<div class="log-info-container">
|
||||
<span class="log-info">{{ log.timestamp|date }}</span>
|
||||
<span class="log-info">{{ log.action_label }}</span>
|
||||
<input type="hidden" name="delete" value="1">
|
||||
<input type="hidden" name="log_id" id="{{ log.id }}">
|
||||
<span class="hidden-command log-info" style="display:none">
|
||||
<a href="javascript:void(0)"
|
||||
onclick="deleteLog('{{ log.id }}')"
|
||||
class="item-mark-icon">
|
||||
<i class="fa-solid fa-square-xmark"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<footer class="log-command">
|
||||
<span class="action hidden-command " style="display:none">
|
||||
<form id="mark_delete"
|
||||
action="{% url 'journal:mark' mark.item.uuid %}"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="delete" value="1">
|
||||
<input type="hidden" name="silence" value="True">
|
||||
<a href="#" onclick="deleteAllLog(event)">清空标记历史</a>
|
||||
</form>
|
||||
</span>
|
||||
</footer>
|
||||
{% else %}
|
||||
<span class="empty">暂无</span>
|
||||
{% endif %}
|
||||
</section>
|
||||
<script>
|
||||
function toggleEditing() {
|
||||
var buttons = document.getElementsByClassName("hidden-command");
|
||||
var toggle = document.getElementById("edit");
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
var button = buttons[i];
|
||||
if (button.style.display === "none") {
|
||||
button.style.display = "block";
|
||||
toggle.innerHTML = "取消编辑";
|
||||
} else {
|
||||
button.style.display = "none";
|
||||
toggle.innerHTML = "编辑";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function deleteAllLog(event) {
|
||||
event.preventDefault(); // Prevent the default link behavior
|
||||
|
||||
const confirmation = confirm('确认清空标记历史？当前标记也会一并删除');
|
||||
if (confirmation) {
|
||||
const form = document.getElementById('mark_delete');
|
||||
form.submit(); // Submit the form
|
||||
}
|
||||
};
|
||||
|
||||
function deleteLog(logId) {
|
||||
const form = document.getElementById(`mark_log_delete_${logId}`);
|
||||
form.submit(); // Submit the form
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,39 +15,48 @@
|
|||
// source: https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem
|
||||
ul.log-list {
|
||||
li {
|
||||
list-style: disc;
|
||||
// You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page
|
||||
position: relative;
|
||||
list-style: disc;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 0.8em;
|
||||
|
||||
// Use padding to space things out rather than margins as the line would get broken up otherwise
|
||||
margin: 0;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 0.8em;
|
||||
}
|
||||
// The actual line being placed before each list item, tweak width and color as appropriate
|
||||
li:before {
|
||||
background-color: var(--pico-color);
|
||||
width: 2px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -0.75em;
|
||||
}
|
||||
|
||||
// Start the line further down on the first list item
|
||||
li:first-child:before {
|
||||
top: 15px;
|
||||
// The actual line being placed before each list item, tweak width and color as appropriate
|
||||
&:before {
|
||||
background-color: var(--pico-color);
|
||||
width: 2px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -0.75em;
|
||||
}
|
||||
|
||||
// Stop the line short on the final list item
|
||||
li:last-child:before {
|
||||
height: 15px;
|
||||
}
|
||||
// Start the line further down on the first list item
|
||||
&:first-child:before {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
// Stop the line short on the final list item
|
||||
&:last-child:before {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
// Hide the line when there's only one item
|
||||
&:only-child:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-info {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.log-info-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer.log-command {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
{% load static %}
|
||||
{% load i18n %}
|
||||
{% load admin_url %}
|
||||
{% load mastodon %}
|
||||
{% load oauth_token %}
|
||||
{% load truncate %}
|
||||
{% load thumb %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" class="content-page">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ site_name }} - {{ item.title }} - {% trans '标记历史' %}</title>
|
||||
{% include "common_libs.html" with jquery=0 v2=1 %}
|
||||
<style type="text/css">#id_visibility, #id_visibility li {padding-left:0; margin-bottom:0; display: inline-block !important;}</style>
|
||||
</head>
|
||||
<body>
|
||||
{% include "_header.html" %}
|
||||
<main>
|
||||
<div>
|
||||
<h3>标记历史</h3>
|
||||
{% if mark.logs %}
|
||||
<article>
|
||||
<ul class="log-list">
|
||||
{% for log in mark.logs %}
|
||||
<li>
|
||||
<form id="mark_log_delete_{{ log.id }}"
|
||||
action="{% url 'journal:mark_log' item.uuid log.id %}"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<span class="log-info">{{ log.timestamp|date }}</span>
|
||||
<span class="log-info">{{ log.action_label }}</span>
|
||||
<input type="hidden" name="delete" value="1">
|
||||
<input type="hidden" name="log_id" id="{{ log.id }}">
|
||||
{% if editing %}
|
||||
<a href="javascript:$('#mark_log_delete_{{ log.id }}').submit()"
|
||||
class="delete">
|
||||
<i class="fa-solid fa-square-xmark"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<footer class="log-command">
|
||||
<span class="action">
|
||||
{% if not editing %}
|
||||
<a href="{% url 'journal:mark_history_edit' item.uuid %}">{% trans '编辑' %}</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="action">
|
||||
<form id="mark_delete"
|
||||
action="{% url 'journal:mark' mark.item.uuid %}"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="delete" value="1">
|
||||
<input type="hidden" name="silence" value="True">
|
||||
<a href="#" onclick="deleteAllLog(event)">清空标记历史</a>
|
||||
</form>
|
||||
</span>
|
||||
</footer>
|
||||
</article>
|
||||
{% endif %}
|
||||
<br>
|
||||
<a href="{% url 'catalog:retrieve' item.url_path item.uuid %}">返回条目</a>
|
||||
</div>
|
||||
<aside>
|
||||
{% include "_sidebar_item.html" with item=item %}
|
||||
</aside>
|
||||
</main>
|
||||
<script>
|
||||
$(".spoiler").on('click', function(){
|
||||
$(this).toggleClass('revealed');
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
function deleteAllLog(event) {
|
||||
event.preventDefault(); // Prevent the default link behavior
|
||||
|
||||
const confirmation = confirm('确认清空标记历史？当前标记也会一并删除');
|
||||
if (confirmation) {
|
||||
const form = document.getElementById('mark_delete');
|
||||
form.submit(); // Submit the form
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% include "_footer.html" %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -23,8 +23,6 @@ urlpatterns = [
|
|||
path("mark/<str:item_uuid>", mark, name="mark"),
|
||||
path("comment/<str:item_uuid>", comment, name="comment"),
|
||||
path("mark_log/<str:item_uuid>/<str:log_id>", mark_log, name="mark_log"),
|
||||
path("mark_history/<str:item_uuid>", mark_history, name="mark_history"),
|
||||
path("mark_history/edit/<str:item_uuid>", mark_history, name="mark_history_edit"),
|
||||
path(
|
||||
"add_to_collection/<str:item_uuid>", add_to_collection, name="add_to_collection"
|
||||
),
|
||||
|
|
|
|||
|
|
@ -274,26 +274,6 @@ def mark_log(request, item_uuid, log_id):
|
|||
raise BadRequest()
|
||||
|
||||
|
||||
@login_required
|
||||
def mark_history(request, item_uuid):
|
||||
item = get_object_or_404(Item, uid=get_uuid_or_404(item_uuid))
|
||||
mark = Mark(request.user, item)
|
||||
editing = False
|
||||
if request.path.startswith("/mark_history/edit/"):
|
||||
editing = True
|
||||
|
||||
if request.method == "GET":
|
||||
return render(
|
||||
request,
|
||||
"mark_history.html",
|
||||
{
|
||||
"item": item,
|
||||
"mark": mark,
|
||||
"editing": editing,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
@login_required
|
||||
def comment(request, item_uuid):
|
||||
item = get_object_or_404(Item, uid=get_uuid_or_404(item_uuid))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue