Skip to content

Commit 4cd14b5

Browse files
kevinjosethomaskevinjosethomas
committed
style: improve padding, consistency, and ui for analysis page
1 parent 693bb9b commit 4cd14b5

4 files changed

Lines changed: 64 additions & 18 deletions

File tree

‎src/components/Analysis/AnalysisSidebar.tsx‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
7777
<motion.div
7878
id="analysis"
7979
variants={itemVariants ?? {}}
80-
className="desktop-right-column-container flex flex-col gap-2"
80+
className="desktop-right-column-container flex flex-col gap-3"
8181
style={{ willChange: 'transform, opacity' }}
8282
>
8383
{/* Large screens : 2-row layout */}
84-
<div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-2">
84+
<div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-3">
8585
{/* Combined Highlight + MovesByRating container */}
86-
<div className="desktop-analysis-big-row-1-container relative flex gap-2">
86+
<div className="desktop-analysis-big-row-1-container relative flex gap-3">
8787
<div className="border-glassBorder bg-glass-strong flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
8888
{/* Merged header with toggle */}
8989
<div className="border-glassBorder flex h-10 min-h-10 items-center justify-between border-b bg-transparent px-4 text-white/90">
@@ -160,7 +160,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
160160
</div>
161161
</div>
162162
{!analysisEnabled && (
163-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
163+
<div
164+
className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
165+
style={{
166+
background:
167+
'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
168+
}}
169+
>
164170
<div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
165171
<span className="material-symbols-outlined mb-2 text-3xl text-white/80">
166172
lock
@@ -175,7 +181,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
175181
</div>
176182

177183
{/* MoveMap + BlunderMeter container */}
178-
<div className="desktop-analysis-big-row-2-container relative flex flex-row gap-2">
184+
<div className="desktop-analysis-big-row-2-container relative flex flex-row gap-3">
179185
<div className="flex h-full w-full flex-col">
180186
<MoveMap
181187
moveMap={analysisEnabled ? controller.moveMap : undefined}
@@ -200,7 +206,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
200206
}
201207
/>
202208
{!analysisEnabled && (
203-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
209+
<div
210+
className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
211+
style={{
212+
background:
213+
'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
214+
}}
215+
>
204216
<div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
205217
<span className="material-symbols-outlined mb-2 text-3xl text-white/80">
206218
lock
@@ -216,7 +228,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
216228
</div>
217229

218230
{/* Smaller screens: 3-row layout */}
219-
<div className="flex h-full flex-col gap-2 xl:hidden">
231+
<div className="flex h-full flex-col gap-3 xl:hidden">
220232
{/* Row 1: Combined Highlight + BlunderMeter container */}
221233
<div className="desktop-analysis-small-row-1-container border-glassBorder bg-glass-strong relative flex overflow-hidden rounded-md border backdrop-blur-md">
222234
{/* Merged header with toggle (mobile/smaller screens) */}
@@ -305,7 +317,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
305317
</div>
306318
</div>
307319
{!analysisEnabled && (
308-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
320+
<div
321+
className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
322+
style={{
323+
background:
324+
'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
325+
}}
326+
>
309327
<div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
310328
<span className="material-symbols-outlined mb-2 text-3xl text-white/80">
311329
lock
@@ -334,7 +352,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
334352
/>
335353
</div>
336354
{!analysisEnabled && (
337-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
355+
<div
356+
className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
357+
style={{
358+
background:
359+
'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
360+
}}
361+
>
338362
<div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
339363
<span className="material-symbols-outlined mb-2 text-3xl text-white/80">
340364
lock
@@ -359,7 +383,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
359383
/>
360384
</div>
361385
{!analysisEnabled && (
362-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
386+
<div
387+
className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
388+
style={{
389+
background:
390+
'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
391+
}}
392+
>
363393
<div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
364394
<span className="material-symbols-outlined mb-2 text-3xl text-white/80">
365395
lock

‎src/components/Common/PlayerInfo.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface PlayerInfoProps {
99
isActive: boolean
1010
lastUpdateTime: number
1111
}
12+
rounded?: 'all' | 'top' | 'bottom' | 'none'
1213
}
1314

1415
import { useState, useEffect } from 'react'
@@ -20,6 +21,7 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
2021
termination,
2122
showArrowLegend = false,
2223
clock,
24+
rounded = 'all',
2325
}) => {
2426
const [currentTime, setCurrentTime] = useState<number>(
2527
clock?.timeInSeconds || 0,
@@ -53,8 +55,17 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
5355
return `${mins}:${secs.toString().padStart(2, '0')}`
5456
}
5557

58+
const roundedClass =
59+
rounded === 'top'
60+
? 'rounded-t-md'
61+
: rounded === 'bottom'
62+
? 'rounded-b-md'
63+
: rounded === 'none'
64+
? ''
65+
: 'rounded-md'
66+
5667
return (
57-
<div className="flex h-10 w-full items-center justify-between rounded-md border border-glassBorder bg-glass px-4 backdrop-blur-md">
68+
<div className={`flex h-10 w-full items-center justify-between ${roundedClass} border border-glassBorder bg-glass px-4 backdrop-blur-md`}>
5869
<div className="flex items-center gap-1.5">
5970
<div
6071
className={`h-2.5 w-2.5 rounded-full ${color === 'white' ? 'bg-white' : 'border bg-black'}`}

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -627,7 +627,7 @@ const Analysis: React.FC<Props> = ({
627627
exit="exit"
628628
style={{ willChange: 'transform, opacity' }}
629629
>
630-
<div className="flex h-full w-[90%] flex-row gap-2">
630+
<div className="flex h-full w-[90%] flex-row gap-3">
631631
<motion.div
632632
id="navigation"
633633
className="desktop-left-column-container flex flex-col overflow-hidden"
@@ -646,7 +646,7 @@ const Analysis: React.FC<Props> = ({
646646
</GameInfo>
647647
{/* Game list */}
648648
<div className="flex flex-col overflow-hidden">
649-
<div className="h-4" />
649+
<div className="h-3" />
650650
<div className="max-h-[32vh] min-h-[32vh]">
651651
<AnalysisGameList
652652
currentId={currentId}
@@ -667,7 +667,7 @@ const Analysis: React.FC<Props> = ({
667667
</div>
668668
{/* Moves + controller */}
669669
<div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
670-
<div className="h-4 border-b border-glassBorder" />
670+
<div className="h-3 border-b border-glassBorder" />
671671
<MovesContainer
672672
game={analyzedGame}
673673
termination={analyzedGame.termination}
@@ -704,12 +704,13 @@ const Analysis: React.FC<Props> = ({
704704
</div>
705705
</motion.div>
706706
<motion.div
707-
className="desktop-middle-column-container flex flex-col gap-2"
707+
className="desktop-middle-column-container flex flex-col gap-3"
708708
variants={itemVariants}
709709
style={{ willChange: 'transform, opacity' }}
710710
>
711-
<div className="flex w-full flex-col overflow-hidden rounded">
711+
<div className="flex w-full flex-col overflow-hidden">
712712
<PlayerInfo
713+
rounded="top"
713714
name={
714715
controller.orientation === 'white'
715716
? analyzedGame.blackPlayer.name
@@ -780,6 +781,7 @@ const Analysis: React.FC<Props> = ({
780781
) : null}
781782
</div>
782783
<PlayerInfo
784+
rounded="bottom"
783785
name={
784786
controller.orientation === 'white'
785787
? analyzedGame.whitePlayer.name

‎src/styles/tailwind.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,14 +146,17 @@ svg {
146146
}
147147

148148
.desktop-analysis-big-row-1-container {
149-
height: calc((85vh - 2.5rem - 1rem) / 2);
149+
/* 2.5rem header + 0.75rem gap between two rows */
150+
height: calc((85vh - 2.5rem - 0.75rem) / 2);
150151
}
151152

152153
.desktop-analysis-big-row-2-container {
153-
height: calc((85vh - 2.5rem - 1rem) / 2);
154+
/* 2.5rem header + 0.75rem gap between two rows */
155+
height: calc((85vh - 2.5rem - 0.75rem) / 2);
154156
}
155157

156158
.desktop-analysis-small-row-1-container {
159+
/* 2.5rem header + 1.5rem total gaps between three rows (two gaps @ 0.75rem) */
157160
height: calc((85vh - 2.5rem - 1.5rem) * 0.4);
158161
}
159162

0 commit comments

Comments
 (0)