Skip to content

Commit 88ca182

Browse files
minimaluminiumminimaluminium
committed
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.
1 parent 140632b commit 88ca182

File tree

5 files changed

+100
-52
lines changed

5 files changed

+100
-52
lines changed

‎assets/css/screen.css‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ production stylesheet in assets/built/screen.css
273273
color: #fff;
274274
}
275275

276-
.home-template.has-cover .gh-head {
276+
:is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head {
277277
position: absolute;
278278
top: 0;
279279
right: 0;
@@ -1145,6 +1145,41 @@ make sure this only happens on large viewports / desktop-ish devices.
11451145
}
11461146
}
11471147

1148+
/* Pagination
1149+
/* ---------------------------------------------------------- */
1150+
1151+
.pagination {
1152+
display: none;
1153+
grid-template-columns: 1fr auto 1fr;
1154+
align-items: center;
1155+
margin-top: 8vmin;
1156+
}
1157+
1158+
html.no-infinite-scroll .pagination {
1159+
display: grid;
1160+
}
1161+
1162+
.pagination a {
1163+
font-size: 1.7rem;
1164+
font-weight: 600;
1165+
}
1166+
1167+
.pagination .page-number {
1168+
grid-column-start: 2;
1169+
color: var(--color-secondary-text);
1170+
}
1171+
1172+
.pagination .older-posts {
1173+
grid-column-start: 3;
1174+
text-align: right;
1175+
}
1176+
1177+
@media (max-width: 767px) {
1178+
.pagination .page-number {
1179+
display: none;
1180+
}
1181+
}
1182+
11481183

11491184
/* 7. Single Post
11501185
/* ---------------------------------------------------------- */

‎assets/js/infinite-scroll.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
*/
1515

1616
(function (window, document) {
17+
if (document.documentElement.classList.contains('no-infinite-scroll')) return;
18+
1719
// next link element
1820
var nextElement = document.querySelector('link[rel=next]');
1921
if (!nextElement) {

‎author.hbs‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,75 @@
22
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
33

44
<main id="site-main" class="site-main outer">
5-
<div class="post-feed inner">
5+
<div class="inner posts">
66

7-
{{#author}}
8-
<section class="post-card post-card-large">
7+
<div class="post-feed">
98

10-
{{#if feature_image}}
11-
<div class="post-card-image-link">
12-
{{!-- This is a responsive image, it loads different sizes depending on device
13-
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
14-
<img class="post-card-image"
15-
srcset="{{img_url feature_image size="s"}} 300w,
16-
{{img_url feature_image size="m"}} 600w,
17-
{{img_url feature_image size="l"}} 1000w,
18-
{{img_url feature_image size="xl"}} 2000w"
19-
sizes="(max-width: 1000px) 400px, 800px"
20-
src="{{img_url feature_image size="m"}}"
21-
alt="{{title}}"
22-
/>
23-
</div>
24-
{{/if}}
9+
{{#author}}
10+
<section class="post-card post-card-large">
2511

26-
<div class="post-card-content">
27-
<div class="post-card-content-link">
28-
29-
{{#if profile_image}}
30-
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
12+
{{#if feature_image}}
13+
<div class="post-card-image-link">
14+
{{!-- This is a responsive image, it loads different sizes depending on device
15+
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
16+
<img class="post-card-image"
17+
srcset="{{img_url feature_image size="s"}} 300w,
18+
{{img_url feature_image size="m"}} 600w,
19+
{{img_url feature_image size="l"}} 1000w,
20+
{{img_url feature_image size="xl"}} 2000w"
21+
sizes="(max-width: 1000px) 400px, 800px"
22+
src="{{img_url feature_image size="m"}}"
23+
alt="{{title}}"
24+
/>
25+
</div>
3126
{{/if}}
3227

33-
<header class="post-card-header">
34-
<h2 class="post-card-title">{{name}}</h2>
35-
</header>
28+
<div class="post-card-content">
29+
<div class="post-card-content-link">
3630

37-
{{#if bio}}
38-
<div class="post-card-excerpt">{{bio}}</div>
39-
{{/if}}
31+
{{#if profile_image}}
32+
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
33+
{{/if}}
34+
35+
<header class="post-card-header">
36+
<h2 class="post-card-title">{{name}}</h2>
37+
</header>
4038

41-
<footer class="author-profile-footer">
42-
{{#if location}}
43-
<div class="author-profile-location">{{location}}</div>
39+
{{#if bio}}
40+
<div class="post-card-excerpt">{{bio}}</div>
4441
{{/if}}
45-
<div class="author-profile-meta">
46-
{{#if website}}
47-
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
48-
{{/if}}
49-
{{#if twitter}}
50-
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
51-
{{/if}}
52-
{{#if facebook}}
53-
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
42+
43+
<footer class="author-profile-footer">
44+
{{#if location}}
45+
<div class="author-profile-location">{{location}}</div>
5446
{{/if}}
55-
</div>
56-
</footer>
47+
<div class="author-profile-meta">
48+
{{#if website}}
49+
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
50+
{{/if}}
51+
{{#if twitter}}
52+
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
53+
{{/if}}
54+
{{#if facebook}}
55+
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
56+
{{/if}}
57+
</div>
58+
</footer>
59+
60+
</div>
61+
</div>
5762

58-
</div>
59-
</div>
63+
</section>
64+
{{/author}}
6065

61-
</section>
62-
{{/author}}
66+
{{#foreach posts}}
67+
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
68+
{{> "post-card"}}
69+
{{/foreach}}
6370

64-
{{#foreach posts}}
65-
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
66-
{{> "post-card"}}
67-
{{/foreach}}
71+
</div>
6872

73+
{{pagination}}
74+
6975
</div>
7076
</main>

‎index.hbs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,7 @@ into the {body} of the default.hbs template --}}
4848
{{/foreach}}
4949
</div>
5050

51+
{{pagination}}
52+
5153
</div>
5254
</main>

‎tag.hbs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,8 @@
4848
{{/foreach}}
4949

5050
</div>
51+
52+
{{pagination}}
53+
5154
</div>
5255
</main>

0 commit comments

Comments
 (0)