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
-    = pagination
+  .block__header.page__header
+    .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
-    = pagination
+  .block__header.page__header
+    .page__pagination = pagination
 
 br
 = if can?(@conn, :create, Philomena.Channels.Channel) do

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

@@ -21,10 +21,11 @@ h2 Search Results
       = render PhilomenaWeb.CommentView, "_comment_with_image.html", body: body, comment: comment, conn: @conn
 
     .block
-      .block__header.block__header--light.flex
-        = pagination
-        span.block__header__title
-          = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @comments, conn: @conn
+      .block__header.block__header--light.page__header
+        .page__pagination = pagination
+        .page__info
+          span.block__header__title
+            = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @comments, conn: @conn
 
   - assigns[:error] ->
     p

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

@@ -3,18 +3,18 @@ elixir:
   pagination = render PhilomenaWeb.PaginationView, "_pagination.html", page: @commissions, route: route, conn: @conn, params: [commission: @conn.params["commission"]]
 
 .block
-  .block__header
-    span.block__header__title Open Commissions
-    = pagination
+  .block__header.page__header
+    span.block__header__title.page__title Open Commissions
+    .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)
 
-    = 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)
+        - not is_nil(@conn.assigns.current_user) ->
+          = link "Create my listing", to: Routes.profile_commission_path(@conn, :new, @conn.assigns.current_user)
 
-      - not is_nil(@conn.assigns.current_user) ->
-        = link "Create my listing", to: Routes.profile_commission_path(@conn, :new, @conn.assigns.current_user)
-
-      - true ->
+        - true ->
 
   .block__content
     = cond do

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

@@ -4,12 +4,13 @@ elixir:
 
 h1 My Conversations
 .block
-  .block__header
-    a href=Routes.conversation_path(@conn, :new)
-      i.fa.fa-paper-plane>
-      ' Create New Conversation
+  .block__header.page__header
+    .page__pagination = pagination
 
-    = pagination
+    .page__info
+      a href=Routes.conversation_path(@conn, :new)
+        i.fa.fa-paper-plane>
+        ' Create New Conversation
 
   .block__content
     table.table.table--communication-list
@@ -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
-    = pagination
+  .block__header.block__header--light.page__header
+    .page__pagination = pagination

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

@@ -11,24 +11,25 @@ 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
-    span.block__header__title>
+  .block__header--sub.block__header--light.page__header
+    span.block__header__title.page__title>
       => @messages.total_entries
       = pluralize("message", "messages", @messages.total_entries)
-    = pagination
-    = if hidden_by?(@current_user, @conversation) do
-      = link "Restore conversation", to: Routes.conversation_hide_path(@conn, :delete, @conversation), data: [method: "delete"]
-    - else
-      = link "Remove conversation", to: Routes.conversation_hide_path(@conn, :create, @conversation), data: [method: "post", confirm: "Are you really, really sure?"]
-    = link "Report conversation", to: Routes.conversation_report_path(@conn, :new, @conversation)
-    = link "Mark as unread", to: Routes.conversation_read_path(@conn, :delete, @conversation), data: [method: "delete"]
+    .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
+        = link "Remove conversation", to: Routes.conversation_hide_path(@conn, :create, @conversation), data: [method: "post", confirm: "Are you really, really sure?"]
+      = link "Report conversation", to: Routes.conversation_report_path(@conn, :new, @conversation)
+      = link "Mark as unread", to: Routes.conversation_read_path(@conn, :delete, @conversation), data: [method: "delete"]
 
 = for {message, body} <- @messages do
   = render PhilomenaWeb.MessageView, "_message.html", message: message, body: body, conn: @conn
 
 .block
-  .block__header.block__header--light
-    = pagination
+  .block__header.block__header--light.page__header
+    .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
-    span.block__header__title The DNP List
-    = pagination
+  .block__header.page__header
+    span.block__header__title.page__title The DNP List
+    .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
-    = pagination
+  .block__header.page__header
+    .page__pagination = pagination

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

@@ -4,21 +4,21 @@ 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
-    = pagination
-
-    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))
-    => link "Open (Claimed)", to: Routes.duplicate_report_path(@conn, :index, states: ~W(claimed))
-    => link "Open + Rejected", to: Routes.duplicate_report_path(@conn, :index, states: ~W(open rejected))
-    => link "Rejected", to: Routes.duplicate_report_path(@conn, :index, states: ~W(rejected))
-    => link "Rejected + Accepted", to: Routes.duplicate_report_path(@conn, :index, states: ~W(rejected accepted))
-    => link "Accepted", to: Routes.duplicate_report_path(@conn, :index, states: ~W(accepted))
-    = link "All", to: Routes.duplicate_report_path(@conn, :index, states: ~W(open rejected accepted claimed))
+  .block__header.page__header
+    .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))
+      => link "Open (Claimed)", to: Routes.duplicate_report_path(@conn, :index, states: ~W(claimed))
+      => link "Open + Rejected", to: Routes.duplicate_report_path(@conn, :index, states: ~W(open rejected))
+      => link "Rejected", to: Routes.duplicate_report_path(@conn, :index, states: ~W(rejected))
+      => link "Rejected + Accepted", to: Routes.duplicate_report_path(@conn, :index, states: ~W(rejected accepted))
+      => link "Accepted", to: Routes.duplicate_report_path(@conn, :index, states: ~W(accepted))
+      = link "All", to: Routes.duplicate_report_path(@conn, :index, states: ~W(open rejected accepted claimed))
 
   = render PhilomenaWeb.DuplicateReportView, "_list.html", duplicate_reports: @duplicate_reports, conn: @conn
 
   .block
-    .block__header.block__header--light
-      = pagination
+    .block__header.block__header--light.page__header
+      .page__pagination = pagination

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

@@ -14,10 +14,11 @@ h1 = @forum.name
     span.spacing-left
       => @forum.topic_count
       ' topics
-  .block__header--sub.block__header--light
-    = pagination
-    span.block__header__title = @forum.description
-    = render PhilomenaWeb.Forum.SubscriptionView, "_subscription.html", forum: @forum, watching: @watching, conn: @conn
+  .block__header--sub.block__header--light.page__header
+    .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
     table.table.table--communication-list
       thead
@@ -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
-   = pagination
+  .block__header.block__header--light.page__header
+    .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
-        = pagination
+      .block__header.page__header
+        .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
-        = pagination
+      .block__header.block__header--light.page__header
+        .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
-      span.block__header__title.hide-mobile
-        ' Viewing gallery
-        strong>
-          = @gallery.title
+    section.block__header.flex.page__header
+      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,8 +51,9 @@ elixir:
       ' with
       => @gallery.image_count
       = pluralize("image", "images", @gallery.image_count)
-      ' , last updated
-      = pretty_time(@gallery.updated_at)
+      span.hide-mobile-t
+        ' , last updated
+        = pretty_time(@gallery.updated_at)
 
     .block__content.flex.js-imagelist-info
       .flex__fixed.thumb-tiny-container.spacing-right
@@ -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
-      = pagination
+    .block__header.block__header--light.flex.page__header
+      .page__pagination = pagination
 
-      span.block__header__title
+      span.block__header__title.page__info
         = info

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

@@ -3,19 +3,20 @@ elixir:
   pagination = render PhilomenaWeb.PaginationView, "_pagination.html", page: @comments, route: route
 
 .block
-  .block__header
-    =<> pagination
-    span.block__header__title
-      =<> @image.comments_count
-      => pluralize("comment", "comments", @image.comments_count)
-      ' posted
-    button.button#js-refresh-comments title="Refresh" data-disable-with="..."
-      i.fa.fa-sync
-      span.hide-mobile<> Refresh
+  .block__header.page__header
+    .page__pagination = pagination
+    .page__info
+      span.block__header__title
+        =<> @image.comments_count
+        => pluralize("comment", "comments", @image.comments_count)
+        ' posted
+      button.button#js-refresh-comments title="Refresh" data-disable-with="..."
+        i.fa.fa-sync
+        span.hide-mobile<> Refresh
 
 = for {comment, body} <- @comments, not comment.destroyed_content or (can?(@conn, :show, comment) and not hide_staff_tools?(@conn)) do
   = render PhilomenaWeb.CommentView, "_comment.html", comment: comment, body: body, conn: @conn
 
 .block
-  .block__header.block__header--light
-    = pagination
+  .block__header.block__header--light.page__header
+    .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
-    span.block__header__title.imagelist__title.hide-mobile
+  section.block__header.page__header.flex
+    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
-    .imagelist__pagination = pagination
+  .block__header.block__header--light.page__header.flex
+    .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,10 +21,11 @@ h2 Search Results
       = render PhilomenaWeb.PostView, "_post.html", body: body, post: post, conn: @conn
 
     .block
-      .block__header.block__header--light.flex
-        = pagination
-        span.block__header__title
-          = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @posts, conn: @conn
+      .block__header.block__header--light.page__header
+        .page__pagination = pagination
+        .page__info
+          span.block__header__title
+            = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @posts, conn: @conn
 
   - assigns[:error] ->
     p

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

@@ -21,10 +21,11 @@ h2 Search Results
     = render PhilomenaWeb.TagView, "_tag_list.html", tags: @tags, conn: @conn
 
     .block
-      .block__header.block__header--light.flex
-        = pagination
-        span.block__header__title
-          = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @tags
+      .block__header.block__header--light.page__header
+        .page__pagination = pagination
+        .page__info
+          span.block__header__title
+            = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @tags
 
   - assigns[:error] ->
     p

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,20 +34,22 @@ 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--fixed
+      .flex.flex--wrap.block__header.block__header--light.page__header
+        .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
-        .flex--fixed.block__header__item
-          ' Posted
-          =< pretty_time(@topic.created_at)
-        .flex--fixed.block__header__item
-          => @topic.post_count - 1
-          ' replies
-        = if not @topic.hidden_from_users do
-          = render PhilomenaWeb.Topic.SubscriptionView, "_subscription.html", forum: @forum, topic: @topic, watching: @watching, conn: @conn
+        .page__info
+          .flex.flex--center-distributed
+            .flex--fixed.block__header__item
+              ' Posted
+              =< pretty_time(@topic.created_at)
+            .flex--fixed.block__header__item
+              => @topic.post_count - 1
+              ' replies
+            = if not @topic.hidden_from_users do
+              = render PhilomenaWeb.Topic.SubscriptionView, "_subscription.html", forum: @forum, topic: @topic, watching: @watching, conn: @conn
 
 = if not @topic.hidden_from_users or can?(@conn, :hide, @topic) do
   / Display the poll, if any
@@ -67,8 +67,8 @@ h1 = @topic.title
 
       / Footer section
       .block
-        .block__header.block__header--light
-          = pagination
+        .block__header.block__header--light.page__header
+          .page__pagination = pagination
 
       = if @topic.locked_at do
         .block.block--fixed.block--warning