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:
@@ -51,25 +51,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 响应式抽屉（对齐全站 ≤991 隐藏点，覆盖 display:none） ==================== */
|
||||
/* ==================== 响应式抽屉（对齐 zibll ≤767 全宽，覆盖 display:none） ==================== */
|
||||
/* zibll 在 max-width:767 把 user-center-sidebar/content 设 width:100%；
|
||||
* 本站沿用 ≤991.98 的 drawer 模式，与全站侧栏折叠点一致。 */
|
||||
@media (max-width: 991.98px) {
|
||||
body.aksrt-user-center .aksrt-profile__layout {
|
||||
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: block;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* 覆盖 layout.css 的 .content-layout__aside { display:none }（page-owned 私有导航不走全站 .sidebar） */
|
||||
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 {
|
||||
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 {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* 抽屉：离屏固定，FAB 打开；不参与文档流，避免堆在内容下方 */
|
||||
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 {
|
||||
display: flex;
|
||||
float: none;
|
||||
flex: none;
|
||||
width: 270px;
|
||||
max-width: 270px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .uc-sidebar.page-owned,
|
||||
body.aksrt-user-center .aksrt-profile__aside.page-owned {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -280px;
|
||||
@@ -82,16 +101,27 @@
|
||||
transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
|
||||
gap: 0;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .uc-sidebar.page-owned.is-open,
|
||||
body.aksrt-user-center .aksrt-profile__aside.page-owned.is-open {
|
||||
body.aksrt-user-center .user-center-sidebar.is-open,
|
||||
body.aksrt-user-center .uc-sidebar.is-open,
|
||||
body.aksrt-user-center .aksrt-profile__aside.is-open,
|
||||
.aksrt-profile .user-center-sidebar.is-open,
|
||||
.aksrt-profile .uc-sidebar.is-open,
|
||||
.aksrt-profile .aksrt-profile__aside.is-open,
|
||||
.user-center .user-center-sidebar.is-open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 抽屉头部 */
|
||||
body.aksrt-user-center .uc-sidebar.page-owned::before,
|
||||
body.aksrt-user-center .aksrt-profile__aside.page-owned::before {
|
||||
/* 抽屉头部装饰 */
|
||||
body.aksrt-user-center .user-center-sidebar::before,
|
||||
body.aksrt-user-center .uc-sidebar::before,
|
||||
body.aksrt-user-center .aksrt-profile__aside::before,
|
||||
.aksrt-profile .user-center-sidebar::before,
|
||||
.aksrt-profile .uc-sidebar::before,
|
||||
.aksrt-profile .aksrt-profile__aside::before,
|
||||
.user-center .user-center-sidebar::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100px;
|
||||
@@ -99,21 +129,27 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .uc-sidebar__section {
|
||||
body.aksrt-user-center .uc-sidebar__section,
|
||||
.aksrt-profile .uc-sidebar__section,
|
||||
.user-center .uc-sidebar__section {
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .uc-sidebar__section:first-of-type {
|
||||
body.aksrt-user-center .uc-sidebar__section:first-of-type,
|
||||
.aksrt-profile .uc-sidebar__section:first-of-type,
|
||||
.user-center .uc-sidebar__section:first-of-type {
|
||||
margin-top: -20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
body.aksrt-user-center .uc-sidebar__drawer-trigger {
|
||||
body.aksrt-user-center .uc-sidebar__drawer-trigger,
|
||||
.aksrt-profile .uc-sidebar__drawer-trigger,
|
||||
.user-center .uc-sidebar__drawer-trigger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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