Add pagination on top of all entries. Closes #1305.

Enable users to move to prev/next page without having to scroll all the
way to the bottom of the page.

Furthermore, ensure consistency with entry.html which has top and bottom
pagination.

template/templates/views/bookmark_entries.html

@@ -8,6 +8,9 @@
 {{ if not .entries }}
     <p class="alert alert-info">{{ t "alert.no_bookmark" }}</p>
 {{ else }}
+    <div class="pagination-top">
+        {{ template "pagination" .pagination }}
+    </div>
     <div class="items">
         {{ range .entries }}
         <article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
@@ -24,7 +27,9 @@
         </article>
         {{ end }}
     </div>
-    {{ template "pagination" .pagination }}
+    <div class="pagination-bottom">
+        {{ template "pagination" .pagination }}
+    </div>
 {{ end }}
 
 {{ end }}

template/templates/views/category_entries.html

@@ -42,6 +42,9 @@
 {{ if not .entries }}
     <p class="alert">{{ t "alert.no_category_entry" }}</p>
 {{ else }}
+    <div class="pagination-top">
+        {{ template "pagination" .pagination }}
+    </div>
     <div class="items">
         {{ range .entries }}
         <article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
@@ -73,7 +76,9 @@
         </ul>
         {{ end }}
     </section>
-    {{ template "pagination" .pagination }}
+    <div class="pagination-bottom">
+        {{ template "pagination" .pagination }}
+    </div>
 {{ end }}
 
 {{ end }}

template/templates/views/entry.html

@@ -137,7 +137,7 @@
     </header>
     {{ if gt (len .entry.Content) 120 }}
     {{ if .user }}
-    <div class="pagination-top">
+    <div class="pagination-entry-top">
         {{ template "entry_pagination" . }}
     </div>
     {{ end }}
@@ -189,7 +189,7 @@
 </section>
 
 {{ if .user }}
-<div class="pagination-bottom">
+<div class="pagination-entry-bottom">
     {{ template "entry_pagination" . }}
 </div>
 {{ end }}

template/templates/views/feed_entries.html

@@ -70,6 +70,9 @@
         <p class="alert">{{ t "alert.no_feed_entry" }}</p>
     {{ end }}
 {{ else }}
+    <div class="pagination-top">
+        {{ template "pagination" .pagination }}
+    </div>
     <div class="items">
         {{ range .entries }}
         <article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
@@ -101,7 +104,9 @@
         </ul>
         {{ end }}
     </section>
-    {{ template "pagination" .pagination }}
+    <div class="pagination-bottom">
+        {{ template "pagination" .pagination }}
+    </div>
 {{ end }}
 
 {{ end }}

template/templates/views/history_entries.html

@@ -30,6 +30,9 @@
 {{ if not .entries }}
     <p class="alert alert-info">{{ t "alert.no_history" }}</p>
 {{ else }}
+    <div class="pagination-top">
+        {{ template "pagination" .pagination }}
+    </div>
     <div class="items">
         {{ range .entries }}
         <article class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
@@ -46,7 +49,9 @@
         </article>
         {{ end }}
     </div>
-    {{ template "pagination" .pagination }}
+    <div class="pagination-bottom">
+        {{ template "pagination" .pagination }}
+    </div>
 {{ end }}
 
 {{ end }}

template/templates/views/search_entries.html

@@ -8,6 +8,9 @@
 {{ if not .entries }}
     <p class="alert alert-info">{{ t "alert.no_search_result" }}</p>
 {{ else }}
+    <div class="pagination-top">
+        {{ template "pagination" .pagination }}
+    </div>
     <div class="items">
         {{ range .entries }}
         <article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
@@ -24,7 +27,9 @@
         </article>
         {{ end }}
     </div>
-    {{ template "pagination" .pagination }}
+    <div class="pagination-bottom">
+        {{ template "pagination" .pagination }}
+    </div>
 {{ end }}
 
 {{ end }}

template/templates/views/unread_entries.html

@@ -31,6 +31,9 @@
 {{ if not .entries }}
     <p class="alert">{{ t "alert.no_unread_entry" }}</p>
 {{ else }}
+    <div class="pagination-top">
+        {{ template "pagination" .pagination }}
+    </div>
     <div class="items hide-read-items">
         {{ range .entries }}
         <article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
@@ -61,7 +64,9 @@
         </ul>
         {{ end }}
     </section>
-    {{ template "pagination" .pagination }}
+    <div class="pagination-bottom">
+        {{ template "pagination" .pagination }}
+    </div>
 {{ end }}
 
 {{ end }}

ui/static/css/common.css

@@ -636,13 +636,25 @@ template {
     font-size: 1.1em;
     display: flex;
     align-items: center;
-    padding-top: 8px;
+}
+
+.pagination-top {
+    padding-bottom: 8px;
 }
 
 .pagination-bottom {
+    padding-top: 8px;
+}
+
+.pagination-entry-top {
+    padding-top: 8px;
+}
+
+.pagination-entry-bottom {
     border-top: 1px dotted var(--pagination-border-color);
     margin-bottom: 15px;
     margin-top: 50px;
+    padding-top: 8px;
 }
 
 .pagination > div {