open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Shorter graph on mobile

Browse Source
This commit is contained in:
jahooma 2022-01-18 17:10:21 -06:00
parent ee64c4e923
commit 21949abbe1
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/contract-prob-graph.tsx
View File

@ -47,7 +47,10 @@ export function ContractProbGraph(props: { contract: Contract }) {
const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime) const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
return ( return (
<div className="w-full" style={{ height: 400 }}> <div
className="w-full"
style={{ height: !width || width >= 800 ? 400 : 250 }}
>
<ResponsiveLine <ResponsiveLine
data={data} data={data}
yScale={{ min: 0, max: 100, type: 'linear' }} yScale={{ min: 0, max: 100, type: 'linear' }}

10
web/hooks/use-window-size.ts
View File

@ -1,17 +1,17 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
export const useWindowSize = () => { export const useWindowSize = () => {
const [size, setSize] = useState( const [size, setSize] = useState<{
typeof window === 'undefined' width: number | undefined
? { width: undefined, height: undefined } height: number | undefined
: { width: window.innerWidth, height: window.innerHeight } }>({ width: undefined, height: undefined })
)
useEffect(() => { useEffect(() => {
const onResize = () => { const onResize = () => {
setSize({ width: window.innerWidth, height: window.innerHeight }) setSize({ width: window.innerWidth, height: window.innerHeight })
} }
onResize()
window.addEventListener('resize', onResize) window.addEventListener('resize', onResize)
return () => window.removeEventListener('resize', onResize) return () => window.removeEventListener('resize', onResize)
}, []) }, [])