cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: drop js for pagination

Browse source
This commit is contained in:
Cory Dransfeldt 2023-07-03 11:09:14 -07:00
parent c1301631c4
commit 6ea5d7ba28
No known key found for this signature in database
2 changed files with 3 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/_includes/base.liquid
View file

@ -60,22 +60,5 @@
</head>
<body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800">
{{ content }}
<script>
(function() {
const pagination = document.getElementById('pagination');
if (pagination) {
pagination.addEventListener('change', (event) => {
const page = parseInt(event.target.value)
if (page === 1) {
window.location.href = '/'
} else {
window.location.href = `/${
event.target.value - 1
}/`
}
})
}
})()
</script>
</body>
</html>

19
src/_includes/paginator.liquid
View file

@ -1,4 +1,3 @@
<!--suppress HtmlFormInputWithoutLabel -->
<nav class="flex justify-between mt-8 items-center">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">
@ -14,21 +13,9 @@
{% heroicon "outline" "arrow-left" "Prevous" "width=20 height=20" %}
</button>
{% endif %}
<div class="flex flex-row items-center">
<select
id="pagination"
class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 dark:bg-purple-400 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-500 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
style="text-align-last:center">
{% for pageEntry in pagination.pages %}
<option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
{% endfor %}
</select>
<span>
of {{ pagination.links.size }}</span>
<div class="text-center">
{{ pagination.pageNumber | plus: 1 }} of {{ pagination.links.size }}
</div>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">
<button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Next page">
@ -43,4 +30,4 @@
{% heroicon "outline" "arrow-right" "Next" "width=20 height=20" %}
</button>
{% endif %}
</nav>
</nav>