Skip to content

Commit

Permalink
feat: style pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
greatislander committed Apr 12, 2024
1 parent 2b09b30 commit 1362ac8
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 24 deletions.
10 changes: 1 addition & 9 deletions src/_includes/layouts/page.njk
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,7 @@
{% endif %}
{% endfor %}
</div>
<nav data-pagination-navigation>
<ul role="list">
<li><a href="#" rel="prev">Previous</a></li>
<li><a href="#" rel="next">Next</a></li>
<template data-pagination-link>
<li><a href="#" data-page></a></li>
</template>
</ul>
</nav>
{% include "partials/components/pagination.njk" %}
</filter-container>
{% endblock %}

22 changes: 9 additions & 13 deletions src/_includes/partials/components/pagination.njk
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
<nav class="pagination" aria-label="{% _ locale, "posts navigation" %}">
<ul>
{%- if pagination.href.previous %}
<li><a href="{{ pagination.href.previous }}"><span aria-hidden="true">&larr;</span><span class="visually-hidden">{% _ locale, "previous" %}</span></a></li>
{%- endif %}
{%- for pageEntry in pagination.pages %}
<li><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %} aria-label="{% _ locale, "page %s of %s", loop.index, pagination.pages.length %}">{{ loop.index }}</a></li>
{%- endfor %}
{%- if pagination.href.next %}
<li><a href="{{ pagination.href.next }}"><span class="visually-hidden">{% _ locale, "next" %}</span><span aria-hidden="true">&rarr;</span></a></li>
{%- endif %}
</ul>
</nav>
<nav data-pagination-navigation aria-label="{{ 'pagination.label' | i18n }}">
<ul role="list">
<li><a href="#" rel="prev">{% include "svg/previous.svg" %}<span class="visually-hidden">{{ 'pagination.previous' | i18n }}</span></a></li>
<li><a href="#" rel="next">{% include "svg/next.svg" %}<span class="visually-hidden">{{ 'pagination.next' | i18n }}</span></a></li>
<template data-pagination-link>
<li><a href="#" data-page></a></li>
</template>
</ul>
</nav>
1 change: 1 addition & 0 deletions src/_includes/svg/next.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/_includes/svg/previous.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 26 additions & 2 deletions src/assets/styles/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -110,12 +110,16 @@ h2,
padding-block-end: 1.7rem;
}

.submissions article + article {
margin-block-start: 4rem;
}

.flow > * + * {
margin-block-start: var(--flow-space, 1em);
}

.filters {
--flow-space: 3.25rem;
--flow-space: 2.5rem;
}

.filters > h2 {
Expand Down Expand Up @@ -195,7 +199,7 @@ legend {
line-height: 1.219;
margin-block: 0;
padding-block-end: 0;
padding-block-start: 3.25rem;
padding-block-start: 2.5rem;
}

.submissions .presenters {
Expand Down Expand Up @@ -284,6 +288,26 @@ a {
text-decoration: none;
}

[data-pagination-navigation] ul {
display: flex;
gap: 1rem;
justify-content: center;
margin-block-start: 8.25rem;
}

[data-pagination-navigation] a {
align-items: center;
block-size: 2.5rem;
display: flex;
inline-size: 2.5rem;
justify-content: center;
}

[data-pagination-navigation] svg {
block-size: 0.75rem;
inline-size: auto;
}

filter-container {
margin-block-start: 5.3125rem;
}
Expand Down

0 comments on commit 1362ac8

Please sign in to comment.