vividboarder
/
Vivid-Casper
mirror of https://github.com/ViViDboarder/Vivid-Casper.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/css/screen.css
View File

@ -273,7 +273,7 @@ production stylesheet in assets/built/screen.css
color: #fff;
}
.home-template.has-cover .gh-head {
:is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head {
position: absolute;
top: 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
/* ---------------------------------------------------------- */

2
assets/js/infinite-scroll.js
View File

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

8
author.hbs
View File

@ -2,7 +2,9 @@
{{!-- 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">
<div class="post-feed inner">
<div class="inner posts">
<div class="post-feed">
{{#author}}
<section class="post-card post-card-large">
@ -66,5 +68,9 @@
{{> "post-card"}}
{{/foreach}}
</div>
{{pagination}}
</div>
</main>

2
index.hbs
View File

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

3
tag.hbs
View File

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