Skip to content

Commit 6828b76

Browse files
kevinjosethomaskevinjosethomas
committed
feat: update layout styles across multiple pages for consistent horizontal margins
1 parent f02dc33 commit 6828b76

7 files changed

Lines changed: 73 additions & 72 deletions

File tree

‎src/pages/blog/[id].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const BlogPost = ({ post }: BlogPostProps) => {
1919
}
2020

2121
return (
22-
<div className="flex h-full w-full flex-col items-start justify-center gap-5 px-[4%] py-[10%] md:px-[4%] md:py-[2%]">
22+
<div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
2323
<Head>
2424
<title>Blog – Maia Chess</title>
2525
<meta

‎src/pages/blog/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { getSortedPostsData } from 'src/blog/posts'
66

77
export default function Blog({ posts }: { posts: Post[] }) {
88
return (
9-
<div className="flex h-full w-full flex-col items-start justify-center gap-5 px-[4%] py-[10%] md:px-[4%] md:py-[2%]">
9+
<div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
1010
<Head>
1111
<title>Blog – Maia Chess</title>
1212
<meta

‎src/pages/leaderboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Leaderboard: React.FC = () => {
6363
}, [fetchLeaderboard])
6464

6565
return (
66-
<div className="flex h-full w-full flex-col items-start justify-center gap-8 px-[4%] py-[2%]">
66+
<div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-8 py-[2%]">
6767
<Head>
6868
<title>Leaderboard – Maia Chess</title>
6969
<meta

‎src/pages/openings/index.tsx‎

Lines changed: 62 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -400,18 +400,37 @@ const OpeningsPage: NextPage = () => {
400400
/>
401401
</div>
402402

403-
{/* Moves Container at the very bottom */}
404-
<div className="flex h-[25vh] flex-col overflow-hidden">
403+
{/* Moves Container with Board Controller */}
404+
<div className="flex h-[30vh] flex-col overflow-hidden">
405405
{controller.currentDrillGame && (
406-
<MovesContainer
407-
game={{
408-
id: controller.currentDrillGame.id,
409-
tree: controller.gameTree,
410-
moves: movesForContainer,
411-
}}
412-
type="analysis"
413-
showAnnotations={false}
414-
/>
406+
<div className="flex h-full flex-col">
407+
<div className="flex-1 overflow-hidden">
408+
<MovesContainer
409+
game={{
410+
id: controller.currentDrillGame.id,
411+
tree: controller.gameTree,
412+
moves: movesForContainer,
413+
}}
414+
type="analysis"
415+
showAnnotations={false}
416+
/>
417+
</div>
418+
<div className="border-t border-white/10">
419+
<BoardController
420+
gameTree={controller.gameTree}
421+
orientation={controller.orientation}
422+
setOrientation={noOpSetOrientation}
423+
currentNode={controller.currentNode}
424+
plyCount={controller.plyCount}
425+
goToNode={controller.goToNode}
426+
goToNextNode={controller.goToNextNode}
427+
goToPreviousNode={customGoToPreviousNode}
428+
goToRootNode={customGoToRootNode}
429+
disableFlip={true}
430+
disablePrevious={controller.isAtOpeningEnd}
431+
/>
432+
</div>
433+
</div>
415434
)}
416435
</div>
417436
</div>
@@ -440,31 +459,34 @@ const OpeningsPage: NextPage = () => {
440459
<PlayerInfo name={bottomPlayer.name} color={bottomPlayer.color} />
441460
</div>
442461

443-
{/* Controls under board */}
444-
<div className="flex w-full flex-col gap-2">
445-
<BoardController
446-
gameTree={controller.gameTree}
447-
orientation={controller.orientation}
448-
setOrientation={noOpSetOrientation}
449-
currentNode={controller.currentNode}
450-
plyCount={controller.plyCount}
451-
goToNode={controller.goToNode}
452-
goToNextNode={controller.goToNextNode}
453-
goToPreviousNode={customGoToPreviousNode}
454-
goToRootNode={customGoToRootNode}
455-
disableFlip={true}
456-
disablePrevious={controller.isAtOpeningEnd}
457-
/>
458-
459-
{/* Drill controls */}
460-
<div className="flex gap-2">
461-
<button
462-
onClick={handleChangeSelections}
463-
className="flex-1 rounded bg-background-2 py-2 text-sm transition-colors hover:bg-background-3"
464-
>
465-
Change Selected Openings
466-
</button>
467-
{controller.remainingDrills.length > 0 && (
462+
{/* Drill progress with next drill button */}
463+
{controller.currentDrillGame && controller.currentDrill && (
464+
<div className="flex w-full items-center gap-3 rounded bg-background-1 p-3">
465+
<div className="flex-1">
466+
<div className="mb-1 flex justify-between text-xs">
467+
<span className="text-secondary">Move Progress</span>
468+
<span className="font-medium text-primary">
469+
{controller.currentDrillGame.playerMoveCount}/
470+
{controller.currentDrill.targetMoveNumber}
471+
</span>
472+
</div>
473+
<div className="h-2 w-full rounded bg-background-3">
474+
<div
475+
className="h-full rounded bg-human-3 transition-all duration-300"
476+
style={{
477+
width: `${
478+
controller.currentDrill.targetMoveNumber > 0
479+
? (controller.currentDrillGame.playerMoveCount /
480+
controller.currentDrill.targetMoveNumber) *
481+
100
482+
: 0
483+
}%`,
484+
maxWidth: '100%',
485+
}}
486+
/>
487+
</div>
488+
</div>
489+
{controller.remainingDrills.length > 1 && (
468490
<button
469491
onClick={controller.moveToNextDrill}
470492
className="rounded bg-human-4 px-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80"
@@ -473,18 +495,7 @@ const OpeningsPage: NextPage = () => {
473495
</button>
474496
)}
475497
</div>
476-
477-
{/* Current drill progress only */}
478-
{controller.currentDrillGame && controller.currentDrill && (
479-
<div className="rounded bg-background-2 p-2 text-center text-sm">
480-
<span className="text-secondary">Progress: </span>
481-
<span className="font-medium text-primary">
482-
{controller.currentDrillGame.playerMoveCount}/
483-
{controller.currentDrill.targetMoveNumber} moves
484-
</span>
485-
</div>
486-
)}
487-
</div>
498+
)}
488499
</div>
489500

490501
{/* Right Panel - Analysis */}
@@ -560,7 +571,7 @@ const OpeningsPage: NextPage = () => {
560571
>
561572
Change Openings
562573
</button>
563-
{controller.remainingDrills.length > 0 && (
574+
{controller.remainingDrills.length > 1 && (
564575
<button
565576
onClick={controller.moveToNextDrill}
566577
className="rounded bg-human-4 px-4 py-2 text-sm font-medium"
@@ -621,7 +632,7 @@ const OpeningsPage: NextPage = () => {
621632
performanceData={controller.currentPerformanceData}
622633
onContinueAnalyzing={controller.continueAnalyzing}
623634
onNextDrill={controller.moveToNextDrill}
624-
isLastDrill={controller.remainingDrills.length === 0}
635+
isLastDrill={controller.remainingDrills.length <= 1}
625636
/>
626637
)}
627638
</AnimatePresence>
@@ -631,7 +642,7 @@ const OpeningsPage: NextPage = () => {
631642
{controller.showFinalModal && (
632643
<FinalCompletionModal
633644
performanceData={controller.overallPerformanceData}
634-
onContinueAnalyzing={() => controller.setShowFinalModal(false)}
645+
onContinueAnalyzing={controller.continueAnalyzingFromFinal}
635646
onSelectNewOpenings={() => {
636647
controller.setShowFinalModal(false)
637648
setShowSelectionModal(true)

‎src/pages/profile/[name].tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const Profile: React.FC<Props> = (props: Props) => {
8383
const { isMobile } = useContext(WindowSizeContext)
8484

8585
const desktopLayout = (
86-
<div className="flex h-full w-full flex-col items-start justify-center gap-6 px-[4%] md:py-[2%]">
86+
<div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-6 md:py-[2%]">
8787
<div className="flex flex-row items-center gap-4">
8888
<div className="*:w-16 *:fill-primary">{UserIcon}</div>
8989
<div className="flex flex-col">
@@ -103,7 +103,7 @@ const Profile: React.FC<Props> = (props: Props) => {
103103
)
104104

105105
const mobileLayout = (
106-
<div className="mt-6 flex flex-col gap-3 px-[4%]">
106+
<div className="mx-auto mt-6 flex w-[90%] flex-col gap-3">
107107
<div className="flex flex-row items-center gap-2 md:gap-3">
108108
<div className="*:w-8 *:fill-primary">{UserIcon}</div>
109109
<h1 className="text-3xl font-semibold">{props.name}</h1>

‎src/pages/profile/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const Profile: React.FC<Props> = (props: Props) => {
8282
const { isMobile } = useContext(WindowSizeContext)
8383

8484
const desktopLayout = (
85-
<div className="flex h-full w-full flex-col items-start justify-center gap-6 px-[4%] md:py-[2%]">
85+
<div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-6 md:py-[2%]">
8686
<div className="flex flex-row items-center gap-4">
8787
<div className="*:w-16 *:fill-primary">{UserIcon}</div>
8888
<h1 className="text-3xl font-semibold">{user?.displayName}</h1>
@@ -95,7 +95,7 @@ const Profile: React.FC<Props> = (props: Props) => {
9595
)
9696

9797
const mobileLayout = (
98-
<div className="mt-6 flex flex-col gap-3 px-[4%]">
98+
<div className="mx-auto mt-6 flex w-[90%] flex-col gap-3">
9999
<div className="flex flex-row items-center gap-2 md:gap-3">
100100
<div className="*:w-8 *:fill-primary">{UserIcon}</div>
101101
<h1 className="text-3xl font-semibold">{user?.displayName}</h1>

‎src/pages/turing.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,8 @@ const Turing: React.FC<Props> = (props: Props) => {
107107
const desktopLayout = (
108108
<>
109109
<div className="flex h-full flex-1 flex-col justify-center gap-1 py-10">
110-
<div className="mt-2 flex w-full flex-row items-center justify-center gap-1">
111-
<div
112-
style={{
113-
maxWidth: 'min(20vw, 100vw - 75vh)',
114-
}}
115-
className="flex h-[75vh] w-[40vh] flex-col justify-between"
116-
>
110+
<div className="mx-auto mt-2 flex w-[90%] flex-row items-center justify-between gap-4">
111+
<div className="flex h-[75vh] min-w-64 flex-grow flex-col justify-between">
117112
<div className="flex w-full flex-col gap-2">
118113
<GameInfo title="Bot or Not" icon="smart_toy" type="turing">
119114
{Info}
@@ -125,15 +120,10 @@ const Turing: React.FC<Props> = (props: Props) => {
125120
</div>
126121
<StatsDisplay stats={stats} />
127122
</div>
128-
<div className="relative flex aspect-square w-full max-w-[75vh]">
123+
<div className="relative flex aspect-square w-full max-w-[75vh] flex-shrink-0">
129124
<GameBoard game={game} currentNode={controller.currentNode} />
130125
</div>
131-
<div
132-
style={{
133-
maxWidth: 'min(20vw, 100vw - 75vh)',
134-
}}
135-
className="flex h-[75vh] w-[40vh] flex-col gap-1"
136-
>
126+
<div className="flex h-[75vh] min-w-64 flex-grow flex-col gap-1">
137127
<div className="relative bottom-0 h-full min-h-[38px] flex-1">
138128
<MovesContainer
139129
game={game}

0 commit comments

Comments
 (0)