archvillainetteandClaude Opus 4.8
10493f692b
The unread count sat as a static inline pill that floated low and to the right of the inbox icon, not matching the corner-anchored badges on the notification and chat icons next to it. Mirror Harmony's notification markup — wrap the icon and count in an inline position-relative span and position the badge with top-0/start-100/translate-middle — so the unread bubble tucks into the icon corner at the same height as its neighbours. Verified in the dev forum: the unread and notification badges now share the same size, shape, and vertical position. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
12 lines
1.0 KiB
Smarty
12 lines
1.0 KiB
Smarty
<a class="nav-link dropdown-toggle d-flex align-items-center justify-content-center" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[unread:title]]">
|
|
<span class="position-relative">
|
|
<i class="fa fa-fw fa-inbox" aria-hidden="true"></i>
|
|
<span component="unread/count" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.topic }}}hidden{{{ end }}}">{unreadCount.topic}</span>
|
|
</span>
|
|
</a>
|
|
<ul class="dropdown-menu wg-topbar__dropdown unread-dropdown p-1 shadow" role="menu" data-wg-unread-menu>
|
|
<li data-wg-unread-loading class="dropdown-item disabled"><i class="fa fa-fw fa-spinner fa-spin" aria-hidden="true"></i> [[unread:title]]</li>
|
|
<li data-wg-unread-empty class="hidden"><span class="dropdown-item disabled">[[unread:no-unread-topics]]</span></li>
|
|
<li data-wg-unread-footer><hr class="dropdown-divider"><a class="dropdown-item wg-unread-item--all" href="{relative_path}/unread">[[unread:title]]</a></li>
|
|
</ul>
|