hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More visually interesting paginator, move paginator to article-list.html

Browse Source
This commit is contained in:
daudix
2024-09-22 06:06:09 +03:00
parent cfff21755b
commit 12b2961432
4 changed files with 92 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -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

73
sass/_article-list.scss
View File

@ -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;
}

46
templates/article_list.html
View File

@ -23,4 +23,50 @@
</p>
{% include "partials/articles.html" %}
{%- if paginator.pages -%}
<nav id="paginator">
{%- if paginator.first != current_url -%}
<a id="paginator-first" href="{{ paginator.first }}" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{% else %}
<span id="paginator-first" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
{%- if paginator.previous -%}
<a id="paginator-previous" href="{{ paginator.previous }}" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{% else %}
<span id="paginator-previous" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
<span id="paginator-counter">{{ paginator.current_index }}/{{ paginator.number_pagers }}</span>
{%- if paginator.next -%}
<a id="paginator-next" href="{{ paginator.next }}" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{%- else -%}
<span id="paginator-next" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
{%- if paginator.last != current_url -%}
<a id="paginator-last" href="{{ paginator.last }}" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{% else %}
<span id="paginator-last" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
</nav>
{%- endif -%}
{% endblock content %}

46
templates/partials/articles.html
View File

@ -82,49 +82,3 @@
</article>
{%- endfor %}
</div>
{%- if paginator.pages -%}
<nav id="paginator">
{%- if paginator.first != current_url -%}
<a id="paginator-first" href="{{ paginator.first }}" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{% else %}
<span id="paginator-first" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
{%- if paginator.previous -%}
<a id="paginator-previous" href="{{ paginator.previous }}" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{% else %}
<span id="paginator-previous" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
<span id="paginator-counter">{{ paginator.current_index }}/{{ paginator.number_pagers }}</span>
{%- if paginator.next -%}
<a id="paginator-next" href="{{ paginator.next }}" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{%- else -%}
<span id="paginator-next" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
{%- if paginator.last != current_url -%}
<a id="paginator-last" href="{{ paginator.last }}" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
{% else %}
<span id="paginator-last" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
<i class="icon"></i>
</span>
{%- endif -%}
</nav>
{%- endif -%}