107 lines
4.1 KiB
HTML
107 lines
4.1 KiB
HTML
{% load static %}
|
|
{% load i18n %}
|
|
{% load mastodon %}
|
|
<!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 }} - {% trans "Collection" %} - {{ title }} - {% trans "Edit" %}</title>
|
|
{% include "common_libs.html" %}
|
|
<script src="{{ cdn_url }}/npm/html5sortable@0.13.3/dist/html5sortable.min.js"></script>
|
|
<style type="text/css">
|
|
#id_collaborative li, #id_visibility li {display: inline-block !important;}
|
|
.grid__main details {
|
|
margin: 2rem 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{% include "_header.html" %}
|
|
<main>
|
|
<div class="grid__main">
|
|
<h4>
|
|
{% if collection %}
|
|
{% trans "Edit" %} <a href="{{ collection.url }}">{{ collection.title }}</a>
|
|
{% else %}
|
|
{% trans "Create a new collection" %}
|
|
{% endif %}
|
|
</h4>
|
|
<hr>
|
|
<details {% if not collection %}open{% endif %}>
|
|
<summary>{% trans "Title and Description" %}</summary>
|
|
<form class="entity-form markdown-content"
|
|
method="post"
|
|
enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
{{ form }}
|
|
<input class="button" type="submit" value="{% trans 'Save' %}">
|
|
</form>
|
|
{{ form.media }}
|
|
</details>
|
|
{% if collection %}
|
|
<hr>
|
|
<details open>
|
|
<summary>{% trans "Items" %}</summary>
|
|
<section>
|
|
<div id="collection_items"
|
|
class="sortable"
|
|
hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}?edit=1"
|
|
hx-trigger="load"></div>
|
|
</section>
|
|
<form class="entity-form"
|
|
hx-target="#collection_items"
|
|
hx-swap="beforeend"
|
|
hx-post="{% url 'journal:collection_append_item' collection.uuid %}"
|
|
method="post">
|
|
{% csrf_token %}
|
|
<input type="url"
|
|
name="url"
|
|
placeholder="{{ request.scheme }}://{{ request.get_host }}/item/abcd123"
|
|
style="min-width:24rem"
|
|
required>
|
|
<input type="text"
|
|
name="note"
|
|
placeholder="{% trans 'note' %}"
|
|
style="min-width:24rem">
|
|
<input class="button"
|
|
type="submit"
|
|
value="{% trans 'Add an item to this collection' %}">
|
|
</form>
|
|
<script>
|
|
$(function () {
|
|
sortable('.sortable', {
|
|
forcePlaceholderSize: true,
|
|
placeholderClass: 'entity-sort--placeholder',
|
|
hoverClass: 'entity-sort--hover'
|
|
});
|
|
});
|
|
function update_member_order() {
|
|
var member_ids = [];
|
|
$('.sortable>.item-card').each(function () {
|
|
member_ids.push($(this).data('member-id'));
|
|
});
|
|
$('#member_ids').val(member_ids.join(','));
|
|
return true;
|
|
}
|
|
</script>
|
|
<form class="entity-form"
|
|
hx-target="#collection_items"
|
|
hx-post="{% url 'journal:collection_update_member_order' collection.uuid %}"
|
|
onsubmit="return update_member_order()"
|
|
hx-swap="beforeend"
|
|
method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="member_ids" id="member_ids" required>
|
|
<input type="submit"
|
|
class="secondary"
|
|
value="{% trans "Drag and drop to change the order order and click here to save" %}">
|
|
</form>
|
|
</details>
|
|
{% endif %}
|
|
</div>
|
|
{% include "_sidebar.html" with show_profile=1 fold_profile=1 identity=collection.owner|default:request.user.identity %}
|
|
</main>
|
|
{% include "_footer.html" %}
|
|
</body>
|
|
</html>
|