From 3bfcecb51c75ccd43f5a623f7fe84d8087e327ad Mon Sep 17 00:00:00 2001 From: Gabriel Arazas Date: Sat, 24 Oct 2020 03:09:11 +0800 Subject: [PATCH] Improve the pagination As much as I avoid creating custom partials, it seem it is not possible with this component since it has gotten a bit bigger than I expected. The pagination component is a modified version of the internal pagination template but smarter. One of the major change is it will only apply ellipses if it has more than one page to skip. Also, it is easier to configure now that it is refactored to be one. Last but not least, it has comments. :) --- CHANGELOG.adoc | 7 ++++ assets/css/main.css | 37 ++++++++++++++---- i18n/en.toml | 14 ------- i18n/tl.toml | 14 ------- layouts/_default/list.html | 18 +-------- layouts/partials/pagination.html | 65 ++++++++++++++++++++++++++++++++ 6 files changed, 103 insertions(+), 52 deletions(-) create mode 100644 layouts/partials/pagination.html diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index a2d0ad8..f28cc11 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -13,6 +13,13 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version === Changed * Change the CSS linking with https://gohugo.io/hugo-pipes/introduction/[Hugo Pipes], moving it into the assets folder. + +* Improve the pagination partial. +** It has been modularized and refactored for easier development when extending the theme. +** The appearance has been revamped to be more intuitive. +** Replaces with numbers instead of the horrible phrases (which I didn't realize is horrible) so the i18n options for those are also gone. +** The pagination is also smarter when applying the ellipses, making sure to only skip if the difference between pages is more than one. + * Update the documentation with additional installations with Hugo Module. diff --git a/assets/css/main.css b/assets/css/main.css index dc606ce..3bfac22 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -227,17 +227,40 @@ footer { } .pagination { - list-style: none; display: flex; - justify-content: space-evenly; - padding: 0; - margin: 1rem; + font-size: 1rem; + list-style: none; + justify-content: center; + margin: 1.2rem 0; + padding: 0.8rem; +} + +.pagination > * { + margin: 0 0.25em; + text-decoration: none; +} + +.page-link { + background: var(--background-light); + color: var(--foreground-light); + text-decoration: none; + padding: 0.5em; +} + +.page-link:visited { + color: var(--foreground-light); +} + +.page-link--active { + font-weight: bolder; +} + +.page-link:hover { + background: var(--foreground); + color: var(--background); } .post { - align-items: center; - display: flex; - justify-content: space-between; margin-top: 1rem; } diff --git a/i18n/en.toml b/i18n/en.toml index 2bb4c51..eeb4719 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -1,17 +1,3 @@ -# Pagination -[first_page] -other = "Newest posts" - -[prev_page] -other = "Newer posts" - -[next_page] -other = "Older posts" - -[last_page] -other = "Oldest posts" - - # Content [published_by] other = "Authors" diff --git a/i18n/tl.toml b/i18n/tl.toml index 4f35396..1420bb3 100644 --- a/i18n/tl.toml +++ b/i18n/tl.toml @@ -1,17 +1,3 @@ -# Pagination -[first_page] -other = "Unang pahina" - -[prev_page] -other = "Balik" - -[next_page] -other = "Sunod" - -[last_page] -other = "Huling pahina" - - # Content [published_by] other = "Sinulat ni" diff --git a/layouts/_default/list.html b/layouts/_default/list.html index a96f8fd..4edec64 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -16,21 +16,5 @@ Otherwise, we take the pages of a section. */ -}} {{ end }} - +{{ partial "pagination.html" (dict "Paginator" .Paginator "activeNumberOfPages" 2) }} {{ end }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..6c9a9a7 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,65 @@ +{{ $pag := .Paginator }} + +{{- /* The minimum pages starting from the first page */ -}} +{{ $minimumPage := .minimumPage | default 1 }} + +{{- /* The number of pages to be shown with the active page. */ -}} +{{ $activeNumberOfPages := .activeNumberOfPages | default 2 }} + +{{- /* Since the active page is also included when adding the in-between pages of the active page, we need to increment it to mitigate against it. */ -}} +{{ $midpointPages := add $activeNumberOfPages 1 }} + +{{ if gt $pag.TotalPages 1 -}} + +{{ end }}