Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modify the sizes of the left menu and the header

Browse Source
This commit is contained in:
Jackson Harper
2023-05-25 12:56:58 +08:00
parent d90a0deb66
commit 6cfd424922
13 changed files with 26 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/components/elements/DropdownElements.tsx
View File

@ -169,7 +169,9 @@ export function Dropdown(
} = props
return (
<Root modal={modal} onOpenChange={props.onOpenChange}>
<DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
<DropdownTrigger disabled={disabled} css={{ cursor: 'pointer' }}>
{triggerElement}
</DropdownTrigger>
<DropdownContent
css={css}
onInteractOutside={() => {

7
packages/web/components/patterns/SettingsHeader.tsx
View File

@ -2,10 +2,7 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
import { PrimaryDropdown } from '../templates/PrimaryDropdown'
import {
HEADER_HEIGHT,
MOBILE_HEADER_HEIGHT,
} from '../templates/homeFeed/HeaderSpacer'
import { HEADER_HEIGHT } from '../templates/homeFeed/HeaderSpacer'
type HeaderProps = {
user?: UserBasicData
@ -25,7 +22,7 @@ export function SettingsHeader(props: HeaderProps): JSX.Element {
position: 'fixed',
width: '100%',
px: '25px',
height: MOBILE_HEADER_HEIGHT,
height: HEADER_HEIGHT,
bg: '$thBackground3',
borderBottom: '1px solid $thBorderColor',
'@mdDown': {

2
packages/web/components/templates/PrimaryDropdown.tsx
View File

@ -93,6 +93,8 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
height: '64px',
p: '15px',
gap: '15px',
cursor: 'pointer',
mouseEvents: 'all',
}}
>
<Avatar

4
packages/web/components/templates/SettingsLayout.tsx
View File

@ -10,7 +10,7 @@ import { useState } from 'react'
import { ConfirmationModal } from '../patterns/ConfirmationModal'
import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
import { PageMetaData } from '../patterns/PageMetaData'
import { HeaderSpacer, MOBILE_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
import { HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
type SettingsLayoutProps = {
title?: string
@ -48,7 +48,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
<VStack css={{ width: '100%', height: '100%' }}>
<Box
css={{
height: MOBILE_HEADER_HEIGHT,
height: HEADER_HEIGHT,
bg: '$grayBase',
}}
></Box>

3
packages/web/components/templates/article/EpubContainer.tsx
View File

@ -16,7 +16,7 @@ import { pspdfKitKey } from '../../../lib/appConfig'
import { NotebookModal } from './NotebookModal'
import { HighlightNoteModal } from './HighlightNoteModal'
import { showErrorToast } from '../../../lib/toastHelpers'
import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
import { HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
import Epub, { EpubCFI } from 'epubjs'
import { Rendition, Contents } from 'epubjs/types'
@ -292,7 +292,6 @@ export default function EpubContainer(props: EpubContainerProps): JSX.Element {
'@mdDown': {
padding: '0px',
paddingBottom: '0px',
height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
},
width: '100%',
height: `calc(100vh - ${HEADER_HEIGHT})`,

5
packages/web/components/templates/article/PdfArticleContainer.tsx
View File

@ -16,7 +16,7 @@ import { pspdfKitKey } from '../../../lib/appConfig'
import { NotebookModal } from './NotebookModal'
import { HighlightNoteModal } from './HighlightNoteModal'
import { showErrorToast } from '../../../lib/toastHelpers'
import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
import { HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
export type PdfArticleContainerProps = {
@ -481,9 +481,6 @@ export default function PdfArticleContainer(
css={{
width: '100%',
height: `calc(100vh - ${HEADER_HEIGHT})`,
'@xlgDown': {
height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
},
}}
>
<div ref={containerRef} style={{ width: '100%', height: '100%' }} />

6
packages/web/components/templates/article/PdfHeaderSpacer.tsx
View File

@ -1,7 +1,6 @@
import { Box } from '../../elements/LayoutPrimitives'
export const HEADER_HEIGHT = '105px'
export const MOBILE_HEADER_HEIGHT = '70px'
export const HEADER_HEIGHT = '70px'
export function PdfHeaderSpacer(): JSX.Element {
return (
@ -9,9 +8,6 @@ export function PdfHeaderSpacer(): JSX.Element {
css={{
height: HEADER_HEIGHT,
bg: '$grayBase',
'@xlgDown': {
height: MOBILE_HEADER_HEIGHT,
},
}}
></Box>
)

2
packages/web/components/templates/homeFeed/EmptyHighlights.tsx
View File

@ -11,7 +11,7 @@ export function EmptyHighlights(): JSX.Element {
css={{
color: '$grayTextContrast',
textAlign: 'center',
marginTop: '105px',
marginTop: '70px',
}}
>
<Book size={44} color={theme.colors.grayTextContrast.toString()} />

6
packages/web/components/templates/homeFeed/HeaderSpacer.tsx
View File

@ -1,7 +1,6 @@
import { Box } from '../../elements/LayoutPrimitives'
export const HEADER_HEIGHT = '105px'
export const MOBILE_HEADER_HEIGHT = '70px'
export const HEADER_HEIGHT = '70px'
export function HeaderSpacer(): JSX.Element {
return (
@ -9,9 +8,6 @@ export function HeaderSpacer(): JSX.Element {
css={{
height: HEADER_HEIGHT,
bg: '$grayBase',
'@mdDown': {
height: MOBILE_HEADER_HEIGHT,
},
}}
></Box>
)

16
packages/web/components/templates/homeFeed/HighlightsLayout.tsx
View File

@ -21,7 +21,7 @@ import {
import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
import { Notebook } from '../article/Notebook'
import { EmptyHighlights } from './EmptyHighlights'
import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from './HeaderSpacer'
import { HEADER_HEIGHT } from './HeaderSpacer'
import { highlightsAsMarkdown } from './HighlightItem'
type HighlightItemsLayoutProps = {
@ -34,8 +34,9 @@ type HighlightItemsLayoutProps = {
export function HighlightItemsLayout(
props: HighlightItemsLayoutProps
): JSX.Element {
const [currentItem, setCurrentItem] =
useState<LibraryItem | undefined>(undefined)
const [currentItem, setCurrentItem] = useState<LibraryItem | undefined>(
undefined
)
const listReducer = (
state: LibraryItem[],
@ -106,9 +107,6 @@ export function HighlightItemsLayout(
css={{
width: '100%',
height: `calc(100vh - ${HEADER_HEIGHT})`,
'@xlgDown': {
height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
},
}}
>
<EmptyHighlights />
@ -122,9 +120,6 @@ export function HighlightItemsLayout(
css={{
width: '100%',
height: `calc(100vh - ${HEADER_HEIGHT})`,
'@xlgDown': {
height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
},
'@lgDown': {
overflowY: 'scroll',
},
@ -153,9 +148,6 @@ export function HighlightItemsLayout(
<VStack
css={{
minHeight: `calc(100vh - ${HEADER_HEIGHT})`,
'@xlgDown': {
minHeight: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
},
bg: '$thBackground',
}}
distribution="start"

7
packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
View File

@ -9,10 +9,10 @@ import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQ
import { Label } from '../../../lib/networking/fragments/labelFragment'
import { theme } from '../../tokens/stitches.config'
import { currentThemeName } from '../../../lib/themeUpdater'
import { MOBILE_HEADER_HEIGHT } from './HeaderSpacer'
import { useRegisterActions } from 'kbar'
import { HEADER_HEIGHT } from './HeaderSpacer'
export const LIBRARY_LEFT_MENU_WIDTH = '300px'
export const LIBRARY_LEFT_MENU_WIDTH = '233px'
type LibraryFilterMenuProps = {
setShowAddLinkModal: (show: boolean) => void
@ -30,7 +30,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
<Box
css={{
left: '0px',
top: '105px',
top: HEADER_HEIGHT,
position: 'fixed',
bg: '$thBackground',
height: '100%',
@ -43,7 +43,6 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
},
'@mdDown': {
visibility: props.showFilterMenu ? 'visible' : 'hidden',
top: props.showFilterMenu ? MOBILE_HEADER_HEIGHT : '100%',
width: '100%',
transition: 'visibility 0s, top 150ms',
},

12
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View File

@ -12,11 +12,7 @@ import { LayoutType } from './HomeFeedContainer'
import { PrimaryDropdown } from '../PrimaryDropdown'
import { LogoBox } from '../../elements/LogoBox'
import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
import {
HeaderSpacer,
HEADER_HEIGHT,
MOBILE_HEADER_HEIGHT,
} from './HeaderSpacer'
import { HeaderSpacer, HEADER_HEIGHT } from './HeaderSpacer'
type LibraryHeaderProps = {
layout: LayoutType
@ -43,12 +39,8 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
width: '100%',
height: HEADER_HEIGHT,
bg: '$thBackground',
pt: '35px',
pt: '0px',
borderBottom: '1px solid $thBorderColor',
'@mdDown': {
height: MOBILE_HEADER_HEIGHT,
pt: '0px',
},
}}
>
{/* These will display/hide depending on breakpoints */}

7
packages/web/components/templates/reader/ReaderHeader.tsx
View File

@ -5,7 +5,7 @@ import { PrimaryDropdown } from '../PrimaryDropdown'
import { TooltipWrapped } from '../../elements/Tooltip'
import { LogoBox } from '../../elements/LogoBox'
import { ReactNode } from 'react'
import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
import { HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
import { theme } from '../../tokens/stitches.config'
type ReaderHeaderProps = {
@ -24,19 +24,17 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
top: '0',
left: '0',
zIndex: 1,
pt: '0px',
position: 'fixed',
width: '100%',
height: HEADER_HEIGHT,
display: props.alwaysDisplayToolbar ? 'flex' : 'transparent',
pt: '35px',
pointerEvents: 'none',
cursor: 'default',
borderBottom: props.alwaysDisplayToolbar
? '1px solid $thBorderColor'
: '1px solid transparent',
'@xlgDown': {
height: MOBILE_HEADER_HEIGHT,
pt: '0px',
bg: '$readerMargin',
pointerEvents: 'unset',
cursor: 'unset',
@ -55,6 +53,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
css={{
width: '100%',
height: '100%',
pointerEvents: 'all',
}}
>
<LogoBox />