pagination behaves well with empty results

gawa/blog/templates/blog/browse.html

@@ -110,7 +110,7 @@
         </div>
         <div class="row mb-5">
             <div class="container-fluid p-0 w-100 h-100">
-                {% if is_empty %}
+                {% if not posts %}
                     <div class="text-center">
                         <img src="/media/img/http/404.svg"
                              class="img-fluid pb-5 pt-2 darkmode-invert"
@@ -172,6 +172,7 @@
                                     </div>
                                 </a>
                             </div>
+                            {% empty %}
                         {% endfor %}
                     </div>
                     <nav aria-label="Page navigation example" class="mt-5">

gawa/blog/views.py

@@ -1,5 +1,6 @@
 import json
 import ast
+from django.core.paginator import Paginator
 from django.shortcuts import get_object_or_404, render
 from django.http.response import Http404, HttpResponse
 from django.http.request import HttpRequest
@@ -45,7 +46,6 @@ class Post(DetailView):
         context['featured_posts'] = BlogPost.objects.filter(featured=True)
         return context
 
-
 class Browse(ListView):
     """
     Scroll through a list of blog posts
@@ -57,8 +57,9 @@ class Browse(ListView):
     model = BlogPost
     template_name = "blog/browse.html"
     context_object_name = "posts"
-    paginate_by = 20
+    paginate_by = 2
     allow_empty = False  # but we have a special get method
+    allow_empty = True
 
     def get_queryset(self):
         objects = BlogPost.objects.all()
@@ -97,7 +98,6 @@ class Browse(ListView):
                     keywords.append(Keyword.objects.get(slug=raw_keyword))
                 except Keyword.DoesNotExist:
                     pass
-            logger.debug(f"found kws: {keywords}")
             objects = objects.filter(keywords__in=keywords)
         return objects
 

gawa/static/custom.js

@@ -62,6 +62,5 @@ document.querySelectorAll(".reset-empty-button").forEach((element) => {
 // smaller cards depending on viewport
 document.querySelectorAll(".cardrow").forEach((element) => {
   var level = Math.min(Math.floor(screen.width / 200), 6);
-  console.log(level);
   element.classList.add("row-cols-" + level);
 });