improve pagination

suchwow/app.py

@@ -1,5 +1,6 @@
 import json
 import click
+from math import ceil
 from datetime import datetime, timedelta
 from random import choice
 from os import makedirs, path, remove
@@ -30,7 +31,7 @@ app.register_blueprint(api.bp)
 
 @app.route("/")
 def index():
-    itp = 20
+    itp = 15
     page = request.args.get("page", 1)
     submitter = request.args.get("submitter", None)
     try:
@@ -42,9 +43,15 @@ def index():
     posts = Post.select().where(Post.approved==True).order_by(Post.timestamp.desc())
     if submitter:
         posts = posts.where(Post.submitter == submitter)
-    posts = posts.paginate(page, itp)
+
-    total_pages = Post.select().count() / itp
+    paginated_posts = posts.paginate(page, itp)
-    return render_template("index.html", posts=posts, page=page, total_pages=total_pages)
+    total_pages = ceil(posts.count() / itp)
+    return render_template(
+        "index.html",
+        posts=paginated_posts,
+        page=page,
+        total_pages=total_pages
+    )
 
 @app.route("/mod")
 @moderator_required

suchwow/static/css/wow.css

@@ -791,3 +791,7 @@ ul.b {
 .navbar-nav {
   flex-direction: row;
 }
+
+.current-page-btn {
+  font-size: 1.5em;
+}

suchwow/templates/index.html

@@ -40,16 +40,11 @@
     <p>No posts yet!</p>
   {% endif %}
 
-
+<div class="page-btn">
-{% if page %}
+  {% for p in range(1, total_pages + 1) %}
-  {% if page > 1 %}
+    <a href="{% if request.args.submitter %}/?submitter={{ request.args.submitter }}&{% else %}/?{% endif %}page={{ p }}" class="pure-button btn {% if p == page %}current-page-btn{% endif %}">{{ p }}</a>
-    <a href="{% if request.args.submitter %}/?submitter={{ request.args.submitter }}&{% else %}/?{% endif %}page={{ page - 1 }}" style="padding:1em;">Back</a>
+  {% endfor %}
-  {% endif %}
+</div>
-
-  {% if page < total_pages and total_pages > 0 %}
-    <a href="{% if request.args.submitter %}/?submitter={{ request.args.submitter }}&{% else %}/?{% endif %}page={{ page + 1 }}" style="padding:1em;">Next</a>
-  {% endif %}
-{% endif %}
 
 </div>