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

Use vh to force the PDF container height

Browse source
This commit is contained in:
Jackson Harper 2023-03-16 17:01:53 +08:00
parent d13b018b2b
commit a9128a0733
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/web/components/templates/article/PdfArticleContainer.tsx
View file

@ -17,6 +17,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'
export type PdfArticleContainerProps = {
viewerUsername: string
@ -29,12 +30,14 @@ export default function PdfArticleContainer(
props: PdfArticleContainerProps
): JSX.Element {
const containerRef = useRef<HTMLDivElement | null>(null)
const [shareTarget, setShareTarget] =
useState<Highlight | undefined>(undefined)
const [shareTarget, setShareTarget] = useState<Highlight | undefined>(
undefined
)
const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
const [noteTargetPageIndex, setNoteTargetPageIndex] =
useState<number | undefined>(undefined)
const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
number | undefined
>(undefined)
const highlightsRef = useRef<Highlight[]>([])
const canShareNative = useCanShareNative()
@ -454,7 +457,15 @@ export default function PdfArticleContainer(
// should be handled by the PSPDFKit instance callbacks.
return (
<Box css={{ width: '100%', height: '100%' }}>
<Box
css={{
width: '100%',
height: `calc(100vh - ${HEADER_HEIGHT})`,
'@xlgDown': {
height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
},
}}
>
<div ref={containerRef} style={{ width: '100%', height: '100%' }} />
{noteTarget && (
<HighlightNoteModal

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

@ -9,7 +9,7 @@ export function HeaderSpacer(): JSX.Element {
css={{
height: HEADER_HEIGHT,
bg: '$grayBase',
'@mdDown': {
'@xlgDown': {
height: MOBILE_HEADER_HEIGHT,
},
}}