lib.itmens/catalog/templates/discover.html
2024-12-26 13:18:41 -05:00

190 lines
7.8 KiB
HTML

{% load static %}
{% load i18n %}
{% load mastodon %}
{% load thumb %}
<!DOCTYPE html>
<html lang="zh" class="classic-page nav-page-discover">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="{{ site_name }}">
<meta name="description"
property="og:description"
content="{{ site_description }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ site_url }}">
<meta property="og:image" content="{{ site_logo }}">
<meta property="og:site_name" content="{{ site_name }}">
<title>{{ site_name }} - {% trans 'Discover' %}</title>
{% include "common_libs.html" %}
<script src="{{ cdn_url }}/npm/shikwasa@2.2.1/dist/shikwasa.min.js"></script>
<link href="{{ cdn_url }}/npm/shikwasa@2.2.1/dist/style.min.css"
rel="stylesheet"></link>
<script src="{% static 'js/podcast.js' %}"></script>
</head>
<body>
{% include "_header.html" %}
<script>
function _scroll_left(el){
el.scrollBy(0-el.offsetWidth, 0);
}
function _scroll_right(el){
el.scrollBy(el.offsetWidth, 0);
}
</script>
<main>
<div class="grid__main">
<div class="sortable">
{% for gallery in gallery_list %}
<section class="entity-sort shelf"
id="{{ gallery.name }}"
{% if not gallery.items %}style="display:none;"{% endif %}>
<span class="action">
<span>
<a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
</span>
<span>
<a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
</span>
</span>
<h5>{{ gallery.category.label }}</h5>
<ul class="cards">
{% for item in gallery.items %}
<li class="card">
<a href="{{ item.url }}" title="{{ item.display_title }}">
<img src="{{ item.cover|thumb:'normal' }}"
alt="{{ item.display_title }}"
loading="lazy">
<div class="card-title">{{ item.display_title }}</div>
</a>
</li>
{% endfor %}
</ul>
</section>
{% endfor %}
<section class="entity-sort shelf"
id="featured_collections"
{% if not featured_collections %}style="display:none;"{% endif %}>
<span class="action">
<span>
<a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
</span>
<span>
<a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
</span>
</span>
<h5>{% trans "Collections" %}</h5>
<ul class="cards">
{% for item in featured_collections %}
<li class="card">
<a href="{{ item.url }}" title="{{ item.display_title }}">
<img src="{{ item.cover|thumb:'normal' }}"
alt="{{ item.title }}"
loading="lazy">
<div class="card-title">{{ item.title }}</div>
</a>
</li>
{% endfor %}
</ul>
</section>
</div>
{% if request.user.is_authenticated %}
<div class="entity-sort-control">
<div class="entity-sort-control__button" id="sortEditButton">
<span class="entity-sort-control__text" id="sortEditText">{% trans 'edit layout' %}</span>
<span class="entity-sort-control__text"
id="sortSaveText"
style="display: none">{% trans 'save' %}</span>
<span class="icon-edit" id="sortEditIcon">
<i class="fa-solid fa-pencil"></i>
</span>
<span class="icon-save" id="sortSaveIcon" style="display: none;">
<i class="fa-regular fa-floppy-disk"></i>
</span>
</div>
<div class="entity-sort-control__button"
id="sortExitButton"
style="display: none">
<span class="entity-sort-control__text">{% trans 'cancel' %}</span>
</div>
</div>
<div class="entity-sort-control__button entity-sort-control__button--float-right"
id="toggleDisplayButtonTemplate"
style="display: none">
<span class="showText" style="display: none;">{% trans 'show' %}</span>
<span class="hideText" style="display: none;">{% trans 'hide' %}</span>
</div>
<form action="{% url 'users:set_layout' %}" method="post" id="sortForm">
{% csrf_token %}
<input type="hidden" name="name" value="discover">
<input type="hidden" name="layout">
</form>
<script src="{{ cdn_url }}/npm/html5sortable@0.13.3/dist/html5sortable.min.js"
crossorigin="anonymous"></script>
<script src="{% static 'js/sort_layout.js' %}"></script>
{{ layout|json_script:"layout-data" }}
<script>
const initialLayoutData = JSON.parse(document.getElementById('layout-data').textContent);
// initialize sort element visibility and order
initialLayoutData.forEach(elem => {
// set visiblity
$('#' + elem.id).data('visibility', elem.visibility);
if (!elem.visibility) {
$('#' + elem.id).hide();
}
// order
$('#' + elem.id).appendTo('.sortable');
});
</script>
{% endif %}
</div>
{% if request.user.is_authenticated %}
<aside class="grid__aside sidebar">
{% if request.user.unread_announcements %}
<section class="announcement">
<article>
<details id="section-announcements" class="auto-keep-collapse" open>
<summary>{% trans "Unread Announcements" %}</summary>
{% for ann in request.user.unread_announcements %}<div>{{ ann.html }}</div>{% endfor %}
<form action="{% url 'users:mark_announcements_read' %}" method="post">
{% csrf_token %}
<input type="submit"
class="secondary outline"
value="{% trans 'mark all as read' %}">
</form>
</details>
</article>
</section>
{% endif %}
<section>
<article>
<details id="section-popular-tags" class="auto-keep-collapse">
<summary>{% trans 'Popular Tags' %}</summary>
<div class="tag-list">
{% for t in popular_tags %}
<span>
<a href="{% url 'catalog:search' %}?tag={{ t|urlencode }}">{{ t }}</a>
</span>
{% empty %}
<div class="empty">{% trans "nothing so far." %}</div>
{% endfor %}
</div>
</details>
</article>
</section>
<section>
<article>
<details id="section-popular-posts" class="auto-keep-collapse" open>
<summary>{% trans 'Recent Posts' %}</summary>
<div style="font-size:80%">{% include "posts.html" with posts=popular_posts %}</div>
</details>
</article>
</section>
</aside>
{% else %}
{% include "_sidebar_anonymous.html" %}
{% endif %}
</main>
{% include "_footer.html" %}
</body>
</html>