collapse image list pagination in low width

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";

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;
+      }
+  }
+}

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<>

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")