N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve pagination styling

Browse source
This commit is contained in:
Michael Rose 2016-03-30 15:26:25 -04:00
parent 9d14c68382
commit 570864dfb8
4 changed files with 85 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
_includes/paginator.html
View file

@ -6,15 +6,17 @@
{% comment %} Link for previous page {% endcomment %}
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<li><a href="{{ base_path }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
<li><a href="{{ base_path }}/">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
{% else %}
<li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
<li><a href="{{ base_path }}/page{{ paginator.previous_page }}/">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
{% endif %}
{% else %}
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous }}</span></a></li>
{% endif %}
{% comment %} First page {% endcomment %}
{% if paginator.page == 1 %}
<li><strong class="current">1</strong></li>
<li><a href="#" class="disabled current">1</a></li>
{% else %}
<li><a href="{{ base_path }}/">1</a></li>
{% endif %}
@ -23,7 +25,7 @@
{% if paginator.page > 4 %}
{% assign page_start = paginator.page | minus: 2 %}
{% comment %} Ellipsis for truncated links {% endcomment %}
<li>&hellip;</li>
<li><a href="#" class="disabled">&hellip;</a></li>
{% endif %}
{% assign page_end = paginator.total_pages | minus: 1 %}
@ -34,7 +36,7 @@
{% for index in (page_start..page_end) %}
{% if index == paginator.page %}
<li><strong class="current">{{ index }}</strong></li>
<li><a href="{{ base_path }}/page{{ index }}/" class="disabled current">{{ index }}</a></li>
{% else %}
{% comment %} Distance from current page and this link {% endcomment %}
{% assign dist = paginator.page | minus: index %}
@ -48,18 +50,20 @@
{% comment %} Ellipsis for truncated links {% endcomment %}
{% if pages_to_end > 3 %}
<li>&hellip;</li>
<li><a href="#" class="disabled">&hellip;</a></li>
{% endif %}
{% if paginator.page == paginator.total_pages %}
<li><strong class="current">{{ paginator.page }}</strong></li>
<li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
{% else %}
<li><a href="{{ base_path }}/page{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
{% endif %}
{% comment %} Link next page {% endcomment %}
{% if paginator.next_page %}
<li><a href="{{ base_path }}/page{{ paginator.next_page }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
<li><a href="{{ base_path }}/page{{ paginator.next_page }}/">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
{% else %}
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_next }}</span></a></li>
{% endif %}
</ul>
</nav>

4
_includes/post_pagination.html
View file

@ -1,8 +1,12 @@
<nav class="pagination">
{% if page.previous %}
<a href="{{ base_path }}{{ page.previous.url }}" class="pagination--pager" title="{{ page.previous.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
{% else %}
<a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
{% endif %}
{% if page.next %}
<a href="{{ base_path }}{{ page.next.url }}" class="pagination--pager" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next }}</a>
{% else %}
<a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_next }}</a>
{% endif %}
</nav>

74
assets/_scss/_navigation.scss
View file

@ -55,9 +55,8 @@
.pagination {
@include full();
@include clearfix();
margin-top: 2em;
padding-top: 2em;
border-top: 1px solid $border-color;
margin-top: 1em;
padding-top: 1em;
ul {
margin: 0;
@ -68,16 +67,53 @@
}
li {
display: inline-block;
}
display: block;
float: left;
margin-left: -1px;
li + li:before {
content: "";
padding-right: 10px;
}
.current {
a {
margin-bottom: 0.25em;
padding: 0.5em 1em;
font-family: $sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
color: mix(#fff, $gray, 25%);
border: 1px solid $light-gray;
border-radius: 0;
&:hover {
color: $gray;
}
&.current {
color: $primary-color;
}
&.disabled {
color: $light-gray;
pointer-events: none;
cursor: not-allowed;
}
}
&:first-child {
margin-left: 0;
a {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
}
&:last-child {
a {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
}
/* next/previous buttons */
@ -95,6 +131,7 @@
color: mix(#fff, $gray, 25%);
border: 1px solid $light-gray;
border-radius: $border-radius;
&:hover {
color: $gray;
}
@ -109,8 +146,23 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.disabled {
color: $light-gray;
pointer-events: none;
cursor: not-allowed;
}
}
}
.page__content + .pagination,
.page__meta + .pagination,
.page__share + .pagination,
.page__comments + .pagination {
margin-top: 2em;
padding-top: 2em;
border-top: 1px solid $border-color;
}
/*

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long