From 0ee31347e4650445177897ad495db08ae40dc1b5 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Sun, 23 Oct 2022 23:24:11 +0300
Subject: [PATCH] Add newer and older posts buttons

---
 .../static_fe/static_fe/profile.html.eex      | 15 ++++++---------
 priv/static/static-fe/static-fe.css           | 19 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
index 982db5cc2..eecb09a18 100644
--- a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
+++ b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
@@ -64,20 +64,17 @@
     </div>
     <% end %>
   </div>
+  <%= if @prev_page_id do %>
+  <%= link "Show newer", to: "?min_id=" <> @prev_page_id, class: "load-posts" %>
+  <% end %>
   <div class="activity-stream">
     <%= for activity <- @timeline do %>
     <%= render("_notice.html", Map.put(activity, :selected, false)) %>
     <% end %>
-    <p id="pagination">
-      <%= if @prev_page_id do %>
-        <%= link "«", to: "?min_id=" <> @prev_page_id %>
-      <% end %>
-      <%= if @prev_page_id && @next_page_id, do: " | " %>
-      <%= if @next_page_id do %>
-        <%= link "»", to: "?max_id=" <> @next_page_id %>
-      <% end %>
-    </p>
   </div>
+  <%= if @next_page_id do %>
+  <%= link "Show older", to: "?max_id=" <> @next_page_id, class: "load-posts" %>
+  <% end %>
 </div>
 
 <style>
diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css
index 16b8b34c1..15a90021e 100644
--- a/priv/static/static-fe/static-fe.css
+++ b/priv/static/static-fe/static-fe.css
@@ -4,7 +4,8 @@ :root {
 	--wallpaper: rgba(11, 16, 23, 1);
     --alertNeutralText: rgba(255, 255, 255, 1);
     --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
-
+	--loadPostsSelected: rgba(23, 34, 46, 1);
+    --loadPostsSelectedText: rgba(185, 185, 186, 1);
     --profileBg: rgba(7, 12, 17, 1);
     --profileTint: rgba(15, 22, 30, 0.5);
     --btnText: rgba(185, 185, 186, 1);
@@ -301,6 +302,7 @@ .button-default {
 
 .button-default:hover {
     box-shadow: var(--btnHoverShadow);
+	cursor: pointer;
 }
 
 .user-bio {
@@ -402,3 +404,18 @@ .user-role {
 .bottom-line {
 	display: flex;
 }
+
+.load-posts {
+	display: block;
+    box-sizing: border-box;
+    height: 3.5em;
+    line-height: 3.5em;
+    padding: 0 1em;
+    width: 100%;
+    text-align: center;
+}
+
+.load-posts:hover {
+	background-color: var(--loadPostsSelected);
+    color: var(--loadPostsSelectedText);
+}