improve pagination navigation

* pages show more content
* the navigation bar is shown regardless of scroll position
* the navigation bar now lives in a box
* the navigation bar adapts to small screen sizes

I changed the padding now.

8 files changed, 37 insertions, 12 deletions

diff --git a/apioforum/forum.py b/apioforum/forum.py
index ca656ff..305cb51 100644
--- a/apioforum/forum.py
+++ b/apioforum/forum.py
@@ -16,7 +16,7 @@ import datetime
 import math
 import functools
 
-THREADS_PER_PAGE = 20
+THREADS_PER_PAGE = 35
 
 bp = Blueprint("forum", __name__, url_prefix="/")
 
diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index 342db6c..d50c7b0 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -13,6 +13,7 @@ body { font-family: sans-serif; word-wrap: break-word; }
     border-right: 1px solid black;
     border-top: 1px solid black;
     width: 100%
+	box-sizing: border-box;
 }
 .post:last-of-type { border-bottom: 1px solid black; }
 
@@ -116,9 +117,21 @@ nav#navbar p:first-of-type { margin-left:0.5em }
 nav#navbar a { color: blue; text-decoration: none }
 nav#navbar .links { display: flex; }
 
-nav#pages { text-align: center; margin-top: 2vh; margin-bottom: 2vh; }
-nav#pages a { margin-left: 2vw; margin-right: 2vw; }
-nav#pages .mid { margin-left: 5vw; margin-right: 5vw; }
+nav#pages {
+	display: flex;
+	text-align: center;
+	justify-content: space-between;
+	margin-bottom: -1px;
+	padding: 5px;
+	border: 1px solid black;
+	background-color: var(--alternating-colour-even);
+	position: sticky;
+	top: 0;
+}
+
+nav#pages .links > a:not([href]) { color: gray; }
+
+nav#pages .pageno { align-self: center; }
 
 /* todo: make the navbar less bad */
 .flashmsg { border: 1px solid black; background-color: yellow; max-width: max-content; padding: 5px; clear: both;}
@@ -190,6 +203,8 @@ nav#pages .mid { margin-left: 5vw; margin-right: 5vw; }
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
+	#the-word-page { display: none; }
+	nav#pages > .pageno { font-size: small; }
 }
 
 .actionbutton::before {
diff --git a/apioforum/templates/common.html b/apioforum/templates/common.html
index 638c423..46402df 100644
--- a/apioforum/templates/common.html
+++ b/apioforum/templates/common.html
@@ -141,14 +141,24 @@
 
 {% macro pagination_nav(page,max_pageno,view) %}
 <nav aria-label="pagination" id="pages">
+	<div class="links">
 	{% if page > 1 %}
 	<a href="{{url_for(view,**kwargs)}}" aria-label="first page">&lt;&lt; first</a>
 	<a href="{{url_for(view,page=page-1,**kwargs)}}" aria-label="previous page">&lt; prev</a>
+	{% else %}
+	<a aria-label="first page">&lt;&lt; first</a>
+	<a aria-label="previous page">&lt; prev</a>
 	{% endif %}
-	page {{page}} of {{max_pageno}}
-	{% if page < max_pageno %} {# > #}
+	</div>
+	<div class="pageno"><span id="the-word-page">page </span>{{page}} of {{max_pageno}}</div>
+	<div class="links">
+	{% if page < max_pageno %}
 	<a href="{{url_for(view,page=page+1,**kwargs)}}" aria-label="next page">next &gt;</a>
 	<a href="{{url_for(view,page=max_pageno,**kwargs)}}" aria-label="last page">last &gt;&gt;</a>
+	{% else %}
+	<a aria-label="next page">next &gt;</a>
+	<a aria-label="last page">last &gt;&gt;</a>
 	{% endif %}
+	</div>
 </nav>
 {% endmacro %}
diff --git a/apioforum/templates/view_forum.html b/apioforum/templates/view_forum.html
index 75144c8..649c87c 100644
--- a/apioforum/templates/view_forum.html
+++ b/apioforum/templates/view_forum.html
@@ -84,6 +84,7 @@ you do not have permission to create threads in this forum
 {% endif %}
 
 {% if has_permission(forum.id, g.user, "p_view_threads", login_required=False) %}
+{{ pagination_nav(page,max_pageno,'forum.view_forum',forum_id=forum.id) }}
 <div class="thread-list">
 	{%for thread in threads%}
 		<div class="listing">
@@ -133,7 +134,6 @@ you do not have permission to create threads in this forum
 		</div>
 	{%endfor%}
 </div>
-{{ pagination_nav(page,max_pageno,'forum.view_forum',forum_id=forum.id) }}
 
 	
 {% else %}
diff --git a/apioforum/templates/view_thread.html b/apioforum/templates/view_thread.html
index fe22cfc..6e881cb 100644
--- a/apioforum/templates/view_thread.html
+++ b/apioforum/templates/view_thread.html
@@ -32,6 +32,7 @@
     </span>
 </div>
 
+{{ pagination_nav(page,max_pageno,'thread.view_thread',thread_id=thread.id) }}
 <div class="posts">
     {% for post in posts %}
         {% if votes[post.id] %}
@@ -69,7 +70,6 @@
         {% endif %}
     {% endfor %}
 </div>
-{{ pagination_nav(page,max_pageno,'thread.view_thread',thread_id=thread.id) }}
 {% if g.user and has_permission(thread.forum, g.user, "p_reply_threads") %}
 <form class="new-post" action="{{url_for('thread.create_post',thread_id=thread.id)}}" method="POST">
     <textarea class="new-post-box" placeholder="your post here..." name="content"></textarea>
diff --git a/apioforum/templates/view_user.html b/apioforum/templates/view_user.html
index 44a0b9d..f52e7c1 100644
--- a/apioforum/templates/view_user.html
+++ b/apioforum/templates/view_user.html
@@ -26,11 +26,11 @@
 </div>
 {% if posts %}
 	<h2>recent posts</h2>
+{{ pagination_nav(page,max_pageno,'user.view_user', username=user.username) }}
 	<div class="user_posts">
 		{% for post in posts %}
 			{{ disp_post(post, False) }}
 		{% endfor %}
 	</div>
-{{ pagination_nav(page,max_pageno,'user.view_user', username=user.username) }}
 {% endif %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/apioforum/thread.py b/apioforum/thread.py
index 05abce2..4f5c2a0 100644
--- a/apioforum/thread.py
+++ b/apioforum/thread.py
@@ -13,7 +13,7 @@ from .forum import get_avail_tags
 
 bp = Blueprint("thread", __name__, url_prefix="/thread")
 
-POSTS_PER_PAGE = 20
+POSTS_PER_PAGE = 28
 
 def which_page(post_id,return_thread_id=False):
     # on which page lieth the post in question?
diff --git a/apioforum/user.py b/apioforum/user.py
index d6fbb60..8fb59ab 100644
--- a/apioforum/user.py
+++ b/apioforum/user.py
@@ -1,5 +1,5 @@
 # user pages
-POSTS_PER_PAGE = 20
+POSTS_PER_PAGE = 28
 
 from flask import (
     Blueprint, render_template, abort, g, flash, redirect, url_for, request