[GREEN] Implement better pagination on discussion detail page

forum/templates/forum/forum_discussion_detail.html

@@ -39,22 +39,22 @@
                                         </div>
                                     </div>
 
-                                    {% endfor %}
-                                </div>
-                                <p>{{ object.description }}</p>
+                                {% endfor %}
                             </div>
+                            <p>{{ object.description }}</p>
                         </div>
-                        <div class="col-md-2">
-                            <div class="card-body">
-                                <p>{{ object.user.name }}</p>
-                                <p>{{ object.updated_at }}</p>
-                                {% if object.user.id == request.user.id %}
-                                    <a href="{% url 'forum_discussion_delete' object.id %}"
-                                       class="btn btn-outline-danger"> Delete</a>
-                                {% endif %}
-                            </div>
+                    </div>
+                    <div class="col-md-2">
+                        <div class="card-body">
+                            <p>{{ object.user.name }}</p>
+                            <p>{{ object.updated_at }}</p>
+                            {% if object.user.id == request.user.id %}
+                                <a href="{% url 'forum_discussion_delete' object.id %}"
+                                   class="btn btn-outline-danger"> Delete</a>
+                            {% endif %}
                         </div>
                     </div>
+                </div>
             </div>
         </div>
     </div>
@@ -94,11 +94,11 @@
                                 {% if comment.user.id == request.user.id %}
                                     <a href="{% url 'forum_discussion_comment_delete' object.id comment.id %}"
                                        class="btn btn-outline-danger"> Delete</a>
-                                    {% endif %}
-                                </div>
+                                {% endif %}
                             </div>
                         </div>
                     </div>
+                </div>
             </div>
         </div>
     {% endfor %}
@@ -128,26 +128,41 @@
                     <p class="card-text">You need to log in first before commenting on this page!</p>
                     <a href="{% url 'login' %}?next={{ request.path }}" class="btn btn-primary">Login</a>
                 {% endif %}
-                    </div>
-                </div>
             </div>
         </div>
-        <div class="pagination">
-                <span class="before">
-                    {% if page_obj.has_previous %}
-                        <a href="?page=1">first</a>
-                        <a href="?page={{ page_obj.previous_page_number }}">previous</a>
-                    {% endif %}
-                </span>
+    </div>
+</div>
+<nav aria-label="Discussion Detail Pagination">
+    <ul class="pagination justify-content-center">
+        {% if page_obj.has_previous %}
+            <li class="page-item">
+                <a class="page-link" href="?page={{ page_obj.previous_page_number }}" tabindex="-1">Previous</a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link" href="" tabindex="-1">Previous</a>
+            </li>
+        {% endif %}
 
-            <span class="current">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</span>
-            <span class="after">
-                    {% if page_obj.has_next %}
-                        <a href="?page={{ page_obj.next_page_number }}">next</a>
-                        <a href="?page={{ page_obj.paginator.num_pages }}">last</a>
-                    {% endif %}
-            </span>
-        </div>
+        {% for page in pages %}
+            {% if page == "..." %}
+                <li class="page-item disabled"><a class="page-link" href="">{{ page }}</a></li>
+            {% else %}
+                <li class="page-item"><a class="page-link" href="?page={{ page }}">{{ page }}</a></li>
+            {% endif %}
+        {% endfor %}
+
+        {% if page_obj.has_next %}
+            <li class="page-item">
+                <a class="page-link" href="?page={{ page_obj.next_page_number }}" tabindex="-1">Next</a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link" href="" tabindex="-1">Next</a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>
 </div>
 {% endblock content %}
 {% block extra_scripts %}

forum/views.py

@@ -88,6 +88,10 @@ class ForumDiscussionDetail(FormMixin, DetailView, MultipleObjectMixin):
     def get_context_data(self, **kwargs):
         comments = DiscussionComment.objects.filter(discussion=self.get_object()).order_by('updated_at')
         context = super(ForumDiscussionDetail, self).get_context_data(object_list=comments, **kwargs)
+
+        page_context = context.get('page_obj')
+        context['pages'] = pagination(page_context.number, page_context.paginator.num_pages)
+
         return context
 
     def post(self, request, *args, **kwargs):
@@ -101,7 +105,6 @@ class ForumDiscussionDetail(FormMixin, DetailView, MultipleObjectMixin):
         else:
             return self.form_invalid(form)
 
-
     def form_valid(self, form):
         form.save()
         return super().form_valid(form)