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.
This commit is contained in:
parent
6a41eb382f
commit
d22c6c535e
8 changed files with 51 additions and 9 deletions
|
@ -8,6 +8,9 @@
|
||||||
{{ if not .entries }}
|
{{ if not .entries }}
|
||||||
<p class="alert alert-info">{{ t "alert.no_bookmark" }}</p>
|
<p class="alert alert-info">{{ t "alert.no_bookmark" }}</p>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
<div class="pagination-top">
|
||||||
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
<div class="items">
|
<div class="items">
|
||||||
{{ range .entries }}
|
{{ range .entries }}
|
||||||
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
||||||
|
@ -24,7 +27,9 @@
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pagination-bottom">
|
||||||
{{ template "pagination" .pagination }}
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -42,6 +42,9 @@
|
||||||
{{ if not .entries }}
|
{{ if not .entries }}
|
||||||
<p class="alert">{{ t "alert.no_category_entry" }}</p>
|
<p class="alert">{{ t "alert.no_category_entry" }}</p>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
<div class="pagination-top">
|
||||||
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
<div class="items">
|
<div class="items">
|
||||||
{{ range .entries }}
|
{{ range .entries }}
|
||||||
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
||||||
|
@ -73,7 +76,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
|
<div class="pagination-bottom">
|
||||||
{{ template "pagination" .pagination }}
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -137,7 +137,7 @@
|
||||||
</header>
|
</header>
|
||||||
{{ if gt (len .entry.Content) 120 }}
|
{{ if gt (len .entry.Content) 120 }}
|
||||||
{{ if .user }}
|
{{ if .user }}
|
||||||
<div class="pagination-top">
|
<div class="pagination-entry-top">
|
||||||
{{ template "entry_pagination" . }}
|
{{ template "entry_pagination" . }}
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
@ -189,7 +189,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{{ if .user }}
|
{{ if .user }}
|
||||||
<div class="pagination-bottom">
|
<div class="pagination-entry-bottom">
|
||||||
{{ template "entry_pagination" . }}
|
{{ template "entry_pagination" . }}
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -70,6 +70,9 @@
|
||||||
<p class="alert">{{ t "alert.no_feed_entry" }}</p>
|
<p class="alert">{{ t "alert.no_feed_entry" }}</p>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
<div class="pagination-top">
|
||||||
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
<div class="items">
|
<div class="items">
|
||||||
{{ range .entries }}
|
{{ range .entries }}
|
||||||
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
||||||
|
@ -101,7 +104,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
|
<div class="pagination-bottom">
|
||||||
{{ template "pagination" .pagination }}
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -30,6 +30,9 @@
|
||||||
{{ if not .entries }}
|
{{ if not .entries }}
|
||||||
<p class="alert alert-info">{{ t "alert.no_history" }}</p>
|
<p class="alert alert-info">{{ t "alert.no_history" }}</p>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
<div class="pagination-top">
|
||||||
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
<div class="items">
|
<div class="items">
|
||||||
{{ range .entries }}
|
{{ range .entries }}
|
||||||
<article class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
<article class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
||||||
|
@ -46,7 +49,9 @@
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pagination-bottom">
|
||||||
{{ template "pagination" .pagination }}
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -8,6 +8,9 @@
|
||||||
{{ if not .entries }}
|
{{ if not .entries }}
|
||||||
<p class="alert alert-info">{{ t "alert.no_search_result" }}</p>
|
<p class="alert alert-info">{{ t "alert.no_search_result" }}</p>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
<div class="pagination-top">
|
||||||
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
<div class="items">
|
<div class="items">
|
||||||
{{ range .entries }}
|
{{ range .entries }}
|
||||||
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
||||||
|
@ -24,7 +27,9 @@
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pagination-bottom">
|
||||||
{{ template "pagination" .pagination }}
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -31,6 +31,9 @@
|
||||||
{{ if not .entries }}
|
{{ if not .entries }}
|
||||||
<p class="alert">{{ t "alert.no_unread_entry" }}</p>
|
<p class="alert">{{ t "alert.no_unread_entry" }}</p>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
<div class="pagination-top">
|
||||||
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
<div class="items hide-read-items">
|
<div class="items hide-read-items">
|
||||||
{{ range .entries }}
|
{{ range .entries }}
|
||||||
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
<article role="article" class="item {{ if $.user.EntrySwipe }}touch-item{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
||||||
|
@ -61,7 +64,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
|
<div class="pagination-bottom">
|
||||||
{{ template "pagination" .pagination }}
|
{{ template "pagination" .pagination }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -636,13 +636,25 @@ template {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 8px;
|
}
|
||||||
|
|
||||||
|
.pagination-top {
|
||||||
|
padding-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-bottom {
|
.pagination-bottom {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-entry-top {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-entry-bottom {
|
||||||
border-top: 1px dotted var(--pagination-border-color);
|
border-top: 1px dotted var(--pagination-border-color);
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
padding-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination > div {
|
.pagination > div {
|
||||||
|
|
Loading…
Reference in a new issue