mirror of
https://github.com/metagov/govarch-website.git
synced 2025-06-05 04:10:49 +00:00
add pagination support
This commit is contained in:
parent
f56356bdb8
commit
c014a3cdbe
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 %}
|
||||
|
||||
<header class="site-masthead">
|
||||
{% if site.title %}
|
||||
<h1>
|
||||
{{ site.title }}
|
||||
</h1>
|
||||
{% endif %}
|
||||
{% if site.title %}
|
||||
<h2>
|
||||
{{ site.description }}
|
||||
</h2>
|
||||
{% endif %}
|
||||
{% if menu %}
|
||||
<nav class="site-navigation">
|
||||
<ul>
|
||||
{% for item in site.data.menu %}
|
||||
<li>
|
||||
<a href="{{ item.url | prepend: baseurl }}">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</header>
|
||||
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
|
||||
{% include back-link.html %}
|
||||
{% else %}
|
||||
<header class="site-masthead">
|
||||
{% if site.title %}
|
||||
<h1>
|
||||
{{ site.title }}
|
||||
</h1>
|
||||
{% endif %}
|
||||
{% if site.title %}
|
||||
<h2>
|
||||
{{ site.description }}
|
||||
</h2>
|
||||
{% endif %}
|
||||
{% if menu %}
|
||||
<nav class="site-navigation">
|
||||
<ul>
|
||||
{% for item in site.data.menu %}
|
||||
<li>
|
||||
<a href="{{ item.url | prepend: baseurl }}">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</header>
|
||||
{% endif %}
|
||||
|
||||
<main class="home" aria-label="Content">
|
||||
|
||||
<h1 class="divided">
|
||||
Contents
|
||||
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
|
||||
Page {{ paginator.page }}
|
||||
{% else %}
|
||||
Contents
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
<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>
|
||||
{% if site.paginate and site.paginate_path %}
|
||||
|
||||
<ul class="post-list">
|
||||
{% for post in paginator.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>
|
||||
|
||||
{% 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>
|
@ -2,9 +2,7 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<a href="{{ "/" | prepend: site.baseurl }}" class="back-link">
|
||||
❮ Home
|
||||
</a>
|
||||
{% include back-link.html %}
|
||||
|
||||
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
||||
|
||||
|
@ -87,35 +87,6 @@ hr {
|
||||
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 {
|
||||
color: $muted-text-color;
|
||||
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",
|
||||
"base",
|
||||
"masthead",
|
||||
"post-list",
|
||||
"article"
|
||||
;
|
Loading…
x
Reference in New Issue
Block a user