fix(skeleton): put the widget gutter relief on the skeleton's inner item
小工具(首页挂载的 / 侧栏的)骨架加载占位比真实卡片窄一截:card 布局下
每侧窄 8px,视觉上就是「骨架小了一些」。
小工具的卡片走 skip_wrapper=true,直接挂在 .widget-ajaxpager 上
(src/WidgetSystem/PostRenderer.php),不经过 .posts-row,因此只受小工具
这条独立的负边距链作用:
.widget-ajaxpager margin: -8px
.posts-item.card(真实卡片) margin: 8px ← 卡片自身自带
.post_ajax_loader(外层) margin: 8px ← f61142ee 加的补偿
.posts-item.card(骨架内层) margin: 8px ← 同一条卡片规则
骨架于是拿到 8px(外层 loader)+ 8px(内层卡片)= 16px,而真实卡片只有
8px,内容区每侧少 8px。list 模式没暴露是因为 .posts-item 的 8px 来自
`.widget-main-post.style-list .posts-item`,该规则只覆盖 style-list、
不作用于骨架,外层的 8px 恰好补上 list 卡片应有的一份,刚好对齐。
修法:把水平补偿从外层 .post_ajax_loader 移到骨架内层的 .posts-item /
.posts-mini —— 与真实卡片同一个元素、同一条选择器,于是两者逐像素同宽,
也顺带回答了「补偿链的拥有者是谁」这个一直在打补丁的问题。
- assets/css/main.css、assets/css/frontend/post-card.css:.posts-row 与
.widget-ajaxpager 两条链、桌面 8px 与移动 5px 两组,共 8 处规则改为
内层选择器。
- assets/css/routes/user-home.css:面板归零规则同步改到内层,否则它归零
的是已经失效的外层,旧补偿会重新显形。
- tests/widget-system/asset-ledger-contract.test.cjs:把守卫断言改成内层
选择器,并修正规则匹配以支持选择器组(.posts-item, .posts-mini)。
注释说明为何不能补偿外层。
参考主题 zibll 完全没有 .post_ajax_loader 的 margin 规则;AKSRT 需要它,
是因为骨架多包了一层。定位在内层是与参考主题等价的正确解。
Verification:
- node tests/widget-system/asset-ledger-contract.test.cjs 16/16
- node tests/widget-system/post-visual-contract.test.cjs 22/22
- node tests/widget-system/zibll-modern-widgets-contract.test.cjs 10/10
- node tests/widget-system/lazyload-contract.test.cjs 7/7
- node tests/widget-system/frontend-lifecycle-contract.test.cjs 13/13
- node tests/widget-system/page-display-contract.test.cjs 18/18
- node tests/widget-system/message-center-contract.test.cjs 8/8
- php tools/audit-admin-contracts.php errors=0
- build:public 已重建;旧外层规则在源与产物中均已归零
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -15,8 +15,12 @@
|
||||
}
|
||||
|
||||
/* 骨架与真实卡片同宽:.posts-row 以 -8px 抵消卡片边距,loader 被上面的
|
||||
:not() 排除在补偿外,会宽出 16px;这里补上等同的水平边距。 */
|
||||
.posts-row > .post_ajax_loader {
|
||||
:not() 排除在补偿外,会宽出 16px;这里补上等同的水平边距。
|
||||
补偿落在骨架内层的 .posts-item 上(与真实卡片同一元素),不落外层
|
||||
.post_ajax_loader —— 否则内层 .posts-item.card 的 margin:8px 会与外层
|
||||
补偿叠成 16px,小工具 card 骨架因此窄出 8px。 */
|
||||
.posts-row > .post_ajax_loader .posts-item,
|
||||
.posts-row > .post_ajax_loader .posts-mini {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -455,10 +459,12 @@
|
||||
}
|
||||
|
||||
/* 骨架与卡片同宽同轴:.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 {
|
||||
边距。补偿同样落在骨架内层的 .posts-item 上(与真实卡片同一元素),
|
||||
不落外层 .post_ajax_loader —— 否则内层 .posts-item.card 自带的 margin:8px
|
||||
会与外层补偿叠成 16px,card 骨架因此窄出 8px。 */
|
||||
.widget-main-post.style-list .widget-ajaxpager > .post_ajax_loader .posts-item,
|
||||
.widget-main-post.style-card .widget-ajaxpager > .post_ajax_loader .posts-item,
|
||||
.widget-tab-post .tab-content > .tab-pane > .widget-ajaxpager > .post_ajax_loader .posts-item {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -533,7 +539,8 @@
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.posts-row > .post_ajax_loader {
|
||||
.posts-row > .post_ajax_loader .posts-item,
|
||||
.posts-row > .post_ajax_loader .posts-mini {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@@ -584,9 +591,9 @@
|
||||
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 {
|
||||
.widget-main-post.style-list .widget-ajaxpager > .post_ajax_loader .posts-item,
|
||||
.widget-main-post.style-card .widget-ajaxpager > .post_ajax_loader .posts-item,
|
||||
.widget-tab-post .tab-content > .tab-pane > .widget-ajaxpager > .post_ajax_loader .posts-item {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user