fix(website): page height to hide footer without scrolling

This commit is contained in:
iCrawl 2023-03-27 20:43:34 +02:00
parent b8b852ee1e
commit 5cdd5d76ed
No known key found for this signature in database
GPG key ID: 1AB888B16355FBB2
6 changed files with 9 additions and 7 deletions

View file

@ -19,7 +19,7 @@ export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
return (
<>
<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
<div className="h-18 block px-6">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button
aria-label="Menu"

View file

@ -4,7 +4,7 @@ import type { MDXPage } from './SidebarItems.jsx';
export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
return (
<nav
className={`h-[calc(100vh - 73px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 w-full border-r bg-white ${
className={`h-[calc(100vh - 65px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[65px] left-0 bottom-0 z-20 w-full border-r bg-white ${
opened ? 'block' : 'hidden'
} lg:w-76 lg:max-w-76 lg:block`}
>

View file

@ -181,7 +181,9 @@ export default async function Page({ params }: { params: ItemRouteParams }) {
}
>
<article className="dark:bg-dark-800 bg-light-600">
<div className="dark:bg-dark-600 bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
<div className="dark:bg-dark-600 min-h-[calc(100vh_-_64px)] bg-white p-6 pb-20 shadow">
{member ? <Member member={member} /> : null}
</div>
</article>
</div>
);

View file

@ -72,8 +72,8 @@ export default async function PackageLayout({ children, params }: PropsWithChild
<main>
<Header />
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
<article className="pt-18 lg:pl-76">
<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
<article className="lg:pl-76 pt-16">
<div className="relative z-10">{children}</div>
<div className="h-76 md:h-52" />
</article>
<Footer />

View file

@ -65,7 +65,7 @@ export default function Header() {
return (
<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
<div className="h-18 block px-6">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button
aria-label="Menu"

View file

@ -14,7 +14,7 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
return (
<nav
className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 h-[calc(100vh_-_73px)] w-full border-r bg-white ${
className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[65px] left-0 bottom-0 z-20 h-[calc(100vh_-_65px)] w-full border-r bg-white ${
opened ? 'block' : 'hidden'
} lg:w-76 lg:max-w-76 lg:block`}
>