tighten tolerance for paginator widget, add dropdown with missing quick page navigation

assets/css/common/_base.scss

@@ -332,7 +332,7 @@ blockquote {
 }
 
 .page-current {
-  padding: $header_spacing;
+  padding: 0 $header_spacing;
 }
 
 i.favicon-home {

assets/css/common/_blocks.scss

@@ -84,7 +84,7 @@ a.block__header--single-item, .block__header a {
   }
 }
 
-.block__header a {
+.block__header a, .block__header span {
   background: $block_header_color;
 }
 
@@ -96,8 +96,11 @@ a.block__header--single-item, .block__header a {
 
 .block__header--light {
   background: $block_header_light_color;
-  a {
+  a, span {
     background: $block_header_light_color;
+  }
+
+  a {
     color: $block_header_light_link_text_color;
     &:hover {
       background: $block_header_light_hover_color;

assets/css/views/_pagination.scss

@@ -9,7 +9,11 @@
   flex-shrink: 0;
 }
 
-@media (max-width: $min_px_width_for_desktop_layout) {
+.pagination__dropdown {
+  min-width: 4em;
+}
+
+@media (max-width: $min_px_width_for_desktop_thumb) {
   .imagelist__title, .imagelist__options {
     display: none;
   }

lib/philomena_web/templates/pagination/_pagination.html.slime

@@ -1,12 +1,11 @@
 - params = assigns[:params] || []
 
 = if @page.total_pages > 1 do
-  nav.pagination
+  nav.pagination.hide-mobile-t
     = if not first_page?(@page) do
       = link("« First", to: first_page_path(@page, @route, params))
       = link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev")
 
-    span.hide-mobile
     = if left_gap?(@page) do
       span.page.gap
         ' …
@@ -16,7 +15,6 @@
 
     span.page-current = @page.page_number
 
-    span.hide-mobile
     = for number <- right_page_numbers(@page) do
       = link(number, to: page_path(@route, params, number))
 
@@ -27,3 +25,40 @@
     = if not last_page?(@page) do
       = link("Next ›", to: next_page_path(@page, @route, params), class: "js-next")
       = link("Last »", to: last_page_path(@page, @route, params))
+
+  nav.pagination.hide-desktop-t
+    = if first_page?(@page) do
+      span « First
+      span ‹ Prev
+    - else
+      = link("« First", to: first_page_path(@page, @route, params))
+      = link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev")
+
+    .dropdown
+      a.page-current.pagination__dropdown
+        => @page.page_number
+        i.fa.fa-caret-down
+
+      .dropdown__content
+        = if left_gap?(@page) do
+          span.page.gap
+            ' …
+
+        = for number <- left_page_numbers(@page) do
+          = link(number, to: page_path(@route, params, number))
+
+        span.page-current = @page.page_number
+
+        = for number <- right_page_numbers(@page) do
+          = link(number, to: page_path(@route, params, number))
+
+        = if right_gap?(@page) do
+          span.page.gap
+            ' …
+
+    = if last_page?(@page) do
+      span Next ›
+      span Last »
+    - else
+      = link("Next ›", to: next_page_path(@page, @route, params), class: "js-next")
+      = link("Last »", to: last_page_path(@page, @route, params))