GenZmeY/casper-i18n
1
0
Fork 0
mirror of https://github.com/GenZmeY/casper-i18n.git synced 2024-11-10 02:28:02 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added regular pagination option

Browse Source 
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; 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
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

2
assets/js/infinite-scroll.js
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) {

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 --}} {{!-- 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>

2
index.hbs
View File

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

3
tag.hbs
View File

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