steffen/website
1
0
Fork 0
Code Actions Packages Releases 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
Download Patch File Download Diff File Expand all files Collapse all files

30
_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 %}
{% 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,32 +36,34 @@
{% 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 %}
{% comment %} Distance from current page and this link {% endcomment %}
{% assign dist = paginator.page | minus: index %}
{% if dist < 0 %}
{% comment %}Distance must be a positive value{% endcomment %}
{% comment %} Distance must be a positive value {% endcomment %}
{% assign dist = 0 | minus: dist %}
{% endif %}
<li><a href="{{ base_path }}/page{{ index }}/">{{ index }}</a></li>
{% endif %}
{% endfor %}
{% comment %}Ellipsis for truncated links{% endcomment %}
{% 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 %}
{% 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>