From 88ca182a5852e05e6bc5bded7906a3c75393a9d1 Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Thu, 8 Dec 2022 12:50:24 +0800 Subject: [PATCH] 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 element has a class no-infinite-scroll. --- assets/css/screen.css | 37 +++++++++++- assets/js/infinite-scroll.js | 2 + author.hbs | 110 ++++++++++++++++++----------------- index.hbs | 2 + tag.hbs | 3 + 5 files changed, 101 insertions(+), 53 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index 5efb53a..563a94b 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -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 /* ---------------------------------------------------------- */ diff --git a/assets/js/infinite-scroll.js b/assets/js/infinite-scroll.js index 3e9bd7a..9bb9c85 100644 --- a/assets/js/infinite-scroll.js +++ b/assets/js/infinite-scroll.js @@ -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) { diff --git a/author.hbs b/author.hbs index 4d35ebf..2653af9 100644 --- a/author.hbs +++ b/author.hbs @@ -2,69 +2,75 @@ {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
-
+
- {{#author}} -
+
- {{#if feature_image}} -
- {{!-- 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 --}} - {{title}} -
- {{/if}} + {{#author}} +
-
-
- - {{#if profile_image}} - {{name}} + {{#if feature_image}} +
+ {{!-- 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 --}} + {{title}} +
{{/if}} -
-

{{name}}

-
+
+
- {{#if bio}} -
{{bio}}
- {{/if}} - -
- {{#if location}} -
{{location}}
+ {{#if profile_image}} + {{name}} {{/if}} -
- {{#if website}} - {{website}} + +
+

{{name}}

+
+ + {{#if bio}} +
{{bio}}
+ {{/if}} + +
-
+
+ {{#if website}} + {{website}} + {{/if}} + {{#if twitter}} + {{> "icons/twitter"}} + {{/if}} + {{#if facebook}} + {{> "icons/facebook"}} + {{/if}} +
+ -
-
+
+
-
- {{/author}} +
+ {{/author}} - {{#foreach posts}} - {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} - {{> "post-card"}} - {{/foreach}} + {{#foreach posts}} + {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} + {{> "post-card"}} + {{/foreach}} +
+ + {{pagination}} +
diff --git a/index.hbs b/index.hbs index 48b3665..4df1d6a 100644 --- a/index.hbs +++ b/index.hbs @@ -48,5 +48,7 @@ into the {body} of the default.hbs template --}} {{/foreach}} + {{pagination}} + diff --git a/tag.hbs b/tag.hbs index cd58c6f..6a99a7a 100644 --- a/tag.hbs +++ b/tag.hbs @@ -48,5 +48,8 @@ {{/foreach}} + + {{pagination}} +