mirror of
https://github.com/metagov/govarch-website.git
synced 2025-07-11 01:49:45 +00:00
Merge pull request #3 from patdryburgh/feat/pagination
add pagination support
This commit is contained in:
3
_includes/back-link.html
Normal file
3
_includes/back-link.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<a href="{{ "/" | prepend: site.baseurl }}" class="back-link">
|
||||||
|
❮ Home
|
||||||
|
</a>
|
@ -4,51 +4,99 @@ layout: default
|
|||||||
|
|
||||||
{% assign menu = site.data.menu %}
|
{% assign menu = site.data.menu %}
|
||||||
|
|
||||||
<header class="site-masthead">
|
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
|
||||||
{% if site.title %}
|
{% include back-link.html %}
|
||||||
<h1>
|
{% else %}
|
||||||
{{ site.title }}
|
<header class="site-masthead">
|
||||||
</h1>
|
{% if site.title %}
|
||||||
{% endif %}
|
<h1>
|
||||||
{% if site.title %}
|
{{ site.title }}
|
||||||
<h2>
|
</h1>
|
||||||
{{ site.description }}
|
{% endif %}
|
||||||
</h2>
|
{% if site.title %}
|
||||||
{% endif %}
|
<h2>
|
||||||
{% if menu %}
|
{{ site.description }}
|
||||||
<nav class="site-navigation">
|
</h2>
|
||||||
<ul>
|
{% endif %}
|
||||||
{% for item in site.data.menu %}
|
{% if menu %}
|
||||||
<li>
|
<nav class="site-navigation">
|
||||||
<a href="{{ item.url | prepend: baseurl }}">
|
<ul>
|
||||||
{{ item.title }}
|
{% for item in site.data.menu %}
|
||||||
</a>
|
<li>
|
||||||
</li>
|
<a href="{{ item.url | prepend: baseurl }}">
|
||||||
{% endfor %}
|
{{ item.title }}
|
||||||
</ul>
|
</a>
|
||||||
</nav>
|
</li>
|
||||||
{% endif %}
|
{% endfor %}
|
||||||
</header>
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
|
</header>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<main class="home" aria-label="Content">
|
<main class="home" aria-label="Content">
|
||||||
|
|
||||||
<h1 class="divided">
|
<h1 class="divided">
|
||||||
Contents
|
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
|
||||||
|
Page {{ paginator.page }}
|
||||||
|
{% else %}
|
||||||
|
Contents
|
||||||
|
{% endif %}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<ul class="post-list">
|
{% if site.paginate and site.paginate_path %}
|
||||||
{% for post in site.posts %}
|
|
||||||
<li>
|
<ul class="post-list">
|
||||||
<a href="{{ post.url | absolute_url }}" class="post-link">
|
{% for post in paginator.posts %}
|
||||||
<span class="post-title">
|
<li>
|
||||||
{{ post.title }}
|
<a href="{{ post.url | absolute_url }}" class="post-link">
|
||||||
</span>
|
<span class="post-title">
|
||||||
<span class="post-date">
|
{{ post.title }}
|
||||||
{{ post.date | date: "%b %-d, '%y" }}
|
</span>
|
||||||
</span>
|
<span class="post-date">
|
||||||
</a>
|
{{ post.date | date: "%b %-d, '%y" }}
|
||||||
</li>
|
</span>
|
||||||
{% endfor %}
|
</a>
|
||||||
</ul>
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{% if paginator.page > 1 %}
|
||||||
|
|
||||||
|
<div class="post-pagination">
|
||||||
|
{% if paginator.next_page %}
|
||||||
|
<a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="pagination-next btn">⟨ Older</a>
|
||||||
|
{% else %}
|
||||||
|
<span> </span>
|
||||||
|
{% endif %}
|
||||||
|
<span class="pagination-number">{{ paginator.page }} of {{ paginator.total_pages }}</span>
|
||||||
|
{% if paginator.previous_page %}
|
||||||
|
<a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="pagination-previous btn">Newer ⟩</a>
|
||||||
|
{% else %}
|
||||||
|
<span> </span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
|
||||||
|
<ul class="post-list">
|
||||||
|
{% for post in site.posts %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ post.url | absolute_url }}" class="post-link">
|
||||||
|
<span class="post-title">
|
||||||
|
{{ post.title }}
|
||||||
|
</span>
|
||||||
|
<span class="post-date">
|
||||||
|
{{ post.date | date: "%b %-d, '%y" }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
@ -2,9 +2,7 @@
|
|||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<a href="{{ "/" | prepend: site.baseurl }}" class="back-link">
|
{% include back-link.html %}
|
||||||
❮ Home
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
||||||
|
|
||||||
|
@ -87,35 +87,6 @@ hr {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-list {
|
|
||||||
margin: 1em 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-link {
|
|
||||||
color: $text-color;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: .25em 0;
|
|
||||||
.post-title {
|
|
||||||
display: block;
|
|
||||||
padding: .25em 0;
|
|
||||||
}
|
|
||||||
&:hover .post-title,
|
|
||||||
&:focus .post-title {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
@media (min-width: $on-tablet) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
.post-title {
|
|
||||||
margin-right: 4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-date {
|
.post-date {
|
||||||
color: $muted-text-color;
|
color: $muted-text-color;
|
||||||
display: block;
|
display: block;
|
||||||
|
48
_sass/_post-list.scss
Normal file
48
_sass/_post-list.scss
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
.post-list {
|
||||||
|
margin: 1em 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-link {
|
||||||
|
color: $text-color;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: .25em 0;
|
||||||
|
.post-title {
|
||||||
|
display: block;
|
||||||
|
padding: .25em 0;
|
||||||
|
}
|
||||||
|
&:hover .post-title,
|
||||||
|
&:focus .post-title {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
@media (min-width: $on-tablet) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
.post-title {
|
||||||
|
margin-right: 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-pagination {
|
||||||
|
margin-top: 4rem;
|
||||||
|
font-size: .75em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
* > {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -13,5 +13,6 @@ $asset_url: '{{ '/assets' | absolute_url }}';
|
|||||||
"font",
|
"font",
|
||||||
"base",
|
"base",
|
||||||
"masthead",
|
"masthead",
|
||||||
|
"post-list",
|
||||||
"article"
|
"article"
|
||||||
;
|
;
|
Reference in New Issue
Block a user