From c91f8767dad1cc452cdf9cd7e6c1da210eb0af0c Mon Sep 17 00:00:00 2001
From: Sanjay B <sanjaybhangar@gmail.com>
Date: Thu, 28 Oct 2021 22:03:47 +0530
Subject: [PATCH] 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 %}
 
-<div class="films" id="films">
+<div class="films">
 	<div>
 		<strong>Sort:</strong>
 		<select id="sort-select">
@@ -14,26 +14,28 @@
 			<option value="lightness">Lightness</option>
 		</select>
 	</div>
-{% 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 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 %}