feat: Add jump-to-page dialog and improve pagination logic and styling (#1303)
* feat: add jump-to-page dialog on pagination ellipsis - Replace pagination windowing algorithm with a tighter 5-item window (curr-1 / curr / curr+1, clamped at edges) and hide-on-mobile for pages more than 1 step away from the current page - Ellipsis spans now carry the pagination-jump-trigger class and open a native <dialog> on click instead of being static decorations - Add <dialog id="pagination-jump-dialog"> with number input, Go button, and Enter-key hint; data-total / data-first-url / data-format-url attributes on <nav> give the JS all it needs to build the target URL - Add assets/ts/pagination.ts: setupPaginationJump() with Fisher-Yates backdrop-click and ESC handling, animated open/close via .closing class - Wire setupPaginationJump() into Stack.init() in main.ts - Extend pagination.scss with .hide-on-mobile, .pagination-jump-trigger hover style, and the full #pagination-jump-dialog styling + keyframe scale-up/scale-down animations - Add [pagination] i18n keys (jumpToPage / jump / pressEnter) to en / zh / zh-hant-tw / zh-hant-hk / ja * style: align pagination code with upstream conventions - pagination.html: collapse multi-line span/class/aria attrs to single lines; use HTML5 void element syntax; fix hint div indentation - pagination.scss: 2-space indent → 4-space indent - pagination.ts: tab indent → 4-space indent; export const arrow fn → export function declaration * chore: update layouts/_partials/pagination.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: add aria-labelledby attrributes for better accesibility Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix: use { once: true } for the listener and guard against re-entry when .closing is already set. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * style: replace hardcoded values with design tokens and improve dialog UX - Replace all hardcoded px spacing in .page-link with --spacing-* tokens - Use @include card-style in #pagination-jump-dialog; override with --shadow-l2 - Replace padding: 24px with var(--card-padding) for responsive dialog padding - Align header title/subtitle to space-between for cleaner layout - Replace hardcoded gaps/padding in form with spacing tokens - Fix input/button border-radius from 8px to 6px (better proportion for 44px height) - Fix focus ring: use color-mix(accent-color 20%) so it's visible in dark mode - Add :focus-visible + outline:none to fully suppress native browser outline - Remove translateY from button hover for more restrained interaction - Scope transition to specific properties (border-color, box-shadow, background-color) * chore: add pagination test articles for easier debugging * style: enhance backdrop animations for pagination jump dialog * style: replace pagination ellipsis spans with buttons for improved accessibility * fix: check if browser supports dialog API before continue with pagination jump setup * fix: retain focus on last active element when closing pagination jump dialog * fix: style for page-link button (pagination-jump) * style: adjust width of pagination jump dialog, add container padding * style: simplify * refactor: simplify pagination link logic --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Jimmy Cai <jimmy@cai.im>
This commit is contained in:
co-authored by
Copilot
Jimmy Cai
parent
8e3687431f
commit
37f6a77a1a
@@ -76,3 +76,8 @@ darkMode = "Dark Mode"
|
||||
[cookies.functional]
|
||||
title = "Functional"
|
||||
text = "These cookies enable features like comments and embedded content."
|
||||
|
||||
[pagination]
|
||||
jumpToPage = "Jump to page"
|
||||
jump = "Go"
|
||||
pressEnter = "Press Enter to jump"
|
||||
|
||||
@@ -67,3 +67,8 @@ darkMode = "ダークモード"
|
||||
[cookies.functional]
|
||||
title = "機能的"
|
||||
text = "これらのCookieは、コメントや埋め込みコンテンツなどの機能を有効にします."
|
||||
|
||||
[pagination]
|
||||
jumpToPage = "ページにジャンプ"
|
||||
jump = "ジャンプ"
|
||||
pressEnter = "Enter キーでジャンプ"
|
||||
|
||||
@@ -67,3 +67,8 @@ darkMode = "深色模式"
|
||||
[cookies.functional]
|
||||
title = "功能性"
|
||||
text = "這些 Cookie 啟用評論和嵌入內容等功能."
|
||||
|
||||
[pagination]
|
||||
jumpToPage = "跳轉到頁碼"
|
||||
jump = "跳轉"
|
||||
pressEnter = "按 Enter 鍵跳轉"
|
||||
|
||||
@@ -67,3 +67,8 @@ darkMode = "夜晚模式"
|
||||
[cookies.functional]
|
||||
title = "功能性"
|
||||
text = "這些 Cookie 啟用評論和嵌入內容等功能."
|
||||
|
||||
[pagination]
|
||||
jumpToPage = "跳轉到頁碼"
|
||||
jump = "跳轉"
|
||||
pressEnter = "按 Enter 鍵跳轉"
|
||||
|
||||
@@ -67,3 +67,8 @@ darkMode = "暗色模式"
|
||||
[cookies.functional]
|
||||
title = "功能性"
|
||||
text = "这些 Cookie 启用评论和嵌入内容等功能."
|
||||
|
||||
[pagination]
|
||||
jumpToPage = "跳转到页码"
|
||||
jump = "跳转"
|
||||
pressEnter = "按 Enter 键跳转"
|
||||
|
||||
Reference in New Issue
Block a user