From f0f8fafa5851ed6d7d9f6390d7ef6e99508886fe Mon Sep 17 00:00:00 2001 From: Tejas Kumar Date: Wed, 21 Nov 2018 00:38:55 +0100 Subject: [PATCH] Support Layout cases where Page has no title --- src/Layout/README.md | 209 +++++++++++++++++++++++++++++++++++++++++++ src/Page/Page.tsx | 19 ++-- 2 files changed, 220 insertions(+), 8 deletions(-) diff --git a/src/Layout/README.md b/src/Layout/README.md index df0c950ec..301c4e13d 100644 --- a/src/Layout/README.md +++ b/src/Layout/README.md @@ -210,6 +210,215 @@ Revealing the layers to my soul ``` +### Without a Page Title + +This is an example of a basic layout _without_ a page title. Content at the bottom should be correctly visible. + +```jsx +const sidebar = ( + + + + + + + + + + + + + + + + + + +) + +// Container must set the height explicitly. +// This component will set height to 100%. +;
+ } + main={ + + Project 1 + + } + end={ + + Imogen Mason + + } + /> + } + main={ + + Help + + } + > + {({ confirm, modal }) => ( + <> + {Array(10) + .fill("Hello!!!!") + .map((value, i) => ( + {value} + ))} + + +
+ + + + +
+ + + )} + + } + /> +
+``` + ### Example with Compact Sidenav ```jsx diff --git a/src/Page/Page.tsx b/src/Page/Page.tsx index 0cea1ef91..8a2d083bc 100644 --- a/src/Page/Page.tsx +++ b/src/Page/Page.tsx @@ -92,12 +92,15 @@ const TitleContainer = styled("div")(({ theme }) => ({ fontWeight: theme.font.weight.medium, })) -const ViewContainer = styled("div")<{ isInTab?: boolean; isTitleCondensed?: boolean }>( - ({ theme, isInTab, isTitleCondensed }) => ({ - height: `calc(100% - ${isInTab && !isTitleCondensed ? theme.titleHeight + tabsBarHeight : theme.titleHeight}px)`, - overflow: "hidden", - position: "relative", - }), +const ViewContainer = styled("div")<{ isInTab?: boolean; isTitleCondensed?: boolean; hasTitle?: boolean }>( + ({ theme, isInTab, isTitleCondensed, hasTitle }) => { + const calculatedTitleOffset = isInTab && !isTitleCondensed ? theme.titleHeight + tabsBarHeight : theme.titleHeight + return { + height: hasTitle ? `calc(100% - ${calculatedTitleOffset}px)` : "100%", + overflow: "hidden", + position: "relative", + } + }, ) const ActionsContainer = styled("div")<{ actionPosition: PageProps["actionsPosition"] }>( @@ -162,7 +165,7 @@ class Page extends React.Component> { {!condensedTitle && tabsBar} )} - + {activeChildren} @@ -184,7 +187,7 @@ class Page extends React.Component> { )} - + {modalConfirmContext => { const resolvedChildren = typeof children === "function" ? children(modalConfirmContext) : children