mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
Merge pull request #3693 from omnivore-app/fix/fix-empty-layout-pages
Fix for pages that dont need auth like terms and conditions page
This commit is contained in:
commit
81149e8b5d
6 changed files with 60 additions and 14 deletions
47
packages/web/components/templates/EmptyLayout.tsx
Normal file
47
packages/web/components/templates/EmptyLayout.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
|
||||
import { PageMetaData } from '../patterns/PageMetaData'
|
||||
import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
|
||||
import { SettingsDropdown } from './navMenu/SettingsDropdown'
|
||||
|
||||
type EmptyLayoutProps = {
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function EmptyLayout(props: EmptyLayoutProps): JSX.Element {
|
||||
return (
|
||||
<VStack
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
css={{ width: '100%', height: '100%', minHeight: '100vh' }}
|
||||
>
|
||||
<PageMetaData path="/" title={props.title} />
|
||||
<VStack css={{ width: '100%', height: '100%' }}>
|
||||
<Box
|
||||
css={{
|
||||
height: DEFAULT_HEADER_HEIGHT,
|
||||
'@mdDown': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
css={{
|
||||
p: '15px',
|
||||
display: 'none',
|
||||
height: DEFAULT_HEADER_HEIGHT,
|
||||
'@mdDown': {
|
||||
display: 'flex',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SettingsDropdown />
|
||||
</Box>
|
||||
<HStack css={{ width: '100%', height: '100%' }} distribution="start">
|
||||
{props.children}
|
||||
</HStack>
|
||||
<Box css={{ height: '120px', width: '100%' }} />
|
||||
</VStack>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
|
||||
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
|
||||
import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
|
||||
import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
|
||||
import { useRouter } from 'next/router'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Head from 'next/head'
|
||||
import { ErrorLayout } from '../components/templates/ErrorLayout'
|
||||
import { SettingsLayout } from '../components/templates/SettingsLayout'
|
||||
import { EmptyLayout } from '../components/templates/EmptyLayout'
|
||||
|
||||
export default function Custom404(): JSX.Element {
|
||||
return (
|
||||
|
|
@ -8,9 +8,9 @@ export default function Custom404(): JSX.Element {
|
|||
<Head>
|
||||
<title>Page Not Found</title>
|
||||
</Head>
|
||||
<SettingsLayout title="Page could not be found">
|
||||
<EmptyLayout title="Page could not be found">
|
||||
<ErrorLayout statusCode={404} message="This page could not be found." />
|
||||
</SettingsLayout>
|
||||
</EmptyLayout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ErrorLayout } from '../components/templates/ErrorLayout'
|
||||
import Head from 'next/head'
|
||||
import { SettingsLayout } from '../components/templates/SettingsLayout'
|
||||
import { EmptyLayout } from '../components/templates/EmptyLayout'
|
||||
|
||||
export default function Custom500(): JSX.Element {
|
||||
return (
|
||||
|
|
@ -8,9 +8,9 @@ export default function Custom500(): JSX.Element {
|
|||
<Head>
|
||||
<title>An unknown error occurred.</title>
|
||||
</Head>
|
||||
<SettingsLayout title="An unknown error occurred">
|
||||
<ErrorLayout statusCode={404} message="An unknown error occurred." />
|
||||
</SettingsLayout>
|
||||
<EmptyLayout title="An unknown error occurred">
|
||||
<ErrorLayout statusCode={404} message="An unknown error occurred." />
|
||||
</EmptyLayout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useEffect, useCallback } from 'react'
|
||||
import { Button } from '../components/elements/Button'
|
||||
import { HStack } from '../components/elements/LayoutPrimitives'
|
||||
import { SettingsLayout } from '../components/templates/SettingsLayout'
|
||||
import { EmptyLayout } from '../components/templates/EmptyLayout'
|
||||
import { setupAnalytics } from '../lib/analytics'
|
||||
|
||||
export default function Support(): JSX.Element {
|
||||
|
|
@ -18,7 +18,7 @@ export default function Support(): JSX.Element {
|
|||
}, [initAnalytics])
|
||||
|
||||
return (
|
||||
<SettingsLayout title="Support">
|
||||
<EmptyLayout title="Support">
|
||||
<HStack
|
||||
alignment="center"
|
||||
distribution="end"
|
||||
|
|
@ -46,6 +46,6 @@ export default function Support(): JSX.Element {
|
|||
{'Open Chat Window'}
|
||||
</Button>
|
||||
</HStack>
|
||||
</SettingsLayout>
|
||||
</EmptyLayout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useRouter } from 'next/router'
|
||||
import { TermsAndConditions } from '../components/templates/TermsAndConditions'
|
||||
import { SettingsLayout } from '../components/templates/SettingsLayout'
|
||||
import { EmptyLayout } from '../components/templates/EmptyLayout'
|
||||
|
||||
export default function Terms(): JSX.Element {
|
||||
const router = useRouter()
|
||||
|
|
@ -11,9 +11,9 @@ export default function Terms(): JSX.Element {
|
|||
return <TermsAndConditions />
|
||||
} else {
|
||||
return (
|
||||
<SettingsLayout title="Terms and Conditions">
|
||||
<EmptyLayout title="Terms and Conditions">
|
||||
<TermsAndConditions />
|
||||
</SettingsLayout>
|
||||
</EmptyLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue