ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Indicator fixes: inconsistent CSS and missing indicator (#2452)

Browse Source 
* Fix inconsistent indicator style in dropdown, offcanvas

* Fix missing offcanvas indicator
This commit is contained in:
ekzyis 2025-08-29 20:04:18 +02:00 committed by GitHub
parent acd5b69087
commit 6933d72e5f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/nav/common.js
View File

@ -160,24 +160,16 @@ export function NavWalletSummary ({ className }) {
)
}
export const Indicator = ({ superscript }) => {
if (superscript) {
return (
<span className='d-inline-block p-1'>
<span
className='position-absolute p-1 bg-secondary'
style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}
>
<span className='invisible'>{' '}</span>
</span>
</span>
)
}
export const Indicator = () => {
return (
<div className='p-1 d-inline-block bg-secondary ms-1'>
<span className='invisible'>{' '}</span>
</div>
<span className='d-inline-block p-1'>
<span
className='position-absolute p-1 bg-secondary'
style={{ top: '5px', right: '0px', height: '5px', width: '5px' }}
>
<span className='invisible'>{' '}</span>
</span>
</span>
)
}
@ -195,7 +187,7 @@ export function MeDropdown ({ me, dropNavKey }) {
<div className='d-flex align-items-center'>
<Nav.Link eventKey={me.name} as='span' className='p-0 position-relative'>
{`@${me.name}`}
{indicator && <Indicator superscript />}
{indicator && <Indicator />}
</Nav.Link>
<Badges user={me} />
</div>
@ -203,8 +195,10 @@ export function MeDropdown ({ me, dropNavKey }) {
<Dropdown.Menu>
<Link href={'/' + me.name} passHref legacyBehavior>
<Dropdown.Item active={me.name === dropNavKey}>
profile
{profileIndicator && <Indicator />}
<div className='w-fit-content position-relative'>
profile
{profileIndicator && <Indicator />}
</div>
</Dropdown.Item>
</Link>
<Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@ -212,8 +206,10 @@ export function MeDropdown ({ me, dropNavKey }) {
</Link>
<Link href='/wallets' passHref legacyBehavior>
<Dropdown.Item eventKey='wallets'>
wallets
{walletIndicator && <Indicator />}
<div className='w-fit-content position-relative'>
wallets
{walletIndicator && <Indicator />}
</div>
</Dropdown.Item>
</Link>
<Link href='/credits' passHref legacyBehavior>

23
components/nav/mobile/offcanvas.js
View File

@ -28,10 +28,14 @@ export default function OffCanvas ({ me, dropNavKey }) {
const profileIndicator = me && !me.bioId
const walletIndicator = useWalletIndicator()
const indicator = profileIndicator || walletIndicator
return (
<>
<MeImage onClick={handleShow} />
<div className='position-relative'>
<MeImage onClick={handleShow} />
{indicator && <Indicator />}
</div>
<Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
<Offcanvas.Header closeButton>
@ -53,8 +57,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
<>
<Link href={'/' + me.name} passHref legacyBehavior>
<Dropdown.Item active={me.name === dropNavKey}>
profile
{profileIndicator && <Indicator />}
<div className='w-fit-content position-relative'>
profile
{profileIndicator && <Indicator />}
</div>
</Dropdown.Item>
</Link>
<Link href={'/' + me.name + '/bookmarks'} passHref legacyBehavior>
@ -62,8 +68,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
</Link>
<Link href='/wallets' passHref legacyBehavior>
<Dropdown.Item eventKey='wallets'>
wallets
{walletIndicator && <Indicator />}
<div className='w-fit-content position-relative'>
wallets
{walletIndicator && <Indicator />}
</div>
</Dropdown.Item>
</Link>
<Link href='/credits' passHref legacyBehavior>
@ -93,7 +101,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
<Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
<MeImage />
<div className='ms-2'>
@{me?.name || 'anon'}
<div className='w-fit-content position-relative'>
@{me?.name || 'anon'}
{indicator && <Indicator />}
</div>
</div>
</Link>
</Nav>