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

Merge pull request 'fix(user-center): align dual-column with zibll flex shell' (#185) from worktree-fix-profile-credits-sidebar into main

Browse Source 
Reviewed-on: CYL/wordpress-theme-aksrt#185
This commit is contained in:
kate522
2026-07-17 09:19:22 +08:00
parent 59db0c0492 7177b090de
commit 830bb1fffe
3 changed files with 114 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-center/responsive.css
+54 -18
View File
@@ -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;
}
}
assets/css/routes/user-center/shell.css
+54 -47
View File
@@ -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 {
templates/pages/page-profile.php
+6 -7
View File
@@ -50,11 +50,14 @@ get_header();
<div id="toast-container"></div>
<script>function showToast(text,d){d=d||2500;var c=document.getElementById('toast-container');if(!c){c=document.createElement('div');c.id='toast-container';document.body.appendChild(c)}var t=document.createElement('div');t.className='toast-item';t.textContent=text;c.appendChild(t);setTimeout(function(){t.classList.add('fade-out');setTimeout(function(){if(t.parentNode)t.parentNode.removeChild(t)},300)},d)}</script>
<main id="main-content" class="site-main container content-shell content-shell--stream aksrt-profile" tabindex="-1">
<main id="main-content" class="site-main container content-shell content-shell--stream aksrt-profile user-center" tabindex="-1">
<div class="content-wrap">
<?php get_template_part('templates/parts/user-center/header', null, ['context' => $render_context]); ?>
<div class="content-layout content-layout--sidebar-left aksrt-profile__layout">
<div class="content-layout__primary uc-content">
<div class="user-center-body aksrt-profile__layout">
<aside class="user-center-sidebar uc-sidebar aksrt-profile__aside" role="complementary" aria-label="<?php esc_attr_e('用户中心导航', 'aksrt'); ?>">
<?php get_template_part('templates/parts/user-center/sidebar', null, ['context' => $render_context]); ?>
</aside>
<div class="user-center-content uc-content">
<div class="uc-drawer-overlay" id="uc-drawer-overlay"></div>
<?php if (isset($_GET['saved'])) : ?>
<div class="aksrt-user-center__notice" role="status"><?php esc_html_e('个人资料已保存', 'aksrt'); ?></div>
@@ -67,10 +70,6 @@ get_header();
<?php endforeach; ?>
<?php get_template_part('templates/parts/user-center/account-modals', null, ['context' => $render_context]); ?>
</div>
<aside class="content-layout__aside page-owned uc-sidebar aksrt-profile__aside" role="complementary" aria-label="<?php esc_attr_e('用户中心导航', 'aksrt'); ?>">
<?php get_template_part('templates/parts/user-center/sidebar', null, ['context' => $render_context]); ?>
</aside>
</div>
</div>
<?php get_template_part('templates/parts/user-center/runtime-config', null, ['context' => $render_context]); ?>