From 4c289510a79a25ed4d355f9cd705d9134d64038a Mon Sep 17 00:00:00 2001
From: "byte[]" <byteslice@airmail.cc>
Date: Thu, 10 Dec 2020 01:22:44 -0500
Subject: [PATCH] tighten tolerance for paginator widget, add dropdown with
 missing quick page navigation

---
 assets/css/common/_base.scss                  |  2 +-
 assets/css/common/_blocks.scss                |  7 ++-
 assets/css/views/_pagination.scss             |  6 +-
 .../pagination/_pagination.html.slime         | 61 +++++++++++++++----
 4 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss
index 96b21abf..99ccfa6f 100644
--- a/assets/css/common/_base.scss
+++ b/assets/css/common/_base.scss
@@ -332,7 +332,7 @@ blockquote {
 }
 
 .page-current {
-  padding: $header_spacing;
+  padding: 0 $header_spacing;
 }
 
 i.favicon-home {
diff --git a/assets/css/common/_blocks.scss b/assets/css/common/_blocks.scss
index 74a0968e..c607c773 100644
--- a/assets/css/common/_blocks.scss
+++ b/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;
diff --git a/assets/css/views/_pagination.scss b/assets/css/views/_pagination.scss
index a15d58dc..a2cb4e49 100644
--- a/assets/css/views/_pagination.scss
+++ b/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;
   }
diff --git a/lib/philomena_web/templates/pagination/_pagination.html.slime b/lib/philomena_web/templates/pagination/_pagination.html.slime
index 9f666409..ba04fa51 100644
--- a/lib/philomena_web/templates/pagination/_pagination.html.slime
+++ b/lib/philomena_web/templates/pagination/_pagination.html.slime
@@ -1,29 +1,64 @@
 - 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
-          ' …
+    = if left_gap?(@page) do
+      span.page.gap
+        ' …
 
-      = for number <- left_page_numbers(@page) do
-        = link(number, to: page_path(@route, params, number))
+    = for number <- left_page_numbers(@page) do
+      = link(number, to: page_path(@route, params, number))
 
     span.page-current = @page.page_number
 
-    span.hide-mobile
-      = for number <- right_page_numbers(@page) do
-        = link(number, to: page_path(@route, params, 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 right_gap?(@page) do
+      span.page.gap
+        ' …
 
     = 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))