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.

1 files changed, 12 insertions, 2 deletions

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 %}