From c1ec2b3df22c3e14ff23695a7ce0646ef7df2c6e Mon Sep 17 00:00:00 2001
From: "byte[]" <byteslice@airmail.cc>
Date: Tue, 8 Dec 2020 21:30:03 -0500
Subject: [PATCH] collapse image list pagination in low width

---
 assets/css/common/_base.scss                  |  1 +
 assets/css/views/_pagination.scss             | 32 +++++++++++++++++++
 .../templates/image/index.html.slime          | 17 +++++-----
 .../pagination/_pagination.html.slime         | 22 +++++++------
 4 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 assets/css/views/_pagination.scss

diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss
index ddb095ad..96b21abf 100644
--- a/assets/css/common/_base.scss
+++ b/assets/css/common/_base.scss
@@ -394,6 +394,7 @@ span.stat {
 @import "~views/polls";
 @import "~views/posts";
 @import "~views/profiles";
+@import "~views/pagination";
 @import "~views/search";
 @import "~views/stats";
 @import "~views/tags";
diff --git a/assets/css/views/_pagination.scss b/assets/css/views/_pagination.scss
new file mode 100644
index 00000000..a15d58dc
--- /dev/null
+++ b/assets/css/views/_pagination.scss
@@ -0,0 +1,32 @@
+.imagelist__header {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.imagelist__title, .imagelist__pagination {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+}
+
+@media (max-width: $min_px_width_for_desktop_layout) {
+  .imagelist__title, .imagelist__options {
+    display: none;
+  }
+
+  .imagelist__header, .imagelist__pagination, .imagelist__info {
+    display: block;
+    text-align: center;
+  }
+
+  .imagelist__pagination nav {
+    display: flex;
+    width: 100%;
+
+    a, span {
+        text-align: center;
+        flex: 1 1 auto;
+        padding: 0 1vw;
+      }
+  }
+}
diff --git a/lib/philomena_web/templates/image/index.html.slime b/lib/philomena_web/templates/image/index.html.slime
index 66a941ca..99d2b59b 100644
--- a/lib/philomena_web/templates/image/index.html.slime
+++ b/lib/philomena_web/templates/image/index.html.slime
@@ -10,13 +10,13 @@ elixir:
   info = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @images
 
 .block#imagelist-container
-  section.block__header.flex
-    span.block__header__title.hide-mobile
+  section.block__header.imagelist__header.flex
+    span.block__header__title.imagelist__title.hide-mobile
       => header
 
-    = pagination
+    .imagelist__pagination = pagination
 
-    .flex__right
+    .flex__right.imagelist__options
       = random_button @conn, params
       = hidden_toggle @conn, route, params
       = deleted_toggle @conn, route, params
@@ -33,12 +33,13 @@ elixir:
         - image ->
           = render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: image_url.(image), size: assigns[:size] || :thumb, conn: @conn
 
-  .block__header.block__header--light.flex
-    = pagination
+  .block__header.block__header--light.imagelist__header.flex
+    .imagelist__pagination = pagination
 
-    span.block__header__title
+    span.block__header__title.imagelist__info
       = info
-    .flex__right
+
+    .flex__right.imagelist__options
       a href="/settings/edit" title="Display Settings"
         i.fa.fa-cog
         span.hide-mobile.hide-limited-desktop<>
diff --git a/lib/philomena_web/templates/pagination/_pagination.html.slime b/lib/philomena_web/templates/pagination/_pagination.html.slime
index 3932fc91..9f666409 100644
--- a/lib/philomena_web/templates/pagination/_pagination.html.slime
+++ b/lib/philomena_web/templates/pagination/_pagination.html.slime
@@ -6,21 +6,23 @@
       = link("« First", to: first_page_path(@page, @route, params))
       = link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev")
 
-    = if left_gap?(@page) do
-      span.page.gap
-        ' …
+    span.hide-mobile
+      = 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
 
-    = for number <- right_page_numbers(@page) do
-      = link(number, to: page_path(@route, params, number))
+    span.hide-mobile
+      = 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")