Added regular pagination option

Casper comes with infinite scrolling by default. This update makes it possible to go with the default pagination style when the <html> element has a class no-infinite-scroll.
This commit is contained in:
Sodbileg Gansukh 2022-12-08 12:50:24 +08:00
parent 140632b885
commit 88ca182a58
5 changed files with 101 additions and 53 deletions

View File

@ -273,7 +273,7 @@ production stylesheet in assets/built/screen.css
color: #fff; color: #fff;
} }
.home-template.has-cover .gh-head { :is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -1145,6 +1145,41 @@ make sure this only happens on large viewports / desktop-ish devices.
} }
} }
/* Pagination
/* ---------------------------------------------------------- */
.pagination {
display: none;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-top: 8vmin;
}
html.no-infinite-scroll .pagination {
display: grid;
}
.pagination a {
font-size: 1.7rem;
font-weight: 600;
}
.pagination .page-number {
grid-column-start: 2;
color: var(--color-secondary-text);
}
.pagination .older-posts {
grid-column-start: 3;
text-align: right;
}
@media (max-width: 767px) {
.pagination .page-number {
display: none;
}
}
/* 7. Single Post /* 7. Single Post
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View File

@ -14,6 +14,8 @@
*/ */
(function (window, document) { (function (window, document) {
if (document.documentElement.classList.contains('no-infinite-scroll')) return;
// next link element // next link element
var nextElement = document.querySelector('link[rel=next]'); var nextElement = document.querySelector('link[rel=next]');
if (!nextElement) { if (!nextElement) {

View File

@ -2,7 +2,9 @@
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="post-feed inner"> <div class="inner posts">
<div class="post-feed">
{{#author}} {{#author}}
<section class="post-card post-card-large"> <section class="post-card post-card-large">
@ -66,5 +68,9 @@
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
</div>
{{pagination}}
</div> </div>
</main> </main>

View File

@ -48,5 +48,7 @@ into the {body} of the default.hbs template --}}
{{/foreach}} {{/foreach}}
</div> </div>
{{pagination}}
</div> </div>
</main> </main>

View File

@ -48,5 +48,8 @@
{{/foreach}} {{/foreach}}
</div> </div>
{{pagination}}
</div> </div>
</main> </main>