From c1ece475328028d740b8055609647f86f4beb617 Mon Sep 17 00:00:00 2001
From: Thiago Perrotta <tbperrotta@gmail.com>
Date: Sun, 6 Mar 2022 22:48:37 -0500
Subject: [PATCH] Gray out pagination buttons when they are not applicable
Whenever the "prev" and "next" buttons have no hyperlink, decrease their
opacity to signal that they lead to nowhere.
This signal is stronger and more obvious than the current one which
merely removes the underline decoration from the text.
This patch is an improvement on top of
https://github.com/miniflux/v2/pull/1107
---
template/templates/common/entry_pagination.html | 4 ++--
template/templates/common/pagination.html | 4 ++--
ui/static/css/common.css | 4 ++++
3 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/template/templates/common/entry_pagination.html b/template/templates/common/entry_pagination.html
index 8b1b65e7..ab63c7cc 100644
--- a/template/templates/common/entry_pagination.html
+++ b/template/templates/common/entry_pagination.html
@@ -1,6 +1,6 @@
{{ define "entry_pagination" }}
<div class="pagination">
- <div class="pagination-prev">
+ <div class="pagination-prev {{ if not .prevEntry }}disabled{{end}}">
{{ if .prevEntry }}
<a href="{{ .prevEntryRoute }}{{ if .searchQuery }}?q={{ .searchQuery }}{{ end }}" title="{{ .prevEntry.Title }}" data-page="previous" rel="prev">{{ t "pagination.previous" }}</a>
{{ else }}
@@ -8,7 +8,7 @@
{{ end }}
</div>
- <div class="pagination-next">
+ <div class="pagination-next {{ if not .nextEntry }}disabled{{end}}">
{{ if .nextEntry }}
<a href="{{ .nextEntryRoute }}{{ if .searchQuery }}?q={{ .searchQuery }}{{ end }}" title="{{ .nextEntry.Title }}" data-page="next" rel="next">{{ t "pagination.next" }}</a>
{{ else }}
diff --git a/template/templates/common/pagination.html b/template/templates/common/pagination.html
index 0ad61c8b..964a7a0f 100644
--- a/template/templates/common/pagination.html
+++ b/template/templates/common/pagination.html
@@ -1,6 +1,6 @@
{{ define "pagination" }}
<div class="pagination">
- <div class="pagination-prev">
+ <div class="pagination-prev {{ if not .ShowPrev }}disabled{{end}}">
{{ if .ShowPrev }}
<a href="{{ .Route }}{{ if gt .PrevOffset 0 }}?offset={{ .PrevOffset }}{{ if .SearchQuery }}&q={{ .SearchQuery }}{{ end }}{{ else }}{{ if .SearchQuery }}?q={{ .SearchQuery }}{{ end }}{{ end }}" data-page="previous" rel="prev">{{ t "pagination.previous" }}</a>
{{ else }}
@@ -8,7 +8,7 @@
{{ end }}
</div>
- <div class="pagination-next">
+ <div class="pagination-next {{ if not .ShowNext }}disabled{{end}}">
{{ if .ShowNext }}
<a href="{{ .Route }}?offset={{ .NextOffset }}{{ if .SearchQuery }}&q={{ .SearchQuery }}{{ end }}" data-page="next" rel="next">{{ t "pagination.next" }}</a>
{{ else }}
diff --git a/ui/static/css/common.css b/ui/static/css/common.css
index 8547136a..fadae2ee 100644
--- a/ui/static/css/common.css
+++ b/ui/static/css/common.css
@@ -1065,3 +1065,7 @@ details.entry-enclosures {
.rules-entry {
display: flex;
}
+
+.disabled {
+ opacity: 20%;
+}
--
GitLab