fix(user-home): span the tab pagination skeleton across the post grid
The posts/favorites tabs turn the article list into a 2-column grid at >=992px. The AJAX pagination skeleton .post_ajax_loader is a direct child of that grid, so with no grid-column it was laid out as a single half-width card and the whole placeholder stack collapsed into one column while paging or switching tabs. Span the loader across every column and, while loading, give it the same 2-column template the real cards use so placeholders line up with them. The skeleton shape now follows the resolved render mode instead of a hardcoded 'list', so card mode no longer renders list blocks. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -154,8 +154,19 @@ test('skeleton blocks share the card gutter instead of overflowing it', () => {
|
||||
|
||||
// The user-home panel zeroes the container margin and the card gutters, so the
|
||||
// skeleton's inner item must not pick up any leftover compensation there.
|
||||
//
|
||||
// The panel also turns the list into a 2-column grid at >=992px. The loader is
|
||||
// a direct child of that grid, so without an explicit span it is laid out as a
|
||||
// single half-width card and the whole skeleton stack collapses into one
|
||||
// column. It must span every column and re-run the same 2-column template
|
||||
// internally while loading, so the placeholders line up with the real cards.
|
||||
const userHome = fs.readFileSync(path.join(root, 'assets/css/routes/user-home.css'), 'utf8')
|
||||
assert.match(userHome, /\.aksrt-user-home__post-list\[data-view="list"\] > \.post_ajax_loader \.posts-item \{\s*margin-right: 0;\s*margin-left: 0;/)
|
||||
assert.match(userHome, /\.aksrt-user-home__post-list\[data-view="list"\] > \.post_ajax_loader \{\s*grid-column: 1 \/ -1;/)
|
||||
assert.match(
|
||||
userHome,
|
||||
/\.dashboard-panel\.is-loading \.aksrt-user-home__post-list\[data-view="list"\] > \.post_ajax_loader \{[^}]*display: grid;[^}]*grid-template-columns: repeat\(2, minmax\(0, 1fr\)\);/s
|
||||
)
|
||||
})
|
||||
|
||||
test('asset tables are InnoDB and operation keys are unique', () => {
|
||||
|
||||
@@ -258,9 +258,14 @@ test('related posts, author page and widgets use their dedicated renderers', ()
|
||||
assert.doesNotMatch(author, /aksrt_render_pagination|aksrt_render_profile_pagination|\$_GET|add_query_arg/);
|
||||
// 面板 AJAX 翻页的骨架:与文章列表同一个 .post_ajax_loader 契约,
|
||||
// 由 author.js 的 .is-loading 切换(不能再靠 opacity 变暗反馈)。
|
||||
// 骨架形状必须跟随同一份渲染配置:写死 'list' 会让卡片模式下的占位
|
||||
// 与真实卡片不同轴。
|
||||
assert.match(author, /'append_inner_html' => \$user_home_panel_loader/);
|
||||
assert.match(author, /aksrt_render_placeholder\('list', max\(4, \(int\) \$per_page\)\)/);
|
||||
assert.match(author, /aksrt_render_placeholder\(\(string\) \(\$user_home_render_config\['mode'\] \?\? 'list'\), max\(4, \(int\) \$per_page\)\)/);
|
||||
assert.doesNotMatch(author, /aksrt_render_placeholder\('(list|card)'/);
|
||||
assert.match(authorFavorites, /'append_inner_html' => \$user_home_panel_loader/);
|
||||
assert.match(authorFavorites, /aksrt_render_placeholder\(\(string\) \(\$user_home_render_config\['mode'\] \?\? 'list'\), max\(4, \(int\) \$per_page\)\)/);
|
||||
assert.doesNotMatch(authorFavorites, /aksrt_render_placeholder\('(list|card)'/);
|
||||
assert.match(userHomeCss, /\.aksrt-user-home \.dashboard-panel \.post_ajax_loader \{/);
|
||||
assert.match(userHomeCss, /\.aksrt-user-home \.dashboard-panel\.is-loading \.post_ajax_loader \{/);
|
||||
assert.doesNotMatch(userHomeCss, /\.dashboard-panel\.is-loading \{[\s\S]{0,80}opacity: \.6/);
|
||||
@@ -477,7 +482,7 @@ test('profile routes load versioned leaf styles and keep dialogs hidden initiall
|
||||
assert.match(panelFavorites, /'context'\s*=>\s*'author'/);
|
||||
assert.match(panelFavorites, /aksrt_render_user_home_pagination\(\(int\) \$favorites_query->max_num_pages, \(int\) \$favorites_page\)/);
|
||||
assert.match(panelFavorites, /array_merge\(\$user_home_render_config, \['wrapper_class' => 'aksrt-user-home__post-list', 'append_inner_html' => \$user_home_panel_loader\]\), \$favorites_query\)/);
|
||||
assert.match(panelFavorites, /aksrt_render_placeholder\('list', max\(4, \(int\) \$per_page\)\)/);
|
||||
assert.match(panelFavorites, /aksrt_render_placeholder\(\(string\) \(\$user_home_render_config\['mode'\] \?\? 'list'\), max\(4, \(int\) \$per_page\)\)/);
|
||||
assert.match(read('templates/parts/user-home/panel-posts.php'), /array_merge\(\$user_home_render_config, \['wrapper_class' => 'aksrt-user-home__post-list', 'append_inner_html' => \$user_home_panel_loader\]\), \$author_posts\)/);
|
||||
assert.doesNotMatch(panelFavorites, /profile-list-item|\$_GET|add_query_arg/);
|
||||
// Only the two-column user center spans the viewport; the single-column public
|
||||
|
||||
Reference in New Issue
Block a user