public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replaced iphone check with general standalone mode media query for padding bottom on bottom nav

pull/416/head
Peer Richelsen 2021-08-05 11:31:37 +02:00
parent ce844f2721
commit 0572d5653e
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Shell.tsx
View File

@ -146,9 +146,7 @@ export default function Shell(props) {
<div className="px-4 sm:px-6 md:px-8">{props.children}</div> <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
{/* show bottom navigation for md and smaller (tablet and phones) */} {/* show bottom navigation for md and smaller (tablet and phones) */}
<nav <nav className="bottom-nav md:hidden flex fixed bottom-0 bg-white w-full shadow">
style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
{/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */} {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
{navigation.flatMap((item, itemIdx) => {navigation.flatMap((item, itemIdx) =>
item.name === "Settings" ? ( item.name === "Settings" ? (

6
styles/globals.css
View File

@ -81,6 +81,12 @@
} }
} }
@media all and (display-mode: standalone) {
.bottom-nav {
padding-bottom: 24px;
}
}
.react-multi-email > [type='text'] { .react-multi-email > [type='text'] {
--tw-ring-shadow: 0 0 0 0 0; --tw-ring-shadow: 0 0 0 0 0;
} }