fix(posts): repair the load-more skeleton and align it with the reference
Clicking 加载更多 showed no skeleton at all, and the placeholder shape did not match the reference theme's post cards. - Class-name mismatch: pagination.js queried .post-ajax-loader while every PHP producer emits .post_ajax_loader, so showSkeleton() never found a target and the loader stayed hidden. Accept both spellings. - Inline display:none on the loader (pagination, comments, widget tab panes) outranked .is-loading, so even the correct selector could not reveal it. Drop the inline style; the reference uses a bare <div class="post_ajax_loader"> and toggles visibility from JS. - loadNextPage() set indicator.style.display = "flex", which forced the .posts-item.card skeleton blocks (inline-block layout) into a single row instead of stacking vertically — the visible symptom. Remove those inline writes and drive .is-loading from CSS for every surface. - Scope the hide/show rules on the class itself rather than requiring an .ajaxpager ancestor: homepage tab panes, archive streams and comment lists sit at three different depths. - Rebuild aksrt_render_placeholder() on zib_get_post_placeholder's structure — list = t1/k1/k2 + two s1, card = t1 item-heading/k2 + two s1, thumb wrapped in post-graphic + radius8 item-thumbnail, all carrying ajax-item so the loader is not mistaken for a real card. - Add mini/mini_thumb modes so ContentRenderer::placeholder() stops hand-rolling the same markup; normalize its 'lists' arg to 'list'. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -31,7 +31,6 @@
|
||||
var failed = false;
|
||||
var clickTarget = container.querySelector(".next-page.ajax-next, .ias-btn") || container;
|
||||
var loadMoreBtn = container.querySelector("[data-aksrt-load-more]") || clickTarget;
|
||||
var indicator = container.querySelector(".post_ajax_loader");
|
||||
var successfulAutoLoads = 0;
|
||||
var iasMax = isComment
|
||||
? ((window.aksrtData && typeof aksrtData.commentIasMax !== "undefined") ? parseInt(aksrtData.commentIasMax, 10) : 0)
|
||||
@@ -54,7 +53,8 @@
|
||||
|
||||
function showSkeleton() {
|
||||
if (!target) return;
|
||||
var loader = target.querySelector(".post-ajax-loader");
|
||||
// PHP 产出下划线类名 post_ajax_loader;这里同时兼容连字符写法。
|
||||
var loader = target.querySelector(".post_ajax_loader, .post-ajax-loader");
|
||||
if (loader) {
|
||||
loader.classList.add("is-loading");
|
||||
}
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
function hideSkeleton() {
|
||||
if (!target) return;
|
||||
var loader = target.querySelector(".post-ajax-loader");
|
||||
var loader = target.querySelector(".post_ajax_loader, .post-ajax-loader");
|
||||
if (loader) {
|
||||
loader.classList.remove("is-loading");
|
||||
}
|
||||
@@ -107,7 +107,8 @@
|
||||
}
|
||||
|
||||
loading = true;
|
||||
if (indicator) indicator.style.display = "flex";
|
||||
// 骨架开关统一走 .is-loading(modal-runtime.css),不要直接写
|
||||
// display:flex —— 那会让卡片型骨架挤成一行而不是纵向堆叠。
|
||||
if (loadMoreBtn) {
|
||||
loadMoreBtn.classList.add("is-loading");
|
||||
loadMoreBtn.textContent = loadingText;
|
||||
@@ -197,7 +198,6 @@
|
||||
.finally(function () {
|
||||
loading = false;
|
||||
hideSkeleton();
|
||||
if (indicator) indicator.style.display = "none";
|
||||
if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore") && !failed) {
|
||||
loadMoreBtn.classList.remove("is-loading");
|
||||
loadMoreBtn.innerHTML = triggerText;
|
||||
|
||||
Reference in New Issue
Block a user