Tortellini/duckling
1
0
Fork 0
forked from david-swift/duckling
Code Pull Requests Activity

Implement simple theme for blog list paginators #1

Browse Source
This commit is contained in:
david-swift 2025-02-25 15:36:07 +01:00
parent 13d648511c
commit b096ba6bc4
2 changed files with 16 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
sass/_article-list.scss
View File

@ -253,23 +253,22 @@
#paginator {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-between;
align-items: center;
gap: 0.25rem;
margin-block-start: 4rem;
#paginator-first,
#paginator-previous,
#paginator-next,
#paginator-last {
#paginator-next {
display: inline-block;
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: 1rem;
background-color: var(--fg-muted-1);
padding: 0.5rem;
padding: 0.7rem;
color: var(--fg-muted-4);
line-height: 0;
text-decoration: None;
.icon {
transition: var(--transition);
@ -280,10 +279,13 @@
}
}
a#paginator-first,
a#paginator-previous,
a#paginator-next,
a#paginator-last {
a#paginator-next {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&:hover {
background-color: var(--fg-muted-2);
color: var(--fg-muted-5);
@ -295,29 +297,12 @@
}
}
span#paginator-first,
span#paginator-previous,
span#paginator-next,
span#paginator-last {
span#paginator-next {
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 {
-webkit-mask-image: var(--icon-first);
mask-image: var(--icon-first);
}
#paginator-previous .icon {
-webkit-mask-image: var(--icon-previous);
mask-image: var(--icon-previous);

36
templates/article_list.html
View File

@ -46,46 +46,20 @@
{%- 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) }}">
<a id="paginator-previous" href="{{ paginator.previous }}">
<i class="icon"></i>
<div>{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}</div>
</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>
<div></div>
{%- if paginator.next -%}
<a id="paginator-next" href="{{ paginator.next }}" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
<a id="paginator-next" href="{{ paginator.next }}">
<div>{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}</div>
<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 -%}