Skip to content

Commit edc9145

Browse files
kevinjosethomaskevinjosethomas
committed
chore: add consistent sizing for analysis page components
1 parent f6318c4 commit edc9145

5 files changed

Lines changed: 77 additions & 24 deletions

File tree

‎src/components/Analysis/AnalysisSidebar.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,34 +77,34 @@ export const AnalysisSidebar: React.FC<Props> = ({
7777
<motion.div
7878
id="analysis"
7979
variants={itemVariants ?? {}}
80-
className="flex h-[calc(85vh)] w-full flex-col gap-2 xl:h-[calc(55vh+5rem)]"
80+
className="desktop-right-column-container flex flex-col gap-2"
8181
style={{ willChange: 'transform, opacity' }}
8282
>
8383
{/* Analysis Toggle Bar */}
84-
<div className="flex items-center justify-between rounded bg-background-1 px-4 py-2">
84+
<div className="flex h-10 min-h-10 items-center justify-between rounded bg-background-1 px-4">
8585
<div className="flex items-center gap-2">
8686
<span className="material-symbols-outlined text-xl">analytics</span>
8787
<h3 className="font-semibold">Analysis</h3>
8888
</div>
8989
<button
9090
onClick={handleToggleAnalysis}
91-
className={`flex items-center gap-2 rounded px-3 py-1 text-sm transition-colors ${
91+
className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${
9292
analysisEnabled
9393
? 'bg-human-4 text-white hover:bg-human-4/80'
9494
: 'bg-background-2 text-secondary hover:bg-background-3'
9595
}`}
9696
>
97-
<span className="material-symbols-outlined !text-sm">
97+
<span className="material-symbols-outlined !text-xs">
9898
{analysisEnabled ? 'visibility' : 'visibility_off'}
9999
</span>
100100
{analysisEnabled ? 'Visible' : 'Hidden'}
101101
</button>
102102
</div>
103103

104-
{/* Large screens (xl+): Side by side layout */}
104+
{/* Large screens : 2-row layout */}
105105
<div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-2">
106-
<div className="relative flex h-[calc((55vh+4.5rem)/2)] gap-2">
107-
{/* Combined Highlight + MovesByRating container */}
106+
{/* Combined Highlight + MovesByRating container */}
107+
<div className="desktop-analysis-big-row-1-container relative flex gap-2">
108108
<div className="flex h-full w-full overflow-hidden rounded border-[0.5px] border-white/40">
109109
<div className="flex h-full w-auto min-w-[40%] max-w-[40%] border-r-[0.5px] border-white/40">
110110
<Highlight
@@ -170,7 +170,9 @@ export const AnalysisSidebar: React.FC<Props> = ({
170170
</div>
171171
)}
172172
</div>
173-
<div className="relative flex h-[calc((55vh+4.5rem)/2)] flex-row gap-2">
173+
174+
{/* MoveMap + BlunderMeter container */}
175+
<div className="desktop-analysis-big-row-2-container relative flex flex-row gap-2">
174176
<div className="flex h-full w-full flex-col">
175177
<MoveMap
176178
moveMap={analysisEnabled ? controller.moveMap : undefined}
@@ -210,10 +212,10 @@ export const AnalysisSidebar: React.FC<Props> = ({
210212
</div>
211213
</div>
212214

213-
{/* Smaller screens (below xl): 3-row stacked layout */}
215+
{/* Smaller screens: 3-row layout */}
214216
<div className="flex h-full flex-col gap-2 xl:hidden">
215217
{/* Row 1: Combined Highlight + BlunderMeter container */}
216-
<div className="relative flex h-[calc((85vh)*0.4)] overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1">
218+
<div className="desktop-analysis-small-row-1-container relative flex overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1">
217219
<div className="flex h-full w-full border-r-[0.5px] border-white/40">
218220
<Highlight
219221
hover={analysisEnabled ? hover : mockHover}
@@ -291,7 +293,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
291293
</div>
292294

293295
{/* Row 2: MoveMap */}
294-
<div className="relative flex h-[calc((85vh)*0.3)] w-full">
296+
<div className="desktop-analysis-small-row-2-container relative flex w-full">
295297
<div className="h-full w-full">
296298
<MoveMap
297299
moveMap={analysisEnabled ? controller.moveMap : undefined}
@@ -320,7 +322,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
320322
</div>
321323

322324
{/* Row 3: MovesByRating */}
323-
<div className="relative flex h-[calc((85vh)*0.3)] w-full">
325+
<div className="desktop-analysis-small-row-3-container relative flex w-full">
324326
<div className="h-full w-full">
325327
<MovesByRating
326328
moves={analysisEnabled ? controller.movesByRating : undefined}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -659,17 +659,17 @@ const Analysis: React.FC<Props> = ({
659659

660660
const desktopLayout = (
661661
<motion.div
662-
className="flex h-full w-full flex-col items-center py-4 md:py-10"
662+
className="flex h-full w-full flex-col items-center py-4"
663663
variants={containerVariants}
664664
initial="hidden"
665665
animate="visible"
666666
exit="exit"
667667
style={{ willChange: 'transform, opacity' }}
668668
>
669-
<div className="flex h-full w-[90%] flex-row gap-4">
669+
<div className="flex h-full w-[90%] flex-row gap-2">
670670
<motion.div
671671
id="navigation"
672-
className="flex h-[85vh] w-72 min-w-60 max-w-72 flex-col gap-2 overflow-hidden 2xl:min-w-72"
672+
className="desktop-left-column-container flex flex-col gap-2 overflow-hidden 2xl:min-w-72"
673673
variants={itemVariants}
674674
style={{ willChange: 'transform, opacity' }}
675675
>
@@ -724,7 +724,7 @@ const Analysis: React.FC<Props> = ({
724724
</div>
725725
</motion.div>
726726
<motion.div
727-
className="flex h-[85vh] w-[45vh] flex-col gap-2 2xl:w-[55vh]"
727+
className="desktop-middle-column-container flex flex-col gap-2"
728728
variants={itemVariants}
729729
style={{ willChange: 'transform, opacity' }}
730730
>
@@ -743,7 +743,7 @@ const Analysis: React.FC<Props> = ({
743743
color={controller.orientation === 'white' ? 'black' : 'white'}
744744
termination={analyzedGame.termination.winner}
745745
/>
746-
<div className="relative flex aspect-square w-[45vh] 2xl:w-[55vh]">
746+
<div className="desktop-board-container relative flex aspect-square">
747747
<GameBoard
748748
game={analyzedGame}
749749
availableMoves={controller.availableMoves}

‎src/pages/openings/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -686,7 +686,7 @@ const OpeningsPage: NextPage = () => {
686686
<div className="flex h-full w-full flex-col items-center py-4 md:py-10">
687687
<div className="flex h-full w-[90%] flex-row gap-4">
688688
{/* Left Sidebar */}
689-
<div className="flex h-[85vh] w-72 min-w-60 max-w-72 flex-col gap-2 overflow-hidden 2xl:min-w-72">
689+
<div className="desktop-left-column-container flex flex-col gap-2 overflow-hidden">
690690
<div className="flex w-full flex-col">
691691
<OpeningDrillSidebar
692692
currentDrill={controller.currentDrill}
@@ -743,10 +743,10 @@ const OpeningsPage: NextPage = () => {
743743
</div>
744744

745745
{/* Center - Board */}
746-
<div className="flex h-[85vh] w-[45vh] flex-col gap-2 2xl:w-[55vh]">
746+
<div className="desktop-middle-column-container flex flex-col gap-2">
747747
<div className="flex w-full flex-col overflow-hidden rounded">
748748
<PlayerInfo name={topPlayer.name} color={topPlayer.color} />
749-
<div className="relative flex aspect-square w-[45vh] 2xl:w-[55vh]">
749+
<div className="desktop-board-container relative flex aspect-square">
750750
<GameBoard
751751
currentNode={controller.currentNode}
752752
orientation={controller.orientation}
@@ -838,7 +838,7 @@ const OpeningsPage: NextPage = () => {
838838
{/* Right Panel - Analysis */}
839839
<div
840840
id="analysis"
841-
className="flex h-[85vh] w-full flex-col gap-2 xl:h-[calc(55vh+4.5rem)]"
841+
className="desktop-right-column-container flex flex-col gap-2"
842842
>
843843
<Suspense
844844
fallback={

‎src/pages/puzzles.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -676,7 +676,7 @@ const Train: React.FC<Props> = ({
676676
>
677677
<div className="flex h-full w-[90%] flex-row gap-4">
678678
<motion.div
679-
className="flex h-[85vh] w-72 min-w-60 max-w-72 flex-col gap-2 overflow-hidden 2xl:min-w-72"
679+
className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
680680
variants={itemVariants}
681681
style={{ willChange: 'transform, opacity' }}
682682
>
@@ -708,13 +708,13 @@ const Train: React.FC<Props> = ({
708708
</motion.div>
709709

710710
<motion.div
711-
className="flex h-[85vh] w-[45vh] flex-col gap-2 2xl:w-[55vh]"
711+
className="desktop-middle-column-container flex flex-col gap-2"
712712
variants={itemVariants}
713713
style={{ willChange: 'transform, opacity' }}
714714
>
715715
<div
716716
id="train-page"
717-
className="relative flex aspect-square w-[45vh] 2xl:w-[55vh]"
717+
className="desktop-board-container relative flex aspect-square"
718718
>
719719
<GameBoard
720720
game={trainingGame}

‎src/styles/tailwind.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,57 @@ svg {
9494
fill: rgb(var(--color-text-primary));
9595
}
9696

97+
.desktop-left-column-container {
98+
width: 16vw;
99+
min-width: 14rem;
100+
height: 85vh;
101+
}
102+
103+
.desktop-middle-column-container {
104+
width: 28vw;
105+
min-width: calc(max(20rem, min(28vw, 50vh)));
106+
height: 85vh;
107+
}
108+
109+
.desktop-board-container {
110+
min-width: calc(max(20rem, min(28vw, 50vh)));
111+
min-height: calc(max(20rem, min(28vw, 50vh)));
112+
width: min(28vw, 50vh);
113+
height: min(28vw, 50vh);
114+
}
115+
116+
.desktop-right-column-container {
117+
width: 100%;
118+
min-width: 40vw;
119+
height: 85vh;
120+
}
121+
122+
@media (min-width: 1280px) {
123+
.desktop-right-column-container {
124+
height: 85vh;
125+
}
126+
}
127+
128+
.desktop-analysis-big-row-1-container {
129+
height: calc((85vh - 2.5rem - 1rem) / 2);
130+
}
131+
132+
.desktop-analysis-big-row-2-container {
133+
height: calc((85vh - 2.5rem - 1rem) / 2);
134+
}
135+
136+
.desktop-analysis-small-row-1-container {
137+
height: calc((85vh - 2.5rem - 1.5rem) * 0.4);
138+
}
139+
140+
.desktop-analysis-small-row-2-container {
141+
height: calc((85vh - 2.5rem - 1.5rem) * 0.3);
142+
}
143+
144+
.desktop-analysis-small-row-3-container {
145+
height: calc((85vh - 2.5rem - 1.5rem) * 0.3);
146+
}
147+
97148
.no-scrollbar::-webkit-scrollbar {
98149
display: none;
99150
}

0 commit comments

Comments
 (0)