fix(pagination): align the load-more skeleton width with the cards
首页「加载更多」的骨架比列表本身宽出一截:.posts-row 用 margin-left/right:-8px 抵消卡片的水平边距,而卡片边距规则是 `.posts-row > *:not(.post_ajax_loader)`,把骨架排除在补偿链之外, 于是骨架左右各宽出 8px(合计 16px)。移动端的 5px 覆盖块同理。 小工具的 .widget-ajaxpager / tab pane 也是一条独立的负边距补偿链 (margin: -8px 抵消 .posts-item 的 8px),骨架同样溢出。 修法是给骨架补上与卡片等同的水平边距,而不是写 inline display (会盖过 .is-loading 类规则)。改了 main.css、post-card.css 的 8px / 5px 两组规则,用户中心面板另加一条归零规则,因为那里的 容器 margin 与卡片边距都已清零,不能再叠加补偿。 顺带补一条契约测试:删掉任一 gutter 规则即失败,防止回归。 Verification: - node --test tests/**/*.test.cjs 471 passed / 0 failed - php tests/widget-system/run.php 136 assertions - php tools/audit-widget-system.php - php tools/audit-admin-contracts.php errors=0 (56 既有 baseline 警告) - node tools/build-public-assets.mjs CSS/JS 产物已重建 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -7486,6 +7486,13 @@ badge.top,
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
/* 骨架与真实卡片同宽同轴:.posts-row 用 -8px 抵消卡片边距,原 :not() 把骨架
|
||||
排除在补偿外,骨架于是比卡片左右各宽 8px。补上等同边距。 */
|
||||
.posts-row > .post_ajax_loader {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.posts-item {
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
@@ -7890,6 +7897,16 @@ badge.top,
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 骨架与卡片同宽同轴:.widget-ajaxpager / .tab-pane 用负边距抵消卡片的水平
|
||||
边距,骨架被排除在补偿链外,于是左右各宽出一个 gutter。这里补回等宽的
|
||||
边距,让骨架与真实卡片对齐。tab pane 的 style-list / index-tab 都适用。 */
|
||||
.widget-main-post.style-list .widget-ajaxpager > .post_ajax_loader,
|
||||
.widget-main-post.style-card .widget-ajaxpager > .post_ajax_loader,
|
||||
.widget-tab-post .tab-content > .tab-pane > .widget-ajaxpager > .post_ajax_loader {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.widget-tab-post.index-tab .list-inline {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@@ -11213,6 +11230,13 @@ body.error404 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.widget-main-post.style-list .widget-ajaxpager > .post_ajax_loader,
|
||||
.widget-main-post.style-card .widget-ajaxpager > .post_ajax_loader,
|
||||
.widget-tab-post .tab-content > .tab-pane > .widget-ajaxpager > .post_ajax_loader {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.posts-row {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
@@ -11223,6 +11247,11 @@ body.error404 {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
.posts-row > .post_ajax_loader {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.posts-item.card {
|
||||
width: calc(50% - 10px);
|
||||
margin: 5px;
|
||||
|
||||
Reference in New Issue
Block a user