kate522andClaude Fable 5
cf4554e7c8
Clicking 加载更多 in the 多栏目文章 widget showed no skeleton at all — the
list simply stayed still until the response arrived, then the new cards
appeared. The homepage stream, archives and comments already had a working
skeleton; the widget's AJAX load goes through a different client and never
found its loader.
Root cause was DOM placement, not visibility: ContentRenderer emitted
.post_ajax_loader as a *sibling* of .widget-ajaxpager, while the widget REST
client resolves it with container.querySelector('.post_ajax_loader'). The
node existed but could never match, so .is-loading was never added and the
skeleton stayed display:none. Inactive tab panes had the same shape, and the
direct-load branch of ajaxpager() emitted no loader at all.
Changes, all following the reference theme's post_ajax() contract in
zibll/js/main.js (beforeSend anchors the loader to the end of the list;
success only hides it, never removes it):
- ContentRenderer: nest the loader inside .widget-ajaxpager for both the
direct-load and inactive-tab branches, and drop the sibling append.
- widgets/frontend.js: anchorLoader() moves the loader to the end of the
list before .ajax-pag on every request; appended cards are inserted before
it; a replace preserves the node instead of wiping it with innerHTML; a
fallback loader is created when the DOM has none; loadItems() now returns
its promise; drop the unreachable is-loading auto-load branch.
- Message centre, user-home panels and the search page switch from spinner /
opacity feedback to the same .posts-item-shaped skeleton, so all AJAX
surfaces share one loading contract.
- Remove the second, never-wired skeleton system (.aksrt-skeleton-* in
core-ui.css) and the dead spinner stylesheets/rules (skeleton.css,
ajax-spinner.css, .load-more__*, --skeleton-base/--skeleton-shine) plus the
unregistered assets/js/waterfall.js.
- Extend the widget, message-centre, user-home and asset-ledger contract
tests to pin the loader inside the container, the class-only visibility
switch, and the absence of the deleted dead code.
Verified: 470 node tests, 136 PHP widget assertions, admin-contract and
widget-system audits all green; rebuilt public assets after the CSS/JS
removals.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
190 lines
4.2 KiB
CSS
190 lines
4.2 KiB
CSS
/* ========== 分页 — 对齐 legacy pagination ========== */
|
|
.pagination,
|
|
.aksrt-pagination,
|
|
.navigation.pagination .nav-links,
|
|
.pagenav.ajax-pag {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 24px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pagination a,
|
|
.pagination span,
|
|
.aksrt-pagination a,
|
|
.aksrt-pagination span,
|
|
.navigation.pagination a,
|
|
.navigation.pagination span,
|
|
.pagenav.ajax-pag a,
|
|
.pagenav.ajax-pag span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 34px;
|
|
min-height: 34px;
|
|
padding: 6px 10px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: var(--muted-color, var(--color-ink-3));
|
|
background: var(--surface-4, var(--main-border-color, rgba(50, 50, 50, 0.06)));
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-xs, 3px);
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.pagination a:hover,
|
|
.aksrt-pagination a:hover,
|
|
.navigation.pagination a:hover,
|
|
.pagenav.ajax-pag a:hover {
|
|
opacity: 1;
|
|
color: var(--color-primary);
|
|
background: var(--color-primary-soft);
|
|
}
|
|
|
|
.pagination .current,
|
|
.aksrt-pagination .current,
|
|
.navigation.pagination .current,
|
|
.pagenav.ajax-pag .current {
|
|
color: var(--color-on-primary, #fff);
|
|
background: var(--color-primary, #f04494);
|
|
border-color: var(--color-primary, #f04494);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pagination .dots,
|
|
.aksrt-pagination .dots,
|
|
.navigation.pagination .dots,
|
|
.pagenav.ajax-pag .dots {
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-ink-4, #999);
|
|
cursor: default;
|
|
min-width: auto;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.pagination .prev,
|
|
.pagination .next,
|
|
.aksrt-pagination .prev,
|
|
.aksrt-pagination .next,
|
|
.navigation.pagination .prev,
|
|
.navigation.pagination .next,
|
|
.pagenav.ajax-pag .prev,
|
|
.pagenav.ajax-pag .next {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pagination .prev i,
|
|
.pagination .next i,
|
|
.aksrt-pagination .prev i,
|
|
.aksrt-pagination .next i,
|
|
.navigation.pagination .prev i,
|
|
.navigation.pagination .next i,
|
|
.pagenav.ajax-pag .prev i,
|
|
.pagenav.ajax-pag .next i {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .pag-jump,
|
|
.aksrt-pagination .pag-jump,
|
|
.navigation.pagination .pag-jump {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .jump-input,
|
|
.aksrt-pagination .jump-input,
|
|
.navigation.pagination .jump-input {
|
|
width: 64px;
|
|
min-width: 64px;
|
|
padding: 6px 8px 5px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: var(--muted-color, var(--color-ink-3));
|
|
background: var(--main-bg-color, #fff);
|
|
border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
|
border-radius: 3px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.pagenav.ajax-pag .jump-input:focus,
|
|
.aksrt-pagination .jump-input:focus,
|
|
.navigation.pagination .jump-input:focus {
|
|
outline: none;
|
|
border-color: var(--focus-color, var(--color-primary, #f04494));
|
|
}
|
|
|
|
.pagenav.ajax-pag .pag-jump .ajax-next,
|
|
.aksrt-pagination .pag-jump .ajax-next,
|
|
.navigation.pagination .pag-jump .ajax-next {
|
|
min-width: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 上一页/下一页 */
|
|
.pagination__nav {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.pagination__nav a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
color: var(--color-ink-2, #4e5358);
|
|
background: var(--surface-1, #fff);
|
|
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.06));
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.pagination__nav a:hover {
|
|
color: var(--color-primary, #f04494);
|
|
border-color: var(--color-primary, #f04494);
|
|
}
|
|
|
|
/* 移动端 */
|
|
@media (max-width: 767px) {
|
|
.pagination a,
|
|
.pagination span,
|
|
.aksrt-pagination a,
|
|
.aksrt-pagination span,
|
|
.navigation.pagination a,
|
|
.navigation.pagination span,
|
|
.pagenav.ajax-pag a,
|
|
.pagenav.ajax-pag span {
|
|
min-width: 28px;
|
|
font-size: 12px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .pag-jump,
|
|
.aksrt-pagination .pag-jump,
|
|
.navigation.pagination .pag-jump {
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin-left: 0;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.pagenav.ajax-pag .jump-input,
|
|
.aksrt-pagination .jump-input,
|
|
.navigation.pagination .jump-input {
|
|
width: 58px;
|
|
min-width: 58px;
|
|
font-size: 12px;
|
|
}
|
|
}
|