new container

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)
     })
 }
 

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 %}