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

Bottom nav uses fixed position to fix firefox bug (#1011) 

* use fixed position + div placeholder

* hide footer padding when not shown

* account for mobile inset

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: keyan <keyan.kousha+huumn@gmail.com>
This commit is contained in:
Ben Allen 2024-04-04 19:50:52 -04:00 committed by GitHub
parent a0b402b4d6
commit 5fa7fd9a83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/footer.module.css
View File

@ -25,4 +25,4 @@
font-size: 75%;
margin-top: .15rem;
color: var(--theme-grey) !important;
}
}

25
components/nav/mobile/footer.js
View File

@ -47,16 +47,19 @@ export default function BottomBar ({ sub }) {
}
return (
<div className={classNames('d-block d-md-none', styles.footer, styles.footerPadding)}>
<Navbar className='container px-0'>
<Nav className={styles.footerNav}>
<Offcanvas me={me} {...props} />
<SearchItem {...props} />
<Brand />
<NavNotifications />
<PostItem {...props} className='btn-sm' />
</Nav>
</Navbar>
</div>
<nav className='d-block d-md-none'>
<div style={{ marginBottom: '53px' }} className={styles.footerPadding} />
<div className={classNames(styles.footer, styles.footerPadding)}>
<Navbar className='container px-0'>
<Nav className={styles.footerNav}>
<Offcanvas me={me} {...props} />
<SearchItem {...props} />
<Brand />
<NavNotifications />
<PostItem {...props} className='btn-sm' />
</Nav>
</Navbar>
</div>
</nav>
)
}

3
components/nav/mobile/footer.module.css
View File

@ -1,12 +1,11 @@
.footer {
position: sticky;
position: fixed;
bottom: 0;
width: 100%;
background-color: var(--bs-body-bg);
border-top: 1px solid var(--theme-toolbarActive);
z-index: 1000;
justify-content: end;
}
.footerPadding {

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

@ -22,9 +22,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
src={me?.photoId ? `${MEDIA_URL}/${me.photoId}` : '/dorian400.jpg'} width='28' height='28'
style={{ clipPath: 'polygon(0 0, 83% 0, 100% 100%, 17% 100%)' }}
onClick={onClick}
className='pointer'
/>
)
: <span className='text-muted'><AnonIcon onClick={onClick} width='22' height='22' /></span>
: <span className='text-muted pointer'><AnonIcon onClick={onClick} width='22' height='22' /></span>
return (
<>