Fix pagination layout when viewing on thin screens
Fixes #3
diff --git a/static/css/style.less b/static/css/style.less
index 468102f..09eecad 100644
--- a/static/css/style.less
+++ b/static/css/style.less
@@ -28,6 +28,7 @@
color: @dark-grey;
font-family: @sans;
font-size: 16px;
+ min-width: 300px;
}
a {
@@ -203,9 +204,12 @@
overflow: auto;
text-align: center;
+ div{
+ display: inline-block;
+ }
+
span {
width: @pag_label_size;
- min-height: 1px;
}
span#left {
diff --git a/templates/modules/pagination.html b/templates/modules/pagination.html
index 97b3f60..061dbe0 100644
--- a/templates/modules/pagination.html
+++ b/templates/modules/pagination.html
@@ -1,20 +1,20 @@
{% if DEFAULT_PAGINATION %}
<div id="paginator">
-<span id="left">
-{% if articles_page.has_previous() %}
-{% set num = articles_page.previous_page_number() %}
-<a href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html"><i class="fa fa-arrow-circle-left"></i> Prev</a>
-{% endif %}
-</span>
-
-{% for num in range( 1, 1 + articles_paginator.num_pages ) %}
- <a href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html">{{'[' + num|string + ']' if num == articles_page.number else ' ' + num|string + ' ' }}</a>
-{% endfor %}
-
-<span id="right">
-{% if articles_page.has_next() %}
-<a href="{{ SITEURL }}/{{ page_name }}{{ articles_page.next_page_number() }}.html">Next <i class="fa fa-arrow-circle-right"></i></a>
-{% endif %}
-</span>
+ <span id="left">
+ {% if articles_page.has_previous() %}
+ {% set num = articles_page.previous_page_number() %}
+ <a href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html"><i class="fa fa-arrow-circle-left"></i> Prev</a>
+ {% endif %}
+ </span>
+ <span id="right">
+ {% if articles_page.has_next() %}
+ <a href="{{ SITEURL }}/{{ page_name }}{{ articles_page.next_page_number() }}.html">Next <i class="fa fa-arrow-circle-right"></i></a>
+ {% endif %}
+ </span>
+ <div>
+ {% for num in range( 1, 1 + articles_paginator.num_pages ) %}
+ <a href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html">{{'[' + num|string + ']' if num == articles_page.number else ' ' + num|string + ' ' }}</a>
+ {% endfor %}
+ </div>
</div>
{% endif %}