fix(frontend): match navigation icon divider spacing
This commit is contained in:
1 parent
f019760297
commit
b520d29368
2 files changed
+25
-3
No files matched your search
@@ -343,7 +343,7 @@ if (!function_exists('aksrt_menu_button')) :
|
|||||||
if ($unread > 0) {
|
if ($unread > 0) {
|
||||||
$notification_but .= '<span class="aksrt-notification-badge">' . esc_html((string) min(99, $unread)) . '</span>';
|
$notification_but .= '<span class="aksrt-notification-badge">' . esc_html((string) min(99, $unread)) . '</span>';
|
||||||
}
|
}
|
||||||
$notification_but .= "</a></li>\n";
|
$notification_but .= '</a></li>';
|
||||||
}
|
}
|
||||||
|
|
||||||
$sign_but = '';
|
$sign_but = '';
|
||||||
@@ -372,8 +372,8 @@ if (!function_exists('aksrt_menu_button')) :
|
|||||||
. esc_attr__('打开搜索', 'aksrt') . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-search"></use></svg></a></li>';
|
. esc_attr__('打开搜索', 'aksrt') . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-search"></use></svg></a></li>';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Inline list items retain the reference whitespace between controls.
|
// Match the reference's adjacent inline items; text whitespace adds a gap
|
||||||
$sign_but .= "\n";
|
// before each divider on top of the list item's own horizontal padding.
|
||||||
$account = '<ul class="list-inline splitters relative">'
|
$account = '<ul class="list-inline splitters relative">'
|
||||||
. $notification_but . $sign_but . $search_but . '</ul>';
|
. $notification_but . $sign_but . $search_but . '</ul>';
|
||||||
|
|
||||||
|
|||||||
@@ -51,6 +51,10 @@ foreach (['1', '2', '3'] as $layout) {
|
|||||||
ob_start(); aksrt_menu_button($ctx); $buttons = ob_get_clean();
|
ob_start(); aksrt_menu_button($ctx); $buttons = ob_get_clean();
|
||||||
$results['desktop'][$layout][$userId] = $buttons;
|
$results['desktop'][$layout][$userId] = $buttons;
|
||||||
}
|
}
|
||||||
|
$ctx['message_icon_positions'] = ['nav_menu'];
|
||||||
|
$ctx['messages_url'] = 'https://example.test/messages';
|
||||||
|
$ctx['unread_count'] = 3;
|
||||||
|
ob_start(); aksrt_menu_button($ctx); $results['notifications'][$layout] = ob_get_clean();
|
||||||
}
|
}
|
||||||
foreach (['center', 'left'] as $mobileLayout) {
|
foreach (['center', 'left'] as $mobileLayout) {
|
||||||
$ctx = [
|
$ctx = [
|
||||||
@@ -101,6 +105,24 @@ test('mobile search appears in the centered header or left drawer according to l
|
|||||||
assert.match(output.mobile.left.drawer, /class="toggle-radius main-search-btn"/);
|
assert.match(output.mobile.left.drawer, /class="toggle-radius main-search-btn"/);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('account icons keep the reference spacing on both sides of each divider', () => {
|
||||||
|
const output = renderHeaderParts();
|
||||||
|
const lists = [
|
||||||
|
...Object.values(output.desktop).flatMap((states) => Object.values(states)),
|
||||||
|
...Object.values(output.notifications),
|
||||||
|
];
|
||||||
|
for (const html of lists) {
|
||||||
|
const account = html.match(/<ul class="list-inline splitters relative">([\s\S]*?)<\/ul><\/div>/);
|
||||||
|
assert.ok(account, 'missing the account action list');
|
||||||
|
// Reference zib_menu_button concatenates the items directly. Whitespace
|
||||||
|
// between inline-block li elements adds a font-dependent gap before the
|
||||||
|
// following item's divider, beyond the shared 5px li / 12px button padding.
|
||||||
|
assert.doesNotMatch(account[1], /<\/li>\s+<li\b/, 'extra text space shifts the divider');
|
||||||
|
assert.doesNotMatch(account[1], /<\/li>\s+$/, 'trailing text space widens the action group');
|
||||||
|
}
|
||||||
|
assert.match(output.notifications['1'], /aksrt-nav-notification/);
|
||||||
|
});
|
||||||
|
|
||||||
test('header source restores the reference typography and Bootstrap control dimensions', () => {
|
test('header source restores the reference typography and Bootstrap control dimensions', () => {
|
||||||
const css = read('assets/css/frontend/header-userbox.css');
|
const css = read('assets/css/frontend/header-userbox.css');
|
||||||
const mainCss = read('assets/css/main.css');
|
const mainCss = read('assets/css/main.css');
|
||||||
|
|||||||
Reference in new issue
Block a user