fix(user-center): align dual-column with zibll flex shell
Rebuild /profile layout as zibll-style user-center flex (sidebar 320px first, content flexes). Drop content-layout float shell classes so the stats/assets nav stays left of the credits panel on desktop and drawer on tablet/mobile.
This commit is contained in:
kate522 committed
1 parent
9829d94cb7
commit
7177b090de
3 files changed
+114
-72
No files matched your search
@@ -25,74 +25,81 @@
|
||||
padding: 0 0 40px;
|
||||
}
|
||||
|
||||
/* ==================== 页面自有双栏（page-owned，非全站 float 壳） ==================== */
|
||||
/* DOM: content first + aside second；桌面用 grid-area 把 aside 放左侧。
|
||||
* 不使用裸 .sidebar 类，避免 site-layout float / hide 规则误伤。 */
|
||||
body.aksrt-user-center .content-wrap {
|
||||
/* ==================== 页面自有双栏（对齐 zibll .user-center flex，不走全站 float 壳） ==================== */
|
||||
/* DOM: sidebar first + content second（与 zibll user-center-sidebar / user-center-content 一致）。
|
||||
* 选择器同时覆盖 body.aksrt-user-center 与 main.user-center / .aksrt-profile，避免 body class 漏打时失效。 */
|
||||
body.aksrt-user-center .content-wrap,
|
||||
.aksrt-profile .content-wrap,
|
||||
.user-center .content-wrap {
|
||||
float: none;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .aksrt-profile__layout {
|
||||
display: block;
|
||||
/* 对齐 zibll: .user-center { display:flex; gap:20px; } */
|
||||
body.aksrt-user-center .user-center-body,
|
||||
body.aksrt-user-center .aksrt-profile__layout,
|
||||
.aksrt-profile .user-center-body,
|
||||
.aksrt-profile .aksrt-profile__layout,
|
||||
.user-center .user-center-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 中和 site-layout-2/3 对 content-layout 的 margin 挖空 */
|
||||
/* 中和 site-layout-2/3 对 content-layout 的 margin 挖空（兼容旧 class） */
|
||||
body.aksrt-user-center.site-layout-1 .aksrt-profile__layout,
|
||||
body.aksrt-user-center.site-layout-2 .aksrt-profile__layout,
|
||||
body.aksrt-user-center.site-layout-3 .aksrt-profile__layout {
|
||||
body.aksrt-user-center.site-layout-3 .aksrt-profile__layout,
|
||||
body.aksrt-user-center.site-layout-1 .user-center-body,
|
||||
body.aksrt-user-center.site-layout-2 .user-center-body,
|
||||
body.aksrt-user-center.site-layout-3 .user-center-body {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* 私有导航：脱离全站 .sidebar float / site-layout-1 display:none */
|
||||
body.aksrt-user-center .uc-sidebar.page-owned,
|
||||
body.aksrt-user-center .aksrt-profile__aside.page-owned,
|
||||
body.aksrt-user-center .content-layout__aside.page-owned {
|
||||
/* 对齐 zibll: .user-center .user-center-sidebar { width:320px; flex-shrink:0; } */
|
||||
body.aksrt-user-center .user-center-sidebar,
|
||||
body.aksrt-user-center .uc-sidebar,
|
||||
body.aksrt-user-center .aksrt-profile__aside,
|
||||
.aksrt-profile .user-center-sidebar,
|
||||
.aksrt-profile .uc-sidebar,
|
||||
.aksrt-profile .aksrt-profile__aside,
|
||||
.user-center .user-center-sidebar {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 0 0 320px;
|
||||
width: 320px;
|
||||
max-width: 320px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height, 60px) + 20px);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body.aksrt-user-center .aksrt-profile__layout {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr);
|
||||
grid-template-areas: "aside primary";
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .aksrt-profile__layout > .uc-content,
|
||||
body.aksrt-user-center .aksrt-profile__layout > .content-layout__primary {
|
||||
grid-area: primary;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .aksrt-profile__layout > .uc-sidebar,
|
||||
body.aksrt-user-center .aksrt-profile__layout > .aksrt-profile__aside,
|
||||
body.aksrt-user-center .aksrt-profile__layout > .content-layout__aside.page-owned {
|
||||
grid-area: aside;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .uc-sidebar.page-owned,
|
||||
body.aksrt-user-center .aksrt-profile__aside.page-owned {
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height, 60px) + 20px);
|
||||
}
|
||||
/* 对齐 zibll: .user-center .user-center-content { width: calc(100% - 320px); } */
|
||||
body.aksrt-user-center .user-center-content,
|
||||
body.aksrt-user-center .uc-content,
|
||||
.aksrt-profile .user-center-content,
|
||||
.aksrt-profile .uc-content,
|
||||
.user-center .user-center-content {
|
||||
flex: 1 1 auto;
|
||||
width: calc(100% - 340px);
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uc-header__actions {
|
||||
@@ -114,8 +121,8 @@ body.aksrt-user-center .content-layout__aside.page-owned {
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
/* ==================== 左侧边栏 ==================== */
|
||||
/* sticky / 双栏位置由 body.aksrt-user-center .uc-sidebar.page-owned 负责；此处只定 chrome 布局 */
|
||||
/* ==================== 左侧边栏 chrome ==================== */
|
||||
/* sticky / 宽度由 .user-center-sidebar 负责；此处只定 section/btn 视觉 */
|
||||
.uc-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -316,9 +323,9 @@ body.aksrt-user-center .content-layout__aside.page-owned {
|
||||
}
|
||||
|
||||
/* ==================== 右侧内容区 ==================== */
|
||||
/* 宽度由 .user-center-content / flex 行负责；此处只定内容区 min-width */
|
||||
.uc-content {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uc-content .dashboard-panel {
|
||||
|
||||
Reference in new issue
Block a user