warrenchen/innovedus_cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pagination): Enhance disabled state styling for pagination links

Browse Source
This commit is contained in:
Warren Chen 2026-03-17 14:41:44 +09:00
parent ccb675f4bc
commit be99e5e635
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
innovedus_cms/home/static/css/article_list.css
View File

@ -152,6 +152,15 @@
height: 44px; height: 44px;
} }
.pagination a.disabled {
pointer-events: none;
color: #0e1b4266;
}
.pagination a.disabled button {
color: inherit;
}
.pagination .prev-page span, .pagination .prev-page span,
.pagination .next-page span { .pagination .next-page span {
height: 44px; height: 44px;

17
innovedus_cms/home/templates/home/includes/page-article-list.html
View File

@ -12,18 +12,20 @@
<a class="prev-page" href="?page={{ category.items.previous_page_number }}"> <a class="prev-page" href="?page={{ category.items.previous_page_number }}">
<button class="left-arrow" type="button" data-dir="left" aria-label="更多文章"> <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
<svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142"> <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
<path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/> <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
</svg> </svg>
</button> </button>
<span>BACK</span> <span>BACK</span>
</a> </a>
{% else %} {% else %}
<a class="prev-page disabled" aria-disabled="true">
<button class="left-arrow" type="button" data-dir="left" aria-label="更多文章"> <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
<svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142"> <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
<path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/> <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
</svg> </svg>
</button> </button>
<span>BACK</span> <span>BACK</span>
</a>
{% endif %} {% endif %}
<div class="pagination-pages"> <div class="pagination-pages">
{% for page_num in category.page_range %} {% for page_num in category.page_range %}
@ -41,10 +43,19 @@
<span>NEXT</span> <span>NEXT</span>
<button class="right-arrow" type="button" data-dir="right" aria-label="更多文章"> <button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
<svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142"> <svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
<path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/> <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
</svg> </svg>
</button> </button>
</a> </a>
{% else %}
<a class="next-page disabled" aria-disabled="true">
<span>NEXT</span>
<button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
<svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
<path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
</svg>
</button>
</a>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}