Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-04-24 23:19:39 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

accordions not overflowing anymore

Browse Source
This commit is contained in:
Sendou 2020-02-05 21:57:49 +02:00
parent 09c99a4cbf
commit 39b576850d
2 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend-react/src/components/user/ModesAccordion.tsx
View File

@ -115,7 +115,7 @@ const ModesAccordion: React.FC<ModesAccordionProps> = ({ placements }) => {
const { themeColorWithShade, grayWithShade, darkerBgColor } = useContext(
MyThemeContext
)
const isSmall = useBreakPoints(560)
const isSmall: boolean[] = useBreakPoints([560, 835]) as boolean[]
const allModesTabsData: AllModesAccordionData = placements.reduce(
accordionReducer,
@ -143,7 +143,7 @@ const ModesAccordion: React.FC<ModesAccordionProps> = ({ placements }) => {
justifyItems="center"
alignItems="center"
w="100%"
display={isSmall ? "none" : "grid"}
display={isSmall[0] ? "none" : "grid"}
>
<StyledBox color={grayWithShade} gridArea="1 / 1 / 2 / 2">
Best placement
@ -164,15 +164,20 @@ const ModesAccordion: React.FC<ModesAccordionProps> = ({ placements }) => {
<StyledBox color={grayWithShade} gridArea="3 / 2 / 4 / 3">
{allModesTabsData[key]?.highestXPowerDate}
</StyledBox>
<StyledBox color={grayWithShade} gridArea="1 / 3 / 2 / 4">
Number of placements
</StyledBox>
<StyledBox size="s" gridArea="2 / 3 / 3 / 4">
{allModesTabsData[key]?.placements.length}
</StyledBox>
{!isSmall[1] && (
<>
<StyledBox color={grayWithShade} gridArea="1 / 3 / 2 / 4">
Number of placements
</StyledBox>
<StyledBox size="s" gridArea="2 / 3 / 3 / 4">
{allModesTabsData[key]?.placements.length}
</StyledBox>
</>
)}
</Grid>
<Flex
display={!isSmall ? "none" : "flex"}
display={!isSmall[0] ? "none" : "flex"}
flexDirection="column"
pl="1em"
>

8
frontend-react/src/hooks/useBreakPoints.ts
View File

@ -5,7 +5,7 @@ function getWindowWidth() {
return width
}
export default function useBreakPoints(breakpoint: number) {
export default function useBreakPoints(breakpoints: number | number[]) {
const [windowWidth, setWindowWidth] = useState<number>(getWindowWidth())
useEffect(() => {
@ -17,5 +17,9 @@ export default function useBreakPoints(breakpoint: number) {
return () => window.removeEventListener("resize", handleResize)
}, [])
return windowWidth < breakpoint
if (Array.isArray(breakpoints)) {
return breakpoints.map(breakpoint => windowWidth < breakpoint)
}
return windowWidth < breakpoints
}