fix(nav): header publish menu + userbox card polish
Unpaint multi-type 发布 wrapper, fix light-menu ink, avatar unread dot clipping, check-in REST double namespace, and user-card VIP/check-in layout.
This commit is contained in:
1 parent
df2874698c
commit
77164fee45
9 files changed
+126
-38
No files matched your search
@@ -83,6 +83,12 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
|
/* Wrapper must not inherit CTA paint (pink/primary fill + white text). */
|
||||||
|
background: transparent !important;
|
||||||
|
color: inherit;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newadd-btns .drop-newadd,
|
.newadd-btns .drop-newadd,
|
||||||
@@ -133,7 +139,8 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
color: inherit;
|
/* Explicit ink color — never inherit white from CTA toggle. */
|
||||||
|
color: var(--color-ink, #222);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -151,6 +158,18 @@
|
|||||||
color: var(--focus-color, var(--color-primary));
|
color: var(--focus-color, var(--color-primary));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.dark .newadd-btns__item,
|
||||||
|
body.dark-theme .newadd-btns__item,
|
||||||
|
body.theme-dark .newadd-btns__item {
|
||||||
|
color: var(--color-ink, #f8fafc);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .newadd-btns__item:hover,
|
||||||
|
body.dark-theme .newadd-btns__item:hover,
|
||||||
|
body.theme-dark .newadd-btns__item:hover {
|
||||||
|
color: var(--focus-color, var(--color-primary));
|
||||||
|
}
|
||||||
|
|
||||||
/* Generic hover-show (zibll parity) */
|
/* Generic hover-show (zibll parity) */
|
||||||
.hover-show {
|
.hover-show {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -88,6 +88,43 @@
|
|||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Active VIP: level on line 1, smaller expiry on line 2 (no orange pill). */
|
||||||
|
.aksrt-header-payvip .payvip-icon.aksrt-header-payvip__active,
|
||||||
|
.aksrt-header-payvip__active {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2px;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aksrt-header-payvip__level {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aksrt-header-payvip__level > i {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aksrt-header-payvip__exp {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85em;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.3;
|
||||||
|
opacity: 0.9;
|
||||||
|
background: none !important;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
color: inherit;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
.aksrt-header-badges {
|
.aksrt-header-badges {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|||||||
@@ -154,7 +154,8 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: none; /* 对齐 zibll:头像无边框 */
|
border: none; /* 对齐 zibll:头像无边框 */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
/* Allow unread corner badge to paint outside the avatar circle. */
|
||||||
|
overflow: visible;
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
transition: box-shadow var(--dur-fast, 0.15s) var(--ease);
|
transition: box-shadow var(--dur-fast, 0.15s) var(--ease);
|
||||||
}
|
}
|
||||||
@@ -168,6 +169,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: block;
|
display: block;
|
||||||
|
border-radius: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-dropdown {
|
.user-dropdown {
|
||||||
@@ -679,13 +681,16 @@
|
|||||||
}
|
}
|
||||||
.nav-user__dot {
|
.nav-user__dot {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: -1px;
|
||||||
right: 0;
|
right: -1px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--color-error, #ef4444);
|
background: var(--color-error, #ef4444);
|
||||||
border: 2px solid var(--surface-1, #fff);
|
border: 2px solid var(--surface-1, #fff);
|
||||||
|
box-sizing: content-box;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.nav-user__guest-avatar {
|
.nav-user__guest-avatar {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
@@ -715,20 +720,27 @@
|
|||||||
gap: 6px;
|
gap: 6px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
/* Beat generic `.user-dropdown a { width:100%; height:44px }` sizing. */
|
||||||
|
.user-dropdown a.user-dropdown__msg,
|
||||||
.user-dropdown__msg {
|
.user-dropdown__msg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
width: 34px;
|
width: 34px !important;
|
||||||
height: 34px;
|
height: 34px !important;
|
||||||
|
min-width: 34px;
|
||||||
|
max-width: 34px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-flex !important;
|
display: inline-flex !important;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
color: var(--color-ink-3);
|
color: var(--color-ink-3);
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.user-dropdown a.user-dropdown__msg:hover,
|
||||||
.user-dropdown__msg:hover {
|
.user-dropdown__msg:hover {
|
||||||
background: var(--surface-3);
|
background: var(--surface-3);
|
||||||
color: var(--color-primary);
|
color: var(--color-primary);
|
||||||
|
|||||||
@@ -68,7 +68,7 @@
|
|||||||
if (!btn || btn.disabled) return;
|
if (!btn || btn.disabled) return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
btn.disabled = true;
|
btn.disabled = true;
|
||||||
fetch(restBase() + 'aksrt/v1/signin', {
|
fetch(restBase() + 'signin', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
credentials: 'same-origin',
|
credentials: 'same-origin',
|
||||||
headers: {
|
headers: {
|
||||||
@@ -91,7 +91,7 @@
|
|||||||
}
|
}
|
||||||
toast((res.data && res.data.message) || '签到成功', 'success');
|
toast((res.data && res.data.message) || '签到成功', 'success');
|
||||||
btn.classList.add('is-done');
|
btn.classList.add('is-done');
|
||||||
btn.innerHTML = '<i class="fa fa-calendar-check-o" aria-hidden="true"></i> 今日已签到';
|
btn.innerHTML = '<i class="fas fa-calendar-check" aria-hidden="true"></i> 今日已签到';
|
||||||
})
|
})
|
||||||
.catch(function () {
|
.catch(function () {
|
||||||
toast('网络错误', 'danger');
|
toast('网络错误', 'danger');
|
||||||
|
|||||||
@@ -135,11 +135,18 @@
|
|||||||
badge.style.display = nextUnread > 0 ? '' : 'none';
|
badge.style.display = nextUnread > 0 ? '' : 'none';
|
||||||
});
|
});
|
||||||
|
|
||||||
var headerBadge = document.querySelector('.user-dropdown__badge') || document.querySelector('.aksrt-notification-badge');
|
// Numeric badge inside the user dropdown only — never target the pure avatar
|
||||||
|
// .nav-user__dot.aksrt-notification-badge (no textContent on a dot indicator).
|
||||||
|
var headerBadge = document.querySelector('.user-dropdown__badge');
|
||||||
if (headerBadge) {
|
if (headerBadge) {
|
||||||
headerBadge.textContent = String(nextUnread);
|
headerBadge.textContent = String(nextUnread);
|
||||||
headerBadge.style.display = nextUnread > 0 ? '' : 'none';
|
headerBadge.style.display = nextUnread > 0 ? '' : 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var avatarDot = document.querySelector('.nav-user__dot');
|
||||||
|
if (avatarDot) {
|
||||||
|
avatarDot.style.display = nextUnread > 0 ? '' : 'none';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkEmpty() {
|
function checkEmpty() {
|
||||||
|
|||||||
+1
-1
@@ -289,7 +289,7 @@ if (!empty($aksrt_bg_styles)) {
|
|||||||
<button type="button" class="nav-user__toggle navbar-avatar" id="user-menu-toggle" aria-expanded="false" aria-controls="user-dropdown">
|
<button type="button" class="nav-user__toggle navbar-avatar" id="user-menu-toggle" aria-expanded="false" aria-controls="user-dropdown">
|
||||||
<?php echo get_avatar(get_current_user_id(), 36, '', esc_attr($aksrt_current_user->display_name), ['loading' => 'lazy']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
<?php echo get_avatar(get_current_user_id(), 36, '', esc_attr($aksrt_current_user->display_name), ['loading' => 'lazy']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||||
<?php if ($aksrt_unread_count > 0) : ?>
|
<?php if ($aksrt_unread_count > 0) : ?>
|
||||||
<span class="nav-user__dot aksrt-notification-badge" aria-hidden="true"></span>
|
<span class="nav-user__dot" aria-hidden="true"></span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</button>
|
</button>
|
||||||
<div class="user-dropdown sub-user-box" id="user-dropdown">
|
<div class="user-dropdown sub-user-box" id="user-dropdown">
|
||||||
|
|||||||
@@ -157,18 +157,36 @@ if (!function_exists('aksrt_render_new_add_btns')) :
|
|||||||
$label = __('发布', 'aksrt');
|
$label = __('发布', 'aksrt');
|
||||||
}
|
}
|
||||||
$label_html = aksrt_normalize_header_cta_label((string) $label, 'fas fa-pen');
|
$label_html = aksrt_normalize_header_cta_label((string) $label, 'fas fa-pen');
|
||||||
$class = trim('newadd-btns ' . $class);
|
// Keep CTA paint classes (e.g. btn-primary) off multi-type wrapper so the
|
||||||
|
// dropdown plate is not filled pink/primary; apply them on the toggle only.
|
||||||
|
$class_tokens = preg_split('/\s+/', trim($class), -1, PREG_SPLIT_NO_EMPTY) ?: [];
|
||||||
|
$cta_tokens = [];
|
||||||
|
$wrap_tokens = ['newadd-btns'];
|
||||||
|
foreach ($class_tokens as $token) {
|
||||||
|
if ($token === 'newadd-btns') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if ($token === 'btn-primary' || $token === 'but' || $token === 'navbar-cta') {
|
||||||
|
$cta_tokens[] = $token;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
$wrap_tokens[] = $token;
|
||||||
|
}
|
||||||
|
if (!in_array('btn-primary', $cta_tokens, true)) {
|
||||||
|
$cta_tokens[] = 'btn-primary';
|
||||||
|
}
|
||||||
|
$cta_class = trim(implode(' ', array_unique($cta_tokens)));
|
||||||
|
|
||||||
if (count($actions) === 1) {
|
if (count($actions) === 1) {
|
||||||
$a = $actions[0];
|
$a = $actions[0];
|
||||||
// Prefer configured label; icon already embedded after normalize.
|
// Prefer configured label; icon already embedded after normalize.
|
||||||
return '<a rel="nofollow" class="' . esc_attr(trim($class . ' but navbar-cta')) . '" href="' . esc_url($a['url']) . '">'
|
return '<a rel="nofollow" class="' . esc_attr(trim(implode(' ', $wrap_tokens) . ' ' . $cta_class . ' but navbar-cta')) . '" href="' . esc_url($a['url']) . '">'
|
||||||
. $label_html
|
. $label_html
|
||||||
. '</a>';
|
. '</a>';
|
||||||
}
|
}
|
||||||
|
|
||||||
$html = '<span class="' . esc_attr($class . ' hover-show') . '">';
|
$html = '<span class="' . esc_attr(trim(implode(' ', $wrap_tokens) . ' hover-show')) . '">';
|
||||||
$html .= '<a href="javascript:;" class="but newadd-btns__toggle navbar-cta" rel="nofollow">'
|
$html .= '<a href="javascript:;" class="' . esc_attr(trim('but newadd-btns__toggle navbar-cta ' . $cta_class)) . '" rel="nofollow">'
|
||||||
. $label_html
|
. $label_html
|
||||||
. ' <i class="fas fa-caret-down" aria-hidden="true"></i></a>';
|
. ' <i class="fas fa-caret-down" aria-hidden="true"></i></a>';
|
||||||
$html .= '<div class="hover-show-con dropdown-menu drop-newadd">';
|
$html .= '<div class="hover-show-con dropdown-menu drop-newadd">';
|
||||||
|
|||||||
@@ -39,32 +39,17 @@ if (!function_exists('aksrt_header_user_checkin_btn')) :
|
|||||||
$signed = false;
|
$signed = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
$details = '';
|
|
||||||
if (function_exists('aksrt_get_remote_modal_link')) {
|
|
||||||
$details = aksrt_get_remote_modal_link([
|
|
||||||
'tag' => 'a',
|
|
||||||
'class' => 'aksrt-header-checkin-details muted-2-color em09 mt6 block text-center',
|
|
||||||
'text' => __('签到详情', 'aksrt'),
|
|
||||||
'query_arg' => ['action' => 'aksrt_checkin_details_modal'],
|
|
||||||
'data_class' => 'modal-mini full-sm',
|
|
||||||
'height' => 420,
|
|
||||||
'mobile_bottom' => true,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($signed) {
|
if ($signed) {
|
||||||
return '<button type="button" class="but block c-yellow aksrt-header-checkin is-done" disabled>'
|
return '<button type="button" class="but block c-yellow aksrt-header-checkin is-done" disabled>'
|
||||||
. '<i class="fas fa-calendar-check" aria-hidden="true"></i> '
|
. '<i class="fas fa-calendar-check" aria-hidden="true"></i> '
|
||||||
. esc_html__('今日已签到', 'aksrt')
|
. esc_html__('今日已签到', 'aksrt')
|
||||||
. '</button>'
|
. '</button>';
|
||||||
. $details;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return '<button type="button" class="but block c-yellow aksrt-header-checkin" data-aksrt-checkin="1">'
|
return '<button type="button" class="but block c-yellow aksrt-header-checkin" data-aksrt-checkin="1">'
|
||||||
. '<i class="fas fa-calendar-check" aria-hidden="true"></i> '
|
. '<i class="fas fa-calendar-check" aria-hidden="true"></i> '
|
||||||
. esc_html__('签到领取今日奖励', 'aksrt')
|
. esc_html__('签到领取今日奖励', 'aksrt')
|
||||||
. '</button>'
|
. '</button>';
|
||||||
. $details;
|
|
||||||
}
|
}
|
||||||
endif;
|
endif;
|
||||||
|
|
||||||
@@ -106,7 +91,8 @@ if (!function_exists('aksrt_header_user_badges_row')) :
|
|||||||
if ($user_id <= 0 || !function_exists('aksrt_render_user_identity_chips')) {
|
if ($user_id <= 0 || !function_exists('aksrt_render_user_identity_chips')) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
$chips = aksrt_render_user_identity_chips($user_id, 'card');
|
// VIP already shown next to display name in the header profile row.
|
||||||
|
$chips = aksrt_render_user_identity_chips($user_id, 'card', ['include_vip' => false]);
|
||||||
if ($chips === '') {
|
if ($chips === '') {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
@@ -140,13 +126,14 @@ if (!function_exists('aksrt_header_payvip_bar')) :
|
|||||||
$info = aksrt_get_vip_info($user_id);
|
$info = aksrt_get_vip_info($user_id);
|
||||||
$exp_label = (string) ($info['expires_label'] ?? '');
|
$exp_label = (string) ($info['expires_label'] ?? '');
|
||||||
}
|
}
|
||||||
$html = '<div class="mt10 em09 aksrt-header-payvip">';
|
$html = '<div class="mt10 em09 aksrt-header-payvip is-vip">';
|
||||||
$html .= '<span class="radius4 payvip-icon btn-block text-center vipbg-v2 level-' . (int) $level . '">';
|
$html .= '<span class="radius4 payvip-icon btn-block text-center vipbg-v2 level-' . (int) $level . ' aksrt-header-payvip__active">';
|
||||||
|
$html .= '<span class="aksrt-header-payvip__level">';
|
||||||
$html .= '<i class="fas fa-gem" aria-hidden="true"></i>';
|
$html .= '<i class="fas fa-gem" aria-hidden="true"></i>';
|
||||||
$html .= '<span>' . esc_html($name) . '</span>';
|
$html .= '<span>' . esc_html($name) . '</span>';
|
||||||
|
$html .= '</span>';
|
||||||
if ($exp_label !== '') {
|
if ($exp_label !== '') {
|
||||||
$html .= '<span class="ml10 badg jb-yellow vip-expdate-tag"><i class="fas fa-clock" aria-hidden="true"></i>'
|
$html .= '<span class="aksrt-header-payvip__exp">' . esc_html($exp_label) . '</span>';
|
||||||
. esc_html($exp_label) . '</span>';
|
|
||||||
}
|
}
|
||||||
$html .= '</span></div>';
|
$html .= '</span></div>';
|
||||||
return $html;
|
return $html;
|
||||||
|
|||||||
@@ -31,13 +31,21 @@ if (!function_exists('aksrt_render_user_identity_chips')) {
|
|||||||
*
|
*
|
||||||
* @param int $user_id
|
* @param int $user_id
|
||||||
* @param string $context author|comment|card
|
* @param string $context author|comment|card
|
||||||
|
* @param array $args {
|
||||||
|
* Optional. Additional options.
|
||||||
|
*
|
||||||
|
* @type bool $include_vip Whether to prepend VIP badge. Default true.
|
||||||
|
* }
|
||||||
*/
|
*/
|
||||||
function aksrt_render_user_identity_chips(int $user_id, string $context = 'author'): string {
|
function aksrt_render_user_identity_chips(int $user_id, string $context = 'author', array $args = []): string {
|
||||||
if ($user_id <= 0) {
|
if ($user_id <= 0) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
$args = wp_parse_args($args, [
|
||||||
|
'include_vip' => true,
|
||||||
|
]);
|
||||||
$html = '';
|
$html = '';
|
||||||
if (function_exists('aksrt_render_vip_badge')) {
|
if (!empty($args['include_vip']) && function_exists('aksrt_render_vip_badge')) {
|
||||||
$vip = aksrt_render_vip_badge($user_id, 'sm');
|
$vip = aksrt_render_vip_badge($user_id, 'sm');
|
||||||
if (is_string($vip) && $vip !== '') {
|
if (is_string($vip) && $vip !== '') {
|
||||||
$html .= $vip;
|
$html .= $vip;
|
||||||
|
|||||||
Reference in new issue
Block a user