html: fix pagination box on mobile

3 files changed, 25 insertions, 13 deletions

diff --git a/fatcat_scholar/static/scholar.css b/fatcat_scholar/static/scholar.css
index 7c78505..34b0e75 100644
--- a/fatcat_scholar/static/scholar.css
+++ b/fatcat_scholar/static/scholar.css
@@ -184,6 +184,12 @@ nav.ui.menu {
   display: none;
 }
 
+.search-pagination {
+  max-width: 35em;
+  margin: auto;
+  text-align: center;
+}
+
 footer p a {
   color: rgba(255, 255, 255, 0.5);
 }
diff --git a/fatcat_scholar/templates/search.html b/fatcat_scholar/templates/search.html
index 2f2149e..5c7d860 100644
--- a/fatcat_scholar/templates/search.html
+++ b/fatcat_scholar/templates/search.html
@@ -120,8 +120,10 @@
     {% elif hits and hits.results %}
       {% if hits.results %}
         {% if hits.offset != 0 %}
-          <div style="text-align: center; margin-bottom: 2em;">
-            {{ search_macros.search_pagination(hits) }}
+          <div style="margin-bottom: 2em; width: 100%;">
+            <div class="search-pagination">
+              {{ search_macros.search_pagination(hits) }}
+            </div>
           </div>
         {% endif %}
 
@@ -132,8 +134,10 @@
         {% endfor %}
 
         {% if hits.count_found > hits.limit %}
-          <div style="text-align: center; margin-top: 2em;">
-            {{ search_macros.search_pagination(hits) }}
+          <div style="margin-top: 2em; width: 100%;">
+            <div class="search-pagination">
+              {{ search_macros.search_pagination(hits) }}
+            </div>
           </div>
         {% endif %}
       {% endif %}
diff --git a/fatcat_scholar/templates/search_macros.html b/fatcat_scholar/templates/search_macros.html
index 0e6b3f0..5552dc3 100644
--- a/fatcat_scholar/templates/search_macros.html
+++ b/fatcat_scholar/templates/search_macros.html
@@ -489,24 +489,26 @@
 
 {% macro search_pagination(hits, top) %}
 {% if hits.offset > 0 %}
-  <button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset - hits.limit }}" style="margin-right: 2em;" rel="prev">
+  <button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset - hits.limit }}" style="float: left;" rel="prev">
     <a>&#xab; {% trans %}Previous{% endtrans %}</a>
   </button>
 {% else %}
-  <span style="color:rgba(0,0,0,0.55); margin-right: 2em;">&#xab; {% trans %}Previous{% endtrans %}</span>
+  <span style="color:rgba(0,0,0,0.55); float: left">&#xab; {% trans %}Previous{% endtrans %}</span>
 {% endif %}
+
+{% if hits.offset + hits.limit < hits.count_found %}
+<button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset + hits.limit }}" style="float: right;" rel="next">
+  <a>{% trans %}Next{% endtrans %} &#xbb;</a>
+</button>
+{% else %}
+  <span style="color:rgba(0,0,0,0.55); float: right;">{% trans %}Next{% endtrans %} &#xbb;</span>
+{% endif %}
+
 <i>
   {% trans trimmed start=(hits.offset + 1), end=(hits.offset + hits.limit), total="{:,}".format(hits.count_found) %}
     Showing results {{ start }} &mdash; {{ end }} out of {{ total }} results
   {% endtrans %}
 </i>
-{% if hits.offset + hits.limit < hits.count_found %}
-<button class="text-button" form="search_form" type="submit" name="offset" value="{{ hits.offset + hits.limit }}" style="margin-left: 2em;" rel="next">
-  <a>{% trans %}Next{% endtrans %} &#xbb;</a>
-{% else %}
-  <span style="color:rgba(0,0,0,0.55); margin-left: 2em;">{% trans %}Next{% endtrans %} &#xbb;</span>
-{% endif %}
-</button>
 {% endmacro %}
 
 {% macro query_option(options, selected) -%}