kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): unify avatar shape, move VIP icon to badge row

Browse Source 
Make --radius-avatar the single source of truth for frontend user avatar shape. A new primitive in components-ext.css (img.avatar / avatar-mini / avatar-md / avatar-lg / .avatar-img img) forces a circle on every avatar image, which covers the bare avatar-mini in the ban and report modals, the classless img inside the VIP modal's .avatar-img, and the post-card meta avatar that previously depended on post-card.css being enqueued. The user center header frame, the public user home hero and the friends page avatar switch to the same token because route CSS loads after the public bundle and would otherwise override the primitive.

The VIP icon no longer rides the avatar corner. The user card widget, the after-article author card and the sign-in modal stop opting into aksrt_get_avatar_box()'s corner badge, and the icon renders first in the badge/level row instead, since aksrt_get_user_name already orders name -> VIP -> auth -> medal -> level. The sign-in modal appends it after the display name and keeps the legacy precedence where a ban badge takes the VIP slot. The user card widget name row now shrinks its display name so the extra icon cannot overflow a narrow sidebar.

Verified with the new frontend-avatar-shape-contract test plus post-visual, user-card-runtime, circular-button-icon-margin, user-features and page-display contracts, and php -l on every changed PHP file. The public bundle was rebuilt with tools/build-public-assets.mjs.
This commit is contained in:
kate522
2026-10-10 13:53:07 +08:00
parent 16b57dcf1c
commit 9cb5e7bea3
14 changed files with 181 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/build/public.css
+18 -1
View File
@@ -2062,6 +2062,22 @@ html.dark .alert--info { color: #93C5FD; }
.aksrt-avatar--lg { width: var(--aksrt-avatar-size-lg); height: var(--aksrt-avatar-size-lg); }
.aksrt-avatar--xl { width: var(--aksrt-avatar-size-xl); height: var(--aksrt-avatar-size-xl); }
/* ============================================================
* 8b. 头像形状统一 — 圆形基底
* --radius-avatar 是前端用户头像形状的唯一来源。任何带头像类名的
* <img>（含未包 .avatar-img 的裸 img）都必须是正圆，供后续头像
* 挂件/装扮叠加。特异性 0,1,1 高于 main.css 的 .avatar{100px}，
* 同值为圆；路由 CSS 中显式声明圆角的头像框需各自对齐。
* ============================================================ */
img.avatar,
img.avatar-mini,
img.avatar-md,
img.avatar-lg,
.avatar-img img {
border-radius: var(--radius-avatar, 50%);
object-fit: cover;
}
/* ============================================================
* 9. 涟漪点击效果 — .aksrt-ripple
* 容器加此类，点击时 JS 注入 span.aksrt-ripple__wave
@@ -2638,7 +2654,8 @@ main.container,
.user-card.author .user-name > name {
overflow: visible;
}
.user-card.author .user-name > name > .display-name {
.user-card.author .user-name > name > .display-name,
.user-card.widget .user-name > name > .display-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;