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:
kate522andClaude Fable 5 committed 2026-10-04 00:25:26 +08:00
1 parent cf4554e7c8
commit f61142ee9a
8 files changed
+153 -3

No files matched your search

+28
View File
@@ -14,6 +14,13 @@
margin-left: 8px !important;
}
/* 骨架与真实卡片同宽:.posts-row 以 -8px 抵消卡片边距,loader 被上面的
:not() 排除在补偿外,会宽出 16px;这里补上等同的水平边距。 */
.posts-row > .post_ajax_loader {
margin-right: 8px;
margin-left: 8px;
}
.posts-item {
margin: 15px 0;
padding: 20px;
@@ -447,6 +454,15 @@
margin-left: 8px;
}
/* 骨架与卡片同宽同轴:.widget-ajaxpager / .tab-pane 用负边距抵消卡片的水平
边距,骨架被排除在补偿链外,于是左右各宽出一个 gutter。 */
.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-right: 8px;
margin-left: 8px;
}
.posts-mini:hover img,
.posts-item:hover .item-thumbnail img,
.posts-item.mult-thumb .thumb-items > span > img:hover {
@@ -517,6 +533,11 @@
margin-left: 5px !important;
}
.posts-row > .post_ajax_loader {
margin-right: 5px;
margin-left: 5px;
}
.posts-item .item-thumbnail {
width: 138px;
}
@@ -563,6 +584,13 @@
margin-left: 5px;
}
.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-right: 5px;
margin-left: 5px;
}
.swiper-scroll .posts-item {
margin-right: 10px !important;
}