Fix/film-list-table

mod_app/static/css/film.css

@@ -1,5 +1,5 @@
 /* for film detail and list */
-/* list */
+/**************** list **********************/
 .film-table {
   font-size: 0.9rem;
   .synopsis > * {
@@ -19,6 +19,24 @@
   font-size: 1rem;
 }
 
+.page__description {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+/* pagination */
+.button--toggle-pagination {
+  float: right;
+}
+.pagination {
+  margin-inline: auto;
+  text-align: center;
+  margin-top: 1rem;
+  .current {
+    display: block;
+  }
+}
+
 /***************** detail ***************/
 .top-level {
   display: flex;

mod_app/templates/base.html

@@ -65,7 +65,7 @@
                     <button id="drawer__button--close">x</button>
                     <ul class="drawer__list-nav">
                         <li>
-                            <a href="{% url 'film_list' %}">
+                            <a href="{% url 'film_list' %}?page=1">
                                 Films</a></li>
                         <li><a href="{% url 'analysis_list' %}">
                             Analyses: Critical Essays and Discussions</a></li>

mod_app/templates/film_list.html

@@ -3,10 +3,18 @@
 {% block title %}{% trans 'Films' %} {% endblock %}
 {% block content %}
 
-    <div>
-        List of films on this site
+    <div class="page__description">
+        <div>
+            List of films on this site
+        </div>
+        {% if is_paginated %}
+            <a href="{% url 'film_list' %}" class="button--toggle-pagination"><button>View All</button></a>
+        {% else %}
+            <a href="{% url 'film_list' %}?page=1" class="button--toggle-pagination"><button>View by page</button></a>
+        {% endif %}
     </div>
 
+
     <table class="film-table">
         <thead>
             <tr>
@@ -52,15 +60,32 @@
                                 open_in_full
                             </span>
                         </a></td>
-                    {% comment %} <td><a href="{% url 'film_detail' pk=film.pk %}" >
-
-                        <span class="material-symbols-outlined">
-                            open_in_full
-                        </span>
-                    </a></td> {% endcomment %}
                 </tr>
             {% endfor %}
         </tbody>
     </table>
 
+    {% if is_paginated %}
+        {% block pagination %}
+            <div class="pagination">
+                <span class="step-links">
+                    {% if page_obj.has_previous %}
+                        <a href="?page=1">&laquo; first</a>
+                        <a href="?page={{ page_obj.previous_page_number }}">previous</a>
+                    {% endif %}
+
+                    <span class="current">
+                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+                    </span>
+
+                    {% if page_obj.has_next %}
+                        <a href="?page={{ page_obj.next_page_number }}">next</a>
+                        <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
+                    {% endif %}
+                </span>
+
+            </div>
+        {% endblock %}
+    {% endif %}
+
 {% endblock %}

mod_app/views.py

@@ -17,15 +17,12 @@ class FilmListView(ListView):
     template_name = "film_list.html"
     paginate_by = 20
 
-    # def get_context_data(self, **kwargs):
-    #     context = super().get_context_data(**kwargs)
-    #     for film in context["object_list"]:
-    #         # themes = list(film.themes.all())
-    #         # film.themes = themes
-    #         # starring = list(film.cast)
-    #         # film.starring = ", ".join(str(actor) for actor in starring)
-    #         # print(starring, "film.actors", film.actors.all())
-    #     return context
+    def get_paginate_by(self, queryset):
+        page = self.request.GET.get(self.page_kwarg)
+        if page:
+            return self.paginate_by
+        else:
+            return None
 
 
 class FilmDetailView(DetailView):