From 12b2961432577b8ce1fca7088759bca4f8220bbb Mon Sep 17 00:00:00 2001 From: daudix Date: Sun, 22 Sep 2024 06:06:09 +0300 Subject: [PATCH] More visually interesting paginator, move paginator to article-list.html --- CHANGELOG.md | 5 +++ sass/_article-list.scss | 73 ++++++++++++++++++-------------- templates/article_list.html | 46 ++++++++++++++++++++ templates/partials/articles.html | 46 -------------------- 4 files changed, 92 insertions(+), 78 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 180f2f7..895b5ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.1.0...main) +### Changed + +- More visually interesting paginator. +- Move paginator from `articles.html` to `article-list.html`. + ## [5.1.0](https://codeberg.org/daudix/duckquill/compare/v5.0.0...v5.1.0) ### Added diff --git a/sass/_article-list.scss b/sass/_article-list.scss index 72966be..774b8f5 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -343,7 +343,7 @@ flex-direction: row; justify-content: center; align-items: center; - gap: 0.5rem; + gap: 0.25rem; margin-block-start: 4rem; #paginator-first, @@ -353,21 +353,12 @@ display: inline-block; transition: var(--transition); box-shadow: var(--edge-highlight); - border-radius: 999px; + border-radius: 1rem; background-color: var(--fg-muted-1); padding: 0.5rem; color: var(--fg-muted-4); line-height: 0; - &:hover { - background-color: var(--fg-muted-2); - color: var(--fg-muted-5); - } - - &:active { - transform: var(--active); - } - .icon { transition: var(--transition); width: 1rem; @@ -379,6 +370,39 @@ } } + a#paginator-first, + a#paginator-previous, + a#paginator-next, + a#paginator-last { + &:hover { + background-color: var(--fg-muted-2); + color: var(--fg-muted-5); + } + + &:active { + transform: var(--active); + border-radius: 1rem; + } + } + + span#paginator-first, + span#paginator-previous, + span#paginator-next, + span#paginator-last { + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + #paginator-previous { + border-start-end-radius: var(--rounded-corner-small); + border-end-end-radius: var(--rounded-corner-small); + } + + #paginator-next { + border-start-start-radius: var(--rounded-corner-small); + border-end-start-radius: var(--rounded-corner-small); + } + #paginator-first .icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 2v12h2V8.414l5.293 5.293a1 1 0 1 0 1.414-1.414L7.414 8l4.293-4.293a1 1 0 1 0-1.414-1.414L5 7.586V2zm0 0'/%3E%3C/svg%3E"); } @@ -395,29 +419,14 @@ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M11 2v5.586L5.707 2.293a1 1 0 1 0-1.414 1.414L8.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L11 8.414V14h2V2zm0 0'/%3E%3C/svg%3E"); } - span { - &#paginator-first, - &#paginator-previous, - &#paginator-next, - &#paginator-last { - opacity: var(--disabled-opacity); - cursor: not-allowed; - - &:hover { - background-color: var(--fg-muted-1); - color: var(--fg-muted-4); - } - - &:active { - transform: none; - } - } - } - #paginator-counter { display: inline-block; - margin: 0 0.5rem; - color: var(--fg-muted-5); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner-small); + background-color: var(--accent-color-alpha); + padding: 0.5rem 0.625rem; + color: var(--accent-color); + font-weight: bold; line-height: 1; font-variant-numeric: tabular-nums; } diff --git a/templates/article_list.html b/templates/article_list.html index f5fd694..d82222d 100644 --- a/templates/article_list.html +++ b/templates/article_list.html @@ -23,4 +23,50 @@

{% include "partials/articles.html" %} + +{%- if paginator.pages -%} + +{%- endif -%} {% endblock content %} diff --git a/templates/partials/articles.html b/templates/partials/articles.html index 5ec3c4c..687fe30 100644 --- a/templates/partials/articles.html +++ b/templates/partials/articles.html @@ -82,49 +82,3 @@ {%- endfor %} - -{%- if paginator.pages -%} - -{%- endif -%}