fix up user-facing pagination widgets

assets/css/common/_blocks.scss

@@ -84,7 +84,7 @@ a.block__header--single-item, .block__header a {
   }
 }
 
-.block__header a, .block__header > span, .header__span {
+.block__header a, .header__span {
   background: $block_header_color;
 }
 
@@ -96,7 +96,7 @@ a.block__header--single-item, .block__header a {
 
 .block__header--light {
   background: $block_header_light_color;
-  a, > span, .header__span {
+  a, .header__span {
     background: $block_header_light_color;
   }
 

assets/css/views/_pagination.scss

@@ -1,9 +1,9 @@
-.imagelist__header {
+.page__header {
   display: flex;
   flex-wrap: wrap;
 }
 
-.imagelist__title, .imagelist__pagination {
+.page__title, .page__pagination {
   display: inline-flex;
   flex-wrap: nowrap;
   flex-shrink: 0;
@@ -14,16 +14,16 @@
 }
 
 @media (max-width: $min_px_width_for_desktop_thumb) {
-  .imagelist__title, .imagelist__options {
+  .page__title, .page__options {
     display: none;
   }
 
-  .imagelist__header, .imagelist__pagination, .imagelist__info {
+  .page__header, .page__pagination, .page__info {
     display: block;
     text-align: center;
   }
 
-  .imagelist__pagination nav {
+  .page__pagination nav {
     display: flex;
     width: 100%;
 

lib/philomena_web/templates/channel/index.html.slime

@@ -9,8 +9,8 @@ h1 Livestreams
     = submit "Search", class: "hform__button button"
 
 .block
-  .block__header
+  .block__header.page__header
-    = pagination
+    .page__pagination = pagination
 
     = if @conn.cookies["chan_nsfw"] == "true" do
       a href=Routes.channel_nsfw_path(@conn, :delete) data-method="delete"
@@ -25,8 +25,8 @@ h1 Livestreams
     = for channel <- @channels do
       = render PhilomenaWeb.ChannelView, "_channel_box.html", channel: channel, conn: @conn, subscriptions: @subscriptions
 
-  .block__header
+  .block__header.page__header
-    = pagination
+    .page__pagination = pagination
 
 br
 = if can?(@conn, :create, Philomena.Channels.Channel) do

lib/philomena_web/templates/comment/index.html.slime

@@ -21,8 +21,9 @@ h2 Search Results
       = render PhilomenaWeb.CommentView, "_comment_with_image.html", body: body, comment: comment, conn: @conn
 
     .block
-      .block__header.block__header--light.flex
+      .block__header.block__header--light.page__header
-        = pagination
+        .page__pagination = pagination
+        .page__info
           span.block__header__title
             = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @comments, conn: @conn
 

lib/philomena_web/templates/commission/_directory_results.html.slime

@@ -3,10 +3,10 @@ elixir:
   pagination = render PhilomenaWeb.PaginationView, "_pagination.html", page: @commissions, route: route, conn: @conn, params: [commission: @conn.params["commission"]]
 
 .block
-  .block__header
+  .block__header.page__header
-    span.block__header__title Open Commissions
+    span.block__header__title.page__title Open Commissions
-    = pagination
+    .page__pagination = pagination
-
+    .page__options
       = cond do
         - not is_nil(@conn.assigns.current_user) and not is_nil(@conn.assigns.current_user.commission) ->
           = link "View my listing", to: Routes.profile_commission_path(@conn, :show, @conn.assigns.current_user)

lib/philomena_web/templates/conversation/index.html.slime

@@ -4,13 +4,14 @@ elixir:
 
 h1 My Conversations
 .block
-  .block__header
+  .block__header.page__header
+    .page__pagination = pagination
+
+    .page__info
       a href=Routes.conversation_path(@conn, :new)
         i.fa.fa-paper-plane>
         ' Create New Conversation
 
-    = pagination
-
   .block__content
     table.table.table--communication-list
       thead
@@ -39,5 +40,5 @@ h1 My Conversations
               ' •
               => link "Hide", to: Routes.conversation_hide_path(@conn, :create, c), data: [method: "post"], data: [confirm: "Are you really, really sure?"]
 
-  .block__header.block__header--light
+  .block__header.block__header--light.page__header
-    = pagination
+    .page__pagination = pagination

lib/philomena_web/templates/conversation/show.html.slime

@@ -11,11 +11,12 @@ h1 = @conversation.title
     => link @conversation.title, to: Routes.conversation_path(@conn, :show, @conversation)
     ' Conversation with
     => render PhilomenaWeb.UserAttributionView, "_user.html", object: %{user: other}, conn: @conn
-  .block__header--sub.block__header--light
+  .block__header--sub.block__header--light.page__header
-    span.block__header__title>
+    span.block__header__title.page__title>
       => @messages.total_entries
       = pluralize("message", "messages", @messages.total_entries)
-    = pagination
+    .page__pagination = pagination
+    .page__options
       = if hidden_by?(@current_user, @conversation) do
         = link "Restore conversation", to: Routes.conversation_hide_path(@conn, :delete, @conversation), data: [method: "delete"]
       - else
@@ -27,8 +28,8 @@ h1 = @conversation.title
   = render PhilomenaWeb.MessageView, "_message.html", message: message, body: body, conn: @conn
 
 .block
-  .block__header.block__header--light
+  .block__header.block__header--light.page__header
-    = pagination
+    .page__pagination = pagination
 
 = cond do
   - @conn.assigns.current_ban ->

lib/philomena_web/templates/dnp_entry/index.html.slime

@@ -34,9 +34,9 @@ h3 The List
   - route = fn p -> Routes.dnp_entry_path(@conn, :index, p) end
   - pagination = render PhilomenaWeb.PaginationView, "_pagination.html", page: @dnp_entries, route: route, conn: @conn
 
-  .block__header
+  .block__header.page__header
-    span.block__header__title The DNP List
+    span.block__header__title.page__title The DNP List
-    = pagination
+    .page__pagination = pagination
 
   .block__content
     table.table
@@ -71,5 +71,5 @@ h3 The List
             td
               = link "More Info", to: Routes.dnp_entry_path(@conn, :show, entry)
 
-  .block__header
+  .block__header.page__header
-    = pagination
+    .page__pagination = pagination

lib/philomena_web/templates/duplicate_report/index.html.slime

@@ -4,9 +4,9 @@ h1 Duplicate Reports
 - pagination = render PhilomenaWeb.PaginationView, "_pagination.html", page: @duplicate_reports, route: route, conn: @conn, params: [states: @conn.params["states"] || ["open", "claimed"]]
 
 .block
-  .block__header
+  .block__header.page__header
-    = pagination
+    .page__pagination = pagination
-
+    .page__info
       span.block__header__title Display only:
       => link "Open (All)", to: Routes.duplicate_report_path(@conn, :index, states: ~W(open claimed))
       => link "Open (Unclaimed)", to: Routes.duplicate_report_path(@conn, :index, states: ~W(open))
@@ -20,5 +20,5 @@ h1 Duplicate Reports
   = render PhilomenaWeb.DuplicateReportView, "_list.html", duplicate_reports: @duplicate_reports, conn: @conn
 
   .block
-    .block__header.block__header--light
+    .block__header.block__header--light.page__header
-      = pagination
+      .page__pagination = pagination

lib/philomena_web/templates/forum/show.html.slime

@@ -14,8 +14,9 @@ h1 = @forum.name
     span.spacing-left
       => @forum.topic_count
       ' topics
-  .block__header--sub.block__header--light
+  .block__header--sub.block__header--light.page__header
-    = pagination
+    .page__pagination = pagination
+    .page__info
       span.block__header__title = @forum.description
       = render PhilomenaWeb.Forum.SubscriptionView, "_subscription.html", forum: @forum, watching: @watching, conn: @conn
   .block__content
@@ -49,8 +50,8 @@ h1 = @forum.name
                 = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: topic.last_post, conn: @conn
                 br
                 => pretty_time(topic.last_post.created_at)
-  .block__header.block__header--light
+  .block__header.block__header--light.page__header
-   = pagination
+    .page__pagination = pagination
 
 /- if current_user
 /  = render partial: 'topics/form'

lib/philomena_web/templates/gallery/index.html.slime

@@ -31,8 +31,8 @@ elixir:
 
   .column-layout__main
     .block
-      .block__header
+      .block__header.page__header
-        = pagination
+        .page__pagination = pagination
 
       .block__content.js-resizable-media-container
         = if Enum.any?(@galleries) do
@@ -43,5 +43,5 @@ elixir:
           .block.block--fixed.block--no-margin.block--warning
             ' No galleries found!
 
-      .block__header.block__header--light
+      .block__header.block__header--light.page__header
-        = pagination
+        .page__pagination = pagination

lib/philomena_web/templates/gallery/show.html.slime

@@ -7,15 +7,16 @@ elixir:
 
 #sortable class=sortable_classes(@conn)
   .block#imagelist-container
-    section.block__header.flex
+    section.block__header.flex.page__header
-      span.block__header__title.hide-mobile
+      span.block__header__title.page__title
+        span
           ' Viewing gallery
           strong>
             = @gallery.title
 
-      = pagination
+      .page__pagination = pagination
 
-      .flex__right
+      .flex__right.page__options
         = render PhilomenaWeb.ImageView, "_random_button.html", conn: @conn, params: scope
 
         a href=Routes.gallery_report_path(@conn, :new, @gallery)
@@ -50,6 +51,7 @@ elixir:
       ' with
       => @gallery.image_count
       = pluralize("image", "images", @gallery.image_count)
+      span.hide-mobile-t
         ' , last updated
         = pretty_time(@gallery.updated_at)
 
@@ -75,8 +77,8 @@ elixir:
       = for {image, hit} <- @gallery_images do
         = render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: image_url.(image, hit), size: :thumb, conn: @conn
 
-    .block__header.block__header--light.flex
+    .block__header.block__header--light.flex.page__header
-      = pagination
+      .page__pagination = pagination
 
-      span.block__header__title
+      span.block__header__title.page__info
         = info

lib/philomena_web/templates/image/comment/index.html.slime

@@ -3,8 +3,9 @@ elixir:
   pagination = render PhilomenaWeb.PaginationView, "_pagination.html", page: @comments, route: route
 
 .block
-  .block__header
+  .block__header.page__header
-    =<> pagination
+    .page__pagination = pagination
+    .page__info
       span.block__header__title
         =<> @image.comments_count
         => pluralize("comment", "comments", @image.comments_count)
@@ -17,5 +18,5 @@ elixir:
   = render PhilomenaWeb.CommentView, "_comment.html", comment: comment, body: body, conn: @conn
 
 .block
-  .block__header.block__header--light
+  .block__header.block__header--light.page__header
-    = pagination
+    .page__pagination = pagination

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.imagelist__header.flex
+  section.block__header.page__header.flex
-    span.block__header__title.imagelist__title.hide-mobile
+    span.block__header__title.page__title.hide-mobile
       => header
 
-    .imagelist__pagination = pagination
+    .page__pagination = pagination
 
-    .flex__right.imagelist__options
+    .flex__right.page__options
       = random_button @conn, params
       = hidden_toggle @conn, route, params
       = deleted_toggle @conn, route, params
@@ -33,13 +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.imagelist__header.flex
+  .block__header.block__header--light.page__header.flex
-    .imagelist__pagination = pagination
+    .page__pagination = pagination
 
-    span.block__header__title.imagelist__info
+    span.block__header__title.page__info
       = info
 
-    .flex__right.imagelist__options
+    .flex__right.page__options
       a href="/settings/edit" title="Display Settings"
         i.fa.fa-cog
         span.hide-mobile.hide-limited-desktop<>

lib/philomena_web/templates/post/index.html.slime

@@ -21,8 +21,9 @@ h2 Search Results
       = render PhilomenaWeb.PostView, "_post.html", body: body, post: post, conn: @conn
 
     .block
-      .block__header.block__header--light.flex
+      .block__header.block__header--light.page__header
-        = pagination
+        .page__pagination = pagination
+        .page__info
           span.block__header__title
             = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @posts, conn: @conn
 

lib/philomena_web/templates/tag/index.html.slime

@@ -21,8 +21,9 @@ h2 Search Results
     = render PhilomenaWeb.TagView, "_tag_list.html", tags: @tags, conn: @conn
 
     .block
-      .block__header.block__header--light.flex
+      .block__header.block__header--light.page__header
-        = pagination
+        .page__pagination = pagination
+        .page__info
           span.block__header__title
             = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @tags
 

lib/philomena_web/templates/topic/show.html.slime

@@ -26,8 +26,6 @@ h1 = @topic.title
 / Header section
 .block
   .block__header
-    => link("Forums", to: Routes.forum_path(@conn, :index))
-    ' »
     => link(@forum.name, to: Routes.forum_path(@conn, :show, @forum))
     ' »
     => link(@topic.title, to: Routes.forum_topic_path(@conn, :show, @forum, @topic))
@@ -36,12 +34,14 @@ h1 = @topic.title
       a href=Routes.post_path(@conn, :index, pq: "topic_id:#{@topic.id}")
         i.fa.fa-fw.fa-search>
         ' Search Posts
-      .flex.flex--wrap.block__header.block__header--light
+      .flex.flex--wrap.block__header.block__header--light.page__header
-        .flex--fixed
+        .flex--fixed.page__pagination
           = pagination
-        .flex--fixed.block__header__item
+        .flex--fixed.block__header__item.page__options
           ' Started by
           => render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @topic, conn: @conn
+        .page__info
+          .flex.flex--center-distributed
             .flex--fixed.block__header__item
               ' Posted
               =< pretty_time(@topic.created_at)
@@ -67,8 +67,8 @@ h1 = @topic.title
 
       / Footer section
       .block
-        .block__header.block__header--light
+        .block__header.block__header--light.page__header
-          = pagination
+          .page__pagination = pagination
 
       = if @topic.locked_at do
         .block.block--fixed.block--warning