Browse Source

fixed imwald header overwriting page header

imwald
Silberengel 4 months ago
parent
commit
eceb3bfa28
  1. 12
      src/PageManager.tsx
  2. 33
      src/layouts/SecondaryPageLayout/index.tsx

12
src/PageManager.tsx

@ -353,6 +353,11 @@ function MainContentArea({ @@ -353,6 +353,11 @@ function MainContentArea({
{primaryNoteView ? (
// Show note view with back button
<div className="flex flex-col h-full w-full">
<div className="flex justify-center py-1 border-b">
<span className="text-green-600 dark:text-green-500 font-semibold text-sm">
Imwald
</span>
</div>
<div className="flex gap-1 p-1 items-center justify-between font-semibold border-b">
<div className="flex items-center flex-1 w-0">
<Button
@ -369,7 +374,7 @@ function MainContentArea({ @@ -369,7 +374,7 @@ function MainContentArea({
</Button>
</div>
<div className="flex-1 flex justify-center">
<div className="text-lg font-semibold text-green-500">
<div className="text-lg font-semibold">
{getPageTitle(primaryViewType, window.location.pathname)}
</div>
</div>
@ -732,6 +737,11 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { @@ -732,6 +737,11 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
{primaryNoteView ? (
// Show primary note view with back button on mobile
<div className="flex flex-col h-full w-full">
<div className="flex justify-center py-1 border-b">
<span className="text-green-600 dark:text-green-500 font-semibold text-sm">
Imwald
</span>
</div>
<div className="flex gap-1 p-1 items-center justify-between font-semibold border-b">
<div className="flex items-center flex-1 w-0">
<Button

33
src/layouts/SecondaryPageLayout/index.tsx

@ -66,6 +66,12 @@ const SecondaryPageLayout = forwardRef( @@ -66,6 +66,12 @@ const SecondaryPageLayout = forwardRef(
}}
>
{title && (
<>
<div className="flex justify-center py-1 border-b">
<span className="text-green-600 dark:text-green-500 font-semibold text-sm">
Imwald
</span>
</div>
<SecondaryPageTitlebar
title={title}
controls={controls}
@ -73,6 +79,7 @@ const SecondaryPageLayout = forwardRef( @@ -73,6 +79,7 @@ const SecondaryPageLayout = forwardRef(
hideBottomBorder={hideTitlebarBottomBorder}
titlebar={titlebar}
/>
</>
)}
{children}
</div>
@ -85,6 +92,12 @@ const SecondaryPageLayout = forwardRef( @@ -85,6 +92,12 @@ const SecondaryPageLayout = forwardRef(
<DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
<div className="h-full flex flex-col">
{title && (
<>
<div className="flex justify-center py-1 border-b">
<span className="text-green-600 dark:text-green-500 font-semibold text-sm">
Imwald
</span>
</div>
<SecondaryPageTitlebar
title={title}
controls={controls}
@ -92,6 +105,7 @@ const SecondaryPageLayout = forwardRef( @@ -92,6 +105,7 @@ const SecondaryPageLayout = forwardRef(
hideBottomBorder={hideTitlebarBottomBorder}
titlebar={titlebar}
/>
</>
)}
<div className="flex-1" ref={scrollAreaRef}>
{children}
@ -119,8 +133,6 @@ export function SecondaryPageTitlebar({ @@ -119,8 +133,6 @@ export function SecondaryPageTitlebar({
hideBottomBorder?: boolean
titlebar?: React.ReactNode
}): JSX.Element {
const { isSmallScreen } = useScreenSize()
if (titlebar) {
return (
<Titlebar className="p-1" hideBottomBorder={hideBottomBorder}>
@ -136,29 +148,12 @@ export function SecondaryPageTitlebar({ @@ -136,29 +148,12 @@ export function SecondaryPageTitlebar({
{hideBackButton ? (
<div className="flex gap-2 items-center pl-3 w-fit truncate text-lg font-semibold">
{title}
<span className="text-green-600 dark:text-green-500 font-semibold text-sm ml-2">
Im Wald 🌲
</span>
</div>
) : (
<div className="flex items-center flex-1 w-0">
<BackButton>{title}</BackButton>
</div>
)}
{isSmallScreen && (
<div className="absolute left-1/2 transform -translate-x-1/2 z-10">
<span className="text-green-600 dark:text-green-500 font-semibold text-sm">
Im Wald 🌲
</span>
</div>
)}
{!isSmallScreen && !hideBackButton && (
<div className="absolute left-1/2 transform -translate-x-1/2 z-10 pointer-events-none">
<span className="text-green-600 dark:text-green-500 font-semibold text-sm">
Im Wald 🌲
</span>
</div>
)}
<div className="flex-shrink-0">{controls}</div>
</Titlebar>
)

Loading…
Cancel
Save