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,69 +2,75 @@
{{!-- 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">
{{#author}} <div class="post-feed">
<section class="post-card post-card-large">
{{#if feature_image}} {{#author}}
<div class="post-card-image-link"> <section class="post-card post-card-large">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
</div>
{{/if}}
<div class="post-card-content"> {{#if feature_image}}
<div class="post-card-content-link"> <div class="post-card-image-link">
{{!-- This is a responsive image, it loads different sizes depending on device
{{#if profile_image}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" /> <img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
</div>
{{/if}} {{/if}}
<header class="post-card-header"> <div class="post-card-content">
<h2 class="post-card-title">{{name}}</h2> <div class="post-card-content-link">
</header>
{{#if bio}} {{#if profile_image}}
<div class="post-card-excerpt">{{bio}}</div> <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
{{/if}}
<footer class="author-profile-footer">
{{#if location}}
<div class="author-profile-location">{{location}}</div>
{{/if}} {{/if}}
<div class="author-profile-meta">
{{#if website}}
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
{{/if}}
{{#if twitter}}
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
{{#if facebook}}
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
</div>
</footer>
</div> <header class="post-card-header">
</div> <h2 class="post-card-title">{{name}}</h2>
</header>
</section> {{#if bio}}
{{/author}} <div class="post-card-excerpt">{{bio}}</div>
{{/if}}
{{#foreach posts}} <footer class="author-profile-footer">
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} {{#if location}}
{{> "post-card"}} <div class="author-profile-location">{{location}}</div>
{{/foreach}} {{/if}}
<div class="author-profile-meta">
{{#if website}}
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
{{/if}}
{{#if twitter}}
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
{{#if facebook}}
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
</div>
</footer>
</div>
</div>
</section>
{{/author}}
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/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>