diff --git a/assets/css/routes/user-center/responsive.css b/assets/css/routes/user-center/responsive.css index 321e1b04..d096c1fa 100644 --- a/assets/css/routes/user-center/responsive.css +++ b/assets/css/routes/user-center/responsive.css @@ -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; } } diff --git a/assets/css/routes/user-center/shell.css b/assets/css/routes/user-center/shell.css index bce908e5..9a8497dc 100644 --- a/assets/css/routes/user-center/shell.css +++ b/assets/css/routes/user-center/shell.css @@ -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 { diff --git a/templates/pages/page-profile.php b/templates/pages/page-profile.php index d495d7b0..196aba4c 100644 --- a/templates/pages/page-profile.php +++ b/templates/pages/page-profile.php @@ -50,11 +50,14 @@ get_header();
-