From 41a1b4f4651b23a2d17fe7c9bc12d3c1e12829ee Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 20 Aug 2026 12:58:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A1=B6=E9=83=A8=E5=A4=B4?= =?UTF-8?q?=E5=83=8F=E6=B5=AE=E5=B1=82=E5=8D=A1=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/frontend/header-userbox.css | 313 ++++++++++++++++++ inc/helpers/header/aksrt-header-navbar.php | 2 +- src/Core/ScriptsPart1b.php | 1 + .../zibll-navigation-contract.test.cjs | 15 +- 4 files changed, 328 insertions(+), 3 deletions(-) create mode 100644 assets/css/frontend/header-userbox.css diff --git a/assets/css/frontend/header-userbox.css b/assets/css/frontend/header-userbox.css new file mode 100644 index 00000000..938d4c0d --- /dev/null +++ b/assets/css/frontend/header-userbox.css @@ -0,0 +1,313 @@ +/** + * Header account popover. + * + * The shared Zibll navigation styles provide the popover shell. This module + * owns AKSRT-specific account content such as check-in, wallet and VIP rows. + */ + +.aksrt-header-userbox { + width: 260px; + color: var(--color-ink-2); +} + +.aksrt-header-userbox .user-info { + min-height: 44px; + padding: 2px; +} + +.aksrt-header-userbox .user-info > .avatar { + flex: 0 0 44px; + width: 44px; + height: 44px; + object-fit: cover; +} + +.aksrt-header-userbox .user-right, +.aksrt-header-userbox .user-right > .flex1 { + min-width: 0; +} + +.aksrt-header-userbox .user-right b { + display: flex; + align-items: center; + gap: 4px; + max-width: 100%; + overflow: hidden; + white-space: nowrap; +} + +.aksrt-header-userbox .display-name { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.aksrt-header-userbox .user-right .aksrt-vip-badge, +.aksrt-header-userbox .user-right .aksrt-user-level-icon, +.aksrt-header-userbox .user-right .aksrt-identity-medal, +.aksrt-header-userbox .user-right .aksrt-header-user-medal, +.aksrt-header-userbox .user-right .aksrt-identity-certification-icon { + flex: 0 0 auto; + height: 1.1em; +} + +.aksrt-header-userbox .user-info > .abs-right { + right: 2px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: 50%; + background: var(--surface-2); + color: var(--color-ink-3); +} + +.aksrt-header-userbox .aksrt-notification-badge { + position: absolute; + top: -4px; + right: -4px; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 17px; + height: 17px; + padding: 0 4px; + border: 2px solid var(--surface-1); + border-radius: 999px; + background: #e74c3c; + color: #fff; + font-size: 10px; + font-weight: 700; + line-height: 1; +} + +.aksrt-header-wallet { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + width: 100%; + padding: 9px 10px; + border-radius: 8px; + background: var(--surface-2); + color: var(--color-ink-2); + font-size: 12px; + line-height: 1.35; +} + +.aksrt-header-wallet:hover { + color: var(--color-ink); +} + +.aksrt-header-wallet__item { + min-width: 0; + white-space: nowrap; +} + +.aksrt-header-wallet__item i { + margin-right: 2px; + color: var(--color-ink-3); +} + +.aksrt-header-wallet__item b { + margin-left: 2px; + color: var(--color-ink); + font-weight: 700; +} + +.aksrt-header-checkin { + display: inline-flex !important; + align-items: center; + justify-content: center; + gap: 6px; + width: 100% !important; + min-height: 36px; + margin: 0; + padding: 8px 10px !important; + border: 0 !important; + border-radius: 6px !important; + background: #fff6db !important; + color: #8a5a00 !important; + font-size: 13px !important; + font-weight: 600; + line-height: 1.3; + white-space: nowrap; +} + +.aksrt-header-checkin > i { + margin: 0 !important; + color: #b78103 !important; +} + +.aksrt-header-checkin:hover { + background: #fff0c2 !important; + color: #8a5a00 !important; +} + +.aksrt-header-checkin.is-done, +.aksrt-header-checkin:disabled, +.aksrt-header-checkin.is-done:hover, +.aksrt-header-checkin:disabled:hover { + cursor: default; + opacity: .85; + background: #f3f4f6 !important; + color: #555 !important; +} + +.aksrt-header-checkin.is-done > i, +.aksrt-header-checkin:disabled > i { + color: #777 !important; +} + +.aksrt-header-payvip__cta, +.aksrt-header-payvip:not(.is-vip) .payvip-icon, +.aksrt-header-payvip:not(.is-vip) .but { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 6px !important; + width: 100% !important; + min-width: 0 !important; + min-height: 36px; + margin: 0 !important; + padding: 8px 10px !important; + border: 0 !important; + border-radius: 6px !important; + background: linear-gradient(90deg, #ff6b6b, #f04494) !important; + color: #fff !important; + font-size: 13px !important; + font-weight: 600; + line-height: 1.3; + text-align: center; + white-space: nowrap; +} + +.aksrt-header-payvip__cta > i, +.aksrt-header-payvip:not(.is-vip) .payvip-icon > i, +.aksrt-header-payvip:not(.is-vip) .but > i { + margin: 0 !important; + color: inherit !important; +} + +.aksrt-header-payvip__cta:hover { + color: #fff !important; + opacity: .92; +} + +.aksrt-header-payvip__active { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2px !important; + width: 100%; + min-height: 42px; + padding: 7px 10px !important; +} + +.aksrt-header-payvip__level { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; +} + +.aksrt-header-payvip__level > i { + margin: 0 !important; +} + +.aksrt-header-payvip__exp { + display: block; + margin: 0; + padding: 0; + border: 0; + background: none !important; + box-shadow: none; + color: inherit; + font-size: .85em; + font-weight: 400; + line-height: 1.3; + opacity: .9; +} + +/* Navigation links are globally capped at 50px. Account actions are taller + * icon tiles and must opt out or their labels overlap the following row. */ +.navbar-top .aksrt-header-userbox .header-user-href { + align-items: flex-start; + gap: 4px; +} + +.navbar-top .aksrt-header-userbox .header-user-href > a, +.aksrt-header-userbox .header-user-href > a { + display: flex; + flex: 1 1 0; + flex-direction: column; + align-items: center; + min-width: 0; + max-height: none; + padding: 10px 2px 2px; + line-height: 1.35; +} + +.aksrt-header-userbox .header-user-href > a:hover { + opacity: .75; +} + +.aksrt-header-userbox .header-user-href .toggle-radius { + flex: 0 0 36px; + width: 36px; + height: 36px; +} + +.aksrt-header-userbox .header-user-href > a > div:last-child { + max-width: 100%; + overflow: hidden; + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mobile-navbar .aksrt-header-userbox { + width: 100%; + max-width: 400px; + margin-right: auto; + margin-left: auto; +} + +body.dark-theme .aksrt-header-checkin { + background: rgba(255, 193, 7, .18) !important; + color: #f0c14b !important; +} + +body.dark-theme .aksrt-header-checkin > i { + color: #f0c14b !important; +} + +body.dark-theme .aksrt-header-checkin.is-done, +body.dark-theme .aksrt-header-checkin:disabled { + background: rgba(255, 255, 255, .08) !important; + color: #bbb !important; +} + +body.dark-theme .aksrt-header-wallet { + background: rgba(255, 255, 255, .06); +} + +body.dark-theme .aksrt-header-wallet__item, +body.dark-theme .aksrt-header-wallet__item b { + color: inherit; +} + +@media (max-width: 360px) { + .aksrt-header-userbox .header-user-href { + gap: 2px; + } + + .aksrt-header-userbox .header-user-href .toggle-radius { + flex-basis: 34px; + width: 34px; + height: 34px; + } +} diff --git a/inc/helpers/header/aksrt-header-navbar.php b/inc/helpers/header/aksrt-header-navbar.php index 74ab987b..eb96b295 100644 --- a/inc/helpers/header/aksrt-header-navbar.php +++ b/inc/helpers/header/aksrt-header-navbar.php @@ -275,7 +275,7 @@ if (!function_exists('aksrt_header_user_box_html')) : } } - $html = '
' . $con . '
'; + $html = '
' . $con . '
'; return $html; } endif; diff --git a/src/Core/ScriptsPart1b.php b/src/Core/ScriptsPart1b.php index fb02041e..9531c596 100644 --- a/src/Core/ScriptsPart1b.php +++ b/src/Core/ScriptsPart1b.php @@ -106,6 +106,7 @@ trait ScriptsPart1b { // AKSRT domain styles load after Zibll main.css. The old aggregate is // intentionally not used because it contains the removed navigation CSS. $enqueue_module('base'); + $enqueue_module('header-userbox'); $enqueue_module('card-primitives'); $enqueue_module('overlay-primitives'); $enqueue_module('layout'); diff --git a/tests/navigation/zibll-navigation-contract.test.cjs b/tests/navigation/zibll-navigation-contract.test.cjs index 179350d9..a633afa4 100644 --- a/tests/navigation/zibll-navigation-contract.test.cjs +++ b/tests/navigation/zibll-navigation-contract.test.cjs @@ -147,14 +147,25 @@ test('mobile navigation is one setting-driven left right or top drawer', () => { }); test('guest account member VIP and publish contracts share reference header DOM', () => { + const userboxCss = read('assets/css/frontend/header-userbox.css'); + assert.match(header, /is_user_logged_in\(\)/); - assert.match(header, /sub-user-box/); + assert.match(header, /sub-user-box aksrt-header-userbox/); assert.match(header, /signin-loader|signin/); - assert.match(header, /nav_user_pay_vip|nav_pay_vip/); + assert.match(header, /get_payment_vip_settings/); assert.match(header, /nav_user_newposts_btn/); assert.match(header, /nav_newposts/); assert.match(header, /navbar-form navbar-right navbar-but/); assert.match(header, /pay-vip/); + assert.match(scripts, /\$enqueue_module\('header-userbox'\)/); + assert.match(userboxCss, /\.aksrt-header-userbox \.user-info > \.avatar/); + assert.match(userboxCss, /\.aksrt-header-wallet/); + assert.match(userboxCss, /\.aksrt-header-checkin/); + assert.match(userboxCss, /\.aksrt-header-payvip__cta/); + assert.match(userboxCss, /\.header-user-href > a[\s\S]*?max-height: none/); + assert.match(userboxCss, /body\.dark-theme \.aksrt-header-checkin/); + assert.doesNotMatch(userboxCss, /user-dropdown|nav-user|html\.dark|theme-dark/); + assert.doesNotMatch(userboxCss, /--(?:main|muted|key)-|@import/); }); test('the only menu metadata and Walker contract is Zibll', () => {