Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use inline SVG Font Awesome icons for pagination links

This commit is contained in:
Helen Chong 2024-07-14 12:26:26 +08:00
parent 5a91502e1a
commit da1f99f857
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/_includes/global/pagination-oldnew.njk
View File

@ -1,7 +1,18 @@
{% set firstLabel = "Newest" %} {% set firstLabel %}
{% set prevLabel = "Newer" %} <svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"></svg>
{% set nextLabel = "Older" %} Newest{% endset %}
{% set lastLabel = "Oldest" %}
{% set prevLabel %}
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
Newer{% endset %}
{% set nextLabel %}Older
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
{% endset %}
{% set lastLabel %}Oldest
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>
{% endset %}
<nav aria-labelledby="pagination-title" class="pagination__wrapper"> <nav aria-labelledby="pagination-title" class="pagination__wrapper">
<h2 class="visually-hidden" id="pagination-title">Pagination</h2> <h2 class="visually-hidden" id="pagination-title">Pagination</h2>
@ -9,45 +20,38 @@
<li> <li>
{% if pagination.href.first %} {% if pagination.href.first %}
<a href="{{ pagination.href.first }}"> <a href="{{ pagination.href.first }}">
<i class="fa-solid fa-angles-left"></i> {{ firstLabel | safe }}
{{ firstLabel }}
</a> </a>
{% else %} {% else %}
<i class="fa-solid fa-angles-left"></i> {{ firstLabel | safe }}
{{ firstLabel }}
{% endif %} {% endif %}
</li> </li>
<li> <li>
{% if pagination.href.previous %} {% if pagination.href.previous %}
<a href=" {{ pagination.href.previous }}"> <a href=" {{ pagination.href.previous }}">
<i class="fa-solid fa-angle-left"></i> <i class="fa-solid fa-angle-left"></i>
{{ prevLabel }} {{ prevLabel | safe }}
</a> </a>
{% else %} {% else %}
<i class="fa-solid fa-angle-left"></i> {{ prevLabel | safe }}
{{ prevLabel }}
{% endif %} {% endif %}
</li> </li>
<li> <li>
{% if pagination.href.next %} {% if pagination.href.next %}
<a href=" {{ pagination.href.next }}"> <a href=" {{ pagination.href.next }}">
{{ nextLabel }} {{ nextLabel | safe }}
<i class="fa-solid fa-angle-right"></i>
</a> </a>
{% else %} {% else %}
{{ nextLabel }} {{ nextLabel | safe }}
<i class="fa-solid fa-angle-right"></i>
{% endif %} {% endif %}
</li> </li>
<li> <li>
{% if pagination.href.last %} {% if pagination.href.last %}
<a href=" {{ pagination.href.last }}"> <a href=" {{ pagination.href.last }}">
{{ lastLabel }} {{ lastLabel | safe }}
<i class="fa-solid fa-angles-right"></i>
</a> </a>
{% else %} {% else %}
{{ lastLabel }} {{ lastLabel | safe }}
<i class="fa-solid fa-angles-right"></i>
{% endif %} {% endif %}
</li> </li>
</ul> </ul>