prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Set the header height to default on smaller screens

Browse source
This commit is contained in:
Jackson Harper 2023-11-08 15:02:05 +08:00
parent d76d041342
commit e3383d28d8
3 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/web/components/templates/homeFeed/HeaderSpacer.tsx
View file

@ -29,6 +29,9 @@ export function HeaderSpacer(): JSX.Element {
css={{
height: headerHeight,
bg: '$grayBase',
'@mdDown': {
height: DEFAULT_HEADER_HEIGHT,
},
}}
></Box>
)

8
packages/web/components/templates/homeFeed/HighlightsLayout.tsx
View file

@ -20,7 +20,7 @@ import {
import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
import { NotebookContent } from '../article/Notebook'
import { EmptyHighlights } from './EmptyHighlights'
import { useGetHeaderHeight } from './HeaderSpacer'
import { DEFAULT_HEADER_HEIGHT, useGetHeaderHeight } from './HeaderSpacer'
import { highlightsAsMarkdown } from './HighlightItem'
type HighlightItemsLayoutProps = {
@ -107,6 +107,9 @@ export function HighlightItemsLayout(
css={{
width: '100%',
height: `calc(100vh - ${headerHeight})`,
'@mdDown': {
height: DEFAULT_HEADER_HEIGHT,
},
}}
>
<EmptyHighlights />
@ -125,6 +128,9 @@ export function HighlightItemsLayout(
},
bg: '$thBackground2',
overflow: 'hidden',
'@mdDown': {
height: DEFAULT_HEADER_HEIGHT,
},
}}
distribution="start"
alignment="start"

7
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View file

@ -16,7 +16,11 @@ import {
import { LayoutType } from './HomeFeedContainer'
import { PrimaryDropdown } from '../PrimaryDropdown'
import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
import { HeaderSpacer, useGetHeaderHeight } from './HeaderSpacer'
import {
DEFAULT_HEADER_HEIGHT,
HeaderSpacer,
useGetHeaderHeight,
} from './HeaderSpacer'
import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
import { CardCheckbox } from '../../patterns/LibraryCards/LibraryCardStyles'
import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
@ -104,6 +108,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
'@mdDown': {
left: '0px',
right: '0',
height: DEFAULT_HEADER_HEIGHT,
},
}}
>