From cc5200fd2d3aa3021e748dd117d50f14c79fbdff Mon Sep 17 00:00:00 2001 From: Sanjay B Date: Thu, 28 Oct 2021 21:49:16 +0530 Subject: [PATCH 1/4] add sort to films page --- app/static/js/films.js | 15 +++++++++++++++ app/templates/films.html | 27 +++++++++++++++++++++++++-- 2 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 app/static/js/films.js diff --git a/app/static/js/films.js b/app/static/js/films.js new file mode 100644 index 0000000..42185dd --- /dev/null +++ b/app/static/js/films.js @@ -0,0 +1,15 @@ +document.getElementById('sort-select').addEventListener('change', function () { + const sortValue = this.value + const $films = [...document.querySelectorAll('.film')] + console.log('$films', $films) + $films.sort((a, b) => { + console.log('a', a) + const aVal = a.dataset[sortValue] + const bVal = b.dataset[sortValue] + return aVal < bVal ? -1 : 1 + }) + document.getElementById('films').innerHTML = '' + $films.forEach($film => { + document.getElementById('films').appendChild($film) + }) +}) \ No newline at end of file diff --git a/app/templates/films.html b/app/templates/films.html index 3b1b15a..2e85e2d 100644 --- a/app/templates/films.html +++ b/app/templates/films.html @@ -1,9 +1,28 @@ {% extends "base.html" %} {% block body_class%}animated animated-text{% endblock %} {% block main %} -
+ +
+ Sort: + +
+
{% for film in films %} -
+ {% endblock %} + +{% block end %} + +{% endblock %} \ No newline at end of file From 40b072002c609d2d5f7621130ed4474a06aa52c8 Mon Sep 17 00:00:00 2001 From: imohkay Date: Thu, 28 Oct 2021 21:59:44 +0530 Subject: [PATCH 2/4] style sort select --- app/static/css/partials/_film.scss | 9 ++++++++- app/templates/films.html | 22 +++++++++++----------- 2 files changed, 19 insertions(+), 12 deletions(-) mode change 100644 => 100755 app/templates/films.html diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index 8b90eaf..b258d04 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -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; diff --git a/app/templates/films.html b/app/templates/films.html old mode 100644 new mode 100755 index 2e85e2d..d3c2e01 --- a/app/templates/films.html +++ b/app/templates/films.html @@ -2,18 +2,18 @@ {% block body_class%}animated animated-text{% endblock %} {% block main %} -
- Sort: - -
+
+ Sort: + +
{% for film in films %}
Date: Thu, 28 Oct 2021 22:01:08 +0530 Subject: [PATCH 3/4] store sort in url --- app/static/js/films.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/app/static/js/films.js b/app/static/js/films.js index 42185dd..3449f18 100644 --- a/app/static/js/films.js +++ b/app/static/js/films.js @@ -1,9 +1,8 @@ -document.getElementById('sort-select').addEventListener('change', function () { - const sortValue = this.value +function selectChanged() { + const sortValue = document.getElementById('sort-select').value const $films = [...document.querySelectorAll('.film')] - console.log('$films', $films) + location.hash = sortValue $films.sort((a, b) => { - console.log('a', a) const aVal = a.dataset[sortValue] const bVal = b.dataset[sortValue] return aVal < bVal ? -1 : 1 @@ -12,4 +11,12 @@ document.getElementById('sort-select').addEventListener('change', function () { $films.forEach($film => { document.getElementById('films').appendChild($film) }) -}) \ No newline at end of file +} + +document.getElementById('sort-select').addEventListener('change', selectChanged) + +const locationHash = location.hash.replace('#', '') +if (locationHash !== '') { + document.getElementById('sort-select').value = locationHash + selectChanged() +} \ No newline at end of file From c91f8767dad1cc452cdf9cd7e6c1da210eb0af0c Mon Sep 17 00:00:00 2001 From: Sanjay B Date: Thu, 28 Oct 2021 22:03:47 +0530 Subject: [PATCH 4/4] new container --- app/static/js/films.js | 4 ++-- app/templates/films.html | 42 +++++++++++++++++++++------------------- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/app/static/js/films.js b/app/static/js/films.js index 3449f18..8eec4cd 100644 --- a/app/static/js/films.js +++ b/app/static/js/films.js @@ -7,9 +7,9 @@ function selectChanged() { const bVal = b.dataset[sortValue] return aVal < bVal ? -1 : 1 }) - document.getElementById('films').innerHTML = '' + document.getElementById('films-list').innerHTML = '' $films.forEach($film => { - document.getElementById('films').appendChild($film) + document.getElementById('films-list').appendChild($film) }) } diff --git a/app/templates/films.html b/app/templates/films.html index d3c2e01..c059a1c 100755 --- a/app/templates/films.html +++ b/app/templates/films.html @@ -2,7 +2,7 @@ {% block body_class%}animated animated-text{% endblock %} {% block main %} -
+
Sort:
-{% for film in films %} -
-

- {{ film.data.title | safe }} - {{ film.data.title_zh | safe }} -

-

- {% for director in film.data.director %} - {{ director|safe }} - {% endfor %} -

+
+ {% for film in films %} +
+

+ {{ film.data.title | safe }} + {{ film.data.title_zh | safe }} +

+

+ {% for director in film.data.director %} + {{ director|safe }} + {% endfor %} +

+
+ {% endfor %}
-{% endfor %}
{% endblock %}