Skip to content

Commit 3d2e193

Browse files
ashtonandersonashtonanderson
committed
Fix iPad layouts and tablet header menu
1 parent 833431f commit 3d2e193

7 files changed

Lines changed: 58 additions & 16 deletions

File tree

‎src/components/Analysis/BroadcastAnalysis.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type { Key } from 'chessground/types'
1010
import { Chess, PieceSymbol } from 'chess.ts'
1111
import type { DrawShape } from 'chessground/draw'
1212

13-
import { WindowSizeContext } from 'src/contexts'
13+
import { TABLET_BREAKPOINT_PX, WindowSizeContext } from 'src/contexts'
1414
import { MAIA_MODELS } from 'src/constants/common'
1515
import { GameInfo } from 'src/components/Common/GameInfo'
1616
import { GameBoard } from 'src/components/Board/GameBoard'
@@ -38,7 +38,10 @@ export const BroadcastAnalysis: React.FC<Props> = ({
3838
analysisController,
3939
}) => {
4040
const { width } = useContext(WindowSizeContext)
41-
const isMobile = useMemo(() => width > 0 && width <= 670, [width])
41+
const isMobile = useMemo(
42+
() => width > 0 && width <= TABLET_BREAKPOINT_PX,
43+
[width],
44+
)
4245

4346
const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
4447
const [currentSquare, setCurrentSquare] = useState<Key | null>(null)

‎src/components/Analysis/StreamAnalysis.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type { Key } from 'chessground/types'
1010
import { Chess, PieceSymbol } from 'chess.ts'
1111
import type { DrawShape } from 'chessground/draw'
1212

13-
import { WindowSizeContext } from 'src/contexts'
13+
import { TABLET_BREAKPOINT_PX, WindowSizeContext } from 'src/contexts'
1414
import { MAIA_MODELS } from 'src/constants/common'
1515
import { GameInfo } from 'src/components/Common/GameInfo'
1616
import { GameBoard } from 'src/components/Board/GameBoard'
@@ -41,7 +41,10 @@ export const StreamAnalysis: React.FC<Props> = ({
4141
analysisController,
4242
}) => {
4343
const { width } = useContext(WindowSizeContext)
44-
const isMobile = useMemo(() => width > 0 && width <= 670, [width])
44+
const isMobile = useMemo(
45+
() => width > 0 && width <= TABLET_BREAKPOINT_PX,
46+
[width],
47+
)
4548

4649
const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
4750
const [currentSquare, setCurrentSquare] = useState<Key | null>(null)

‎src/components/Board/GameplayInterface.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
269269
</div>
270270
<div
271271
id="play-page"
272-
className="relative flex aspect-square h-[100vw] w-screen"
272+
className="relative mx-auto flex aspect-square w-full max-w-3xl"
273273
>
274274
<GameBoard
275275
game={game}

‎src/components/Common/Header.tsx‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -332,13 +332,14 @@ export const Header: React.FC = () => {
332332
</div>
333333
</Link>
334334
<button
335-
className="block cursor-pointer *:*:fill-primary md:hidden"
335+
aria-label="Open navigation menu"
336+
className="block cursor-pointer *:*:fill-primary"
336337
onClick={() => setShowMenu((show) => !show)}
337338
>
338339
<span className="material-symbols-outlined text-3xl">menu</span>
339340
</button>
340341
{showMenu && (
341-
<div className="fixed left-0 top-0 z-40 flex h-screen w-screen flex-col items-start justify-between bg-backdrop py-4">
342+
<div className="fixed left-0 top-0 z-40 flex h-screen w-screen flex-col items-start justify-between overflow-y-auto bg-backdrop py-4">
342343
<div className="flex w-full flex-row justify-between px-4">
343344
<Link href="/" passHref>
344345
<div className="flex flex-row items-center gap-2">
@@ -347,26 +348,38 @@ export const Header: React.FC = () => {
347348
</div>
348349
</Link>
349350
<button
350-
className="block cursor-pointer *:*:fill-primary md:hidden"
351+
aria-label="Close navigation menu"
352+
className="block cursor-pointer *:*:fill-primary"
351353
onClick={() => setShowMenu(false)}
352354
>
353355
<span className="material-symbols-outlined text-3xl">menu</span>
354356
</button>
355357
</div>
356-
<div className="flex flex-col gap-5 px-12 tracking-wider">
358+
<div className="flex w-full flex-1 flex-col gap-5 overflow-y-auto px-12 py-6 tracking-wider">
357359
<div className="flex flex-col items-start justify-center gap-3">
358360
<button>PLAY</button>
359361
<div className="ml-4 flex flex-col items-start justify-center gap-2">
360-
<button onClick={() => startGame('againstMaia')}>
362+
<button
363+
onClick={() => {
364+
setShowMenu(false)
365+
startGame('againstMaia')
366+
}}
367+
>
361368
Play Maia
362369
</button>
363-
<button onClick={() => startGame('handAndBrain')}>
370+
<button
371+
onClick={() => {
372+
setShowMenu(false)
373+
startGame('handAndBrain')
374+
}}
375+
>
364376
Play Hand and Brain
365377
</button>
366378
<a
367379
href="https://lichess.org/@/maia1"
368380
target="_blank"
369381
rel="noreferrer"
382+
onClick={() => setShowMenu(false)}
370383
>
371384
Play Maia on Lichess
372385
</a>
@@ -393,6 +406,15 @@ export const Header: React.FC = () => {
393406
<Link href="/blog" className="uppercase">
394407
Maia Blog
395408
</Link>
409+
<a
410+
target="_blank"
411+
rel="noreferrer"
412+
href="https://discord.gg/Az93GqEAs7"
413+
className="uppercase"
414+
onClick={() => setShowMenu(false)}
415+
>
416+
Discord
417+
</a>
396418
{/* <a
397419
target="_blank"
398420
rel="noreferrer"

‎src/components/Openings/OpeningDrillAnalysis.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { GameNode } from 'src/types'
1010
import { GameTree } from 'src/types/tree'
1111
import type { DrawShape } from 'chessground/draw'
1212
import { useAnalysisController } from 'src/hooks/useAnalysisController'
13-
import { WindowSizeContext } from 'src/contexts'
13+
import { TABLET_BREAKPOINT_PX, WindowSizeContext } from 'src/contexts'
1414

1515
interface Props {
1616
currentNode: GameNode | null
@@ -38,7 +38,10 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
3838
makeMove: parentMakeMove,
3939
}) => {
4040
const { width } = useContext(WindowSizeContext)
41-
const isMobile = useMemo(() => width > 0 && width <= 670, [width])
41+
const isMobile = useMemo(
42+
() => width > 0 && width <= TABLET_BREAKPOINT_PX,
43+
[width],
44+
)
4245

4346
const hover = useCallback(
4447
(move?: string) => {

‎src/contexts/WindowSizeContext.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { useWindowSize } from 'src/hooks'
22
import React, { ReactNode, useMemo } from 'react'
33

4+
export const PHONE_BREAKPOINT_PX = 670
5+
export const TABLET_BREAKPOINT_PX = 1024
6+
47
interface IWindowSizeContext {
58
height: number
69
width: number
@@ -19,7 +22,12 @@ export const WindowSizeContextProvider: React.FC<{ children: ReactNode }> = ({
1922
children: ReactNode
2023
}) => {
2124
const { width, height } = useWindowSize()
22-
const isMobile = useMemo(() => width > 0 && width <= 670, [width])
25+
// `isMobile` is used by many layouts as the "stacked" layout trigger.
26+
// Include tablets so iPad widths do not fall into cramped desktop layouts.
27+
const isMobile = useMemo(
28+
() => width > 0 && width <= TABLET_BREAKPOINT_PX,
29+
[width],
30+
)
2331
return (
2432
<WindowSizeContext.Provider value={{ width, height, isMobile }}>
2533
{children}

‎src/pages/puzzles.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import { useAnalysisController } from 'src/hooks/useAnalysisController'
4848
import { AllStats, useStats } from 'src/hooks/useStats'
4949
import { PuzzleGame, Status } from 'src/types/puzzle'
5050
import { AnalyzedGame, MaiaEvaluation, StockfishEvaluation } from 'src/types'
51-
import { WindowSizeContext, useTour } from 'src/contexts'
51+
import { TABLET_BREAKPOINT_PX, WindowSizeContext, useTour } from 'src/contexts'
5252
import { TrainingControllerContext } from 'src/contexts/TrainingControllerContext'
5353
import {
5454
getCurrentPlayer,
@@ -316,7 +316,10 @@ const Train: React.FC<Props> = ({
316316
)
317317

318318
const { width } = useContext(WindowSizeContext)
319-
const isMobile = useMemo(() => width > 0 && width <= 670, [width])
319+
const isMobile = useMemo(
320+
() => width > 0 && width <= TABLET_BREAKPOINT_PX,
321+
[width],
322+
)
320323
const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
321324
const analysisSyncedRef = useRef(false)
322325
const [promotionFromTo, setPromotionFromTo] = useState<

0 commit comments

Comments
 (0)