0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request 'Sort films on film page' (#36) from sort-films into main

Browse source 
Reviewed-on: 0x2620/aab21#36
This commit is contained in:
sanj 2021-10-28 16:35:14 +00:00
commit f520d837d6
3 changed files with 67 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/static/css/partials/_film.scss
View file

@ -6,8 +6,15 @@
color: #ee0;
text-decoration: none;
}
select {
font-size: 18px;
font-family: "noto_sans", sans-serif;
padding: calc(var(--spacing) /4) var(--spacing);
}
.film {
margin-bottom: var(--spacing-2);
margin-top: var(--spacing-2);
h1 {
font-weight: bold;
font-size: 20px;

22
app/static/js/films.js Normal file
View file

@ -0,0 +1,22 @@
function selectChanged() {
const sortValue = document.getElementById('sort-select').value
const $films = [...document.querySelectorAll('.film')]
location.hash = sortValue
$films.sort((a, b) => {
const aVal = a.dataset[sortValue]
const bVal = b.dataset[sortValue]
return aVal < bVal ? -1 : 1
})
document.getElementById('films-list').innerHTML = ''
$films.forEach($film => {
document.getElementById('films-list').appendChild($film)
})
}
document.getElementById('sort-select').addEventListener('change', selectChanged)
const locationHash = location.hash.replace('#', '')
if (locationHash !== '') {
document.getElementById('sort-select').value = locationHash
selectChanged()
}

49
app/templates/films.html Normal file → Executable file
View file

@ -1,19 +1,44 @@
{% extends "base.html" %}
{% block body_class%}animated animated-text{% endblock %}
{% block main %}
<div class="films">
{% for film in films %}
<div class="film">
<h1><a href="{{ film.get_absolute_url }}">
<span>{{ film.data.title | safe }}</span>
<span>{{ film.data.title_zh | safe }}</span>
</a></h1>
<h2>
{% for director in film.data.director %}
<span>{{ director|safe }}</span>
{% endfor %}
</h2>
<div>
<strong>Sort:</strong>
<select id="sort-select">
<option value="position" selected>Default</option>
<option value="title">Title</option>
<option value="duration">Duration</option>
<option value="hue">Hue</option>
<option value="saturation">Saturation</option>
<option value="lightness">Lightness</option>
</select>
</div>
<div id="films-list">
{% for film in films %}
<div class="film"
data-position="{{ film.position }}"
data-title="{{ film.data.title }}"
data-duration="{{ film.data.duration }}"
data-hue="{{ film.data.hue }}"
data-saturation="{{ film.data.saturation }}"
data-lightness="{{ film.data.lightness }}"
>
<h1><a href="{{ film.get_absolute_url }}">
<span>{{ film.data.title | safe }}</span>
<span>{{ film.data.title_zh | safe }}</span>
</a></h1>
<h2>
{% for director in film.data.director %}
<span>{{ director|safe }}</span>
{% endfor %}
</h2>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endblock %}
{% block end %}
<script src="{% static 'js/films.js' %}"></script>
{% endblock %}