haunter/chesskit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : analysis UI size rework

Browse Source
This commit is contained in:
GuillaumeSD
2024-04-06 17:34:18 +02:00
parent bcb3366895
commit 71fef9014c
17 changed files with 66 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/index.tsx
View File

@@ -57,8 +57,8 @@ export default function GameReport() {
borderWidth: 2,
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
}}
padding={3}
rowGap={3}
padding={2.5}
rowGap={2}
style={{
maxWidth: "1200px",
}}

14
src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/classificationRow.tsx
View File

@@ -86,6 +86,7 @@ export default function ClassificationRow({ classification }: Props) {
width={"3rem"}
style={{ cursor: whiteNb ? "pointer" : "default" }}
onClick={() => handleClick(Color.White)}
fontSize="0.9rem"
>
{whiteNb}
</Grid>
@@ -102,15 +103,17 @@ export default function ClassificationRow({ classification }: Props) {
<Image
src={`/icons/${classification}.png`}
alt="move-icon"
width={20}
height={20}
width={18}
height={18}
style={{
maxWidth: "3.6vw",
maxHeight: "3.6vw",
maxWidth: "3.5vw",
maxHeight: "3.5vw",
}}
/>
<Typography align="center">{capitalize(classification)}</Typography>
<Typography align="center" fontSize="0.9rem">
{capitalize(classification)}
</Typography>
</Grid>
<Grid
@@ -121,6 +124,7 @@ export default function ClassificationRow({ classification }: Props) {
width={"3rem"}
style={{ cursor: blackNb ? "pointer" : "default" }}
onClick={() => handleClick(Color.Black)}
fontSize="0.9rem"
>
{blackNb}
</Grid>

6
src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/index.tsx
View File

@@ -17,7 +17,7 @@ export default function MovesClassificationsRecap() {
item
justifyContent="center"
alignItems="center"
rowGap={2}
rowGap={1}
xs={6}
sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
maxHeight="100%"
@@ -30,13 +30,13 @@ export default function MovesClassificationsRecap() {
wrap="nowrap"
xs={12}
>
<Typography width="12rem" align="center" noWrap>
<Typography width="12rem" align="center" noWrap fontSize="0.9rem">
{whiteName}
</Typography>
<Typography width="7rem" />
<Typography width="12rem" align="center" noWrap>
<Typography width="12rem" align="center" noWrap fontSize="0.9rem">
{blackName}
</Typography>
</Grid>

2
src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/index.tsx
View File

@@ -43,7 +43,7 @@ export default function MovesPanel() {
item
justifyContent="center"
alignItems="start"
gap={1}
gap={0.8}
sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
maxHeight="100%"
xs={6}

18
src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/moveItem.tsx
View File

@@ -48,7 +48,7 @@ export default function MoveItem({ san, moveClassification, moveIdx }: Props) {
width="5rem"
wrap="nowrap"
onClick={handleClick}
paddingY={0.5}
paddingY={0.6}
sx={{
cursor: isCurrentMove ? undefined : "pointer",
backgroundColor: isCurrentMove ? "#4f4f4f" : undefined,
@@ -60,15 +60,21 @@ export default function MoveItem({ san, moveClassification, moveIdx }: Props) {
<Image
src={`/icons/${moveClassification}.png`}
alt="move-icon"
width={15}
height={15}
width={14}
height={14}
style={{
maxWidth: "3.6vw",
maxHeight: "3.6vw",
maxWidth: "3.5vw",
maxHeight: "3.5vw",
}}
/>
)}
<Typography color={getMoveColor(moveClassification)}>{san}</Typography>
<Typography
color={getMoveColor(moveClassification)}
fontSize="0.9rem"
lineHeight="0.9rem"
>
{san}
</Typography>
</Grid>
);
}

6
src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/movesLine.tsx
View File

@@ -13,11 +13,13 @@ export default function MovesLine({ moves, moveNb }: Props) {
container
item
justifyContent="space-evenly"
alignItems="start"
alignItems="center"
xs={12}
wrap="nowrap"
>
<Typography width="2rem">{moveNb}.</Typography>
<Typography width="2rem" fontSize="0.9rem">
{moveNb}.
</Typography>
<MoveItem {...moves[0]} moveIdx={(moveNb - 1) * 2 + 1} />

2
src/sections/analysis/reviewPanelBody/index.tsx
View File

@@ -41,7 +41,7 @@ export default function ReviewPanelBody() {
xs={12}
justifyContent="center"
alignItems="center"
rowGap={1.5}
rowGap={1.2}
>
<Grid
item

2
src/sections/analysis/reviewPanelBody/lineEvaluation.tsx
View File

@@ -28,6 +28,7 @@ export default function LineEvaluation({ line }: Props) {
overflow="visible"
width="3em"
textAlign="center"
fontSize="0.9rem"
>
{showSkeleton ? (
<Skeleton
@@ -45,6 +46,7 @@ export default function LineEvaluation({ line }: Props) {
<Typography
noWrap
maxWidth={{ xs: "15em", sm: "25em", md: "30em", lg: "25em" }}
fontSize="0.9rem"
>
{showSkeleton ? (
<Skeleton variant="rounded" animation="wave" width="15em" />

12
src/sections/analysis/reviewPanelBody/moveInfo.tsx
View File

@@ -37,8 +37,16 @@ export default function MoveInfo() {
return (
<Grid item container columnGap={5} xs={12} justifyContent="center">
{moveLabel && <Typography align="center">{moveLabel}</Typography>}
{bestMoveLabel && <Typography align="center">{bestMoveLabel}</Typography>}
{moveLabel && (
<Typography align="center" fontSize="0.9rem">
{moveLabel}
</Typography>
)}
{bestMoveLabel && (
<Typography align="center" fontSize="0.9rem">
{bestMoveLabel}
</Typography>
)}
</Grid>
);
}

4
src/sections/analysis/reviewPanelBody/opening.tsx
View File

@@ -9,7 +9,9 @@ export default function Opening() {
return (
<Grid item xs={12}>
<Typography align="center">{opening}</Typography>
<Typography align="center" fontSize="0.9rem">
{opening}
</Typography>
</Grid>
);
}

6
src/sections/analysis/reviewPanelHeader/gamePanel.tsx
View File

@@ -22,19 +22,19 @@ export default function GamePanel() {
columnGap={3}
>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
<Typography noWrap fontSize="0.9rem">
Site : {gameFromUrl?.site || game.header().Site || "?"}
</Typography>
</Grid>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
<Typography noWrap fontSize="0.9rem">
Date : {gameFromUrl?.date || game.header().Date || "?"}
</Typography>
</Grid>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
<Typography noWrap fontSize="0.9rem">
Result :{" "}
{gameFromUrl?.termination || game.header().Termination || "?"}
</Typography>

4
src/sections/analysis/reviewPanelHeader/index.tsx
View File

@@ -17,7 +17,7 @@ export default function ReviewPanelHeader() {
justifyContent="center"
alignItems="center"
xs={12}
rowGap={3}
rowGap={2}
>
<Grid
item
@@ -40,7 +40,7 @@ export default function ReviewPanelHeader() {
xs={12}
justifyContent="center"
alignItems="center"
rowGap={3}
rowGap={2}
columnGap={12}
>
<GamePanel />

5
src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx
View File

@@ -8,7 +8,10 @@ export default function FlipBoardButton() {
return (
<Tooltip title="Flip board">
<IconButton onClick={() => setBoardOrientation((prev) => !prev)}>
<IconButton
onClick={() => setBoardOrientation((prev) => !prev)}
sx={{ paddingX: 1.2, paddingY: 0.5 }}
>
<Icon icon="eva:flip-fill" />
</IconButton>
</Tooltip>

1
src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx
View File

@@ -39,6 +39,7 @@ export default function GoToLastPositionButton() {
setBoardPgn(game.pgn());
}}
disabled={isButtonDisabled}
sx={{ paddingX: 1.2, paddingY: 0.5 }}
>
<Icon icon="ri:skip-forward-line" />
</IconButton>

2
src/sections/analysis/reviewPanelToolbar/index.tsx
View File

@@ -43,6 +43,7 @@ export default function ReviewPanelToolBar() {
<IconButton
onClick={() => resetBoard({ fen: getStartingFen({ game: board }) })}
disabled={boardHistory.length === 0}
sx={{ paddingX: 1.2, paddingY: 0.5 }}
>
<Icon icon="ri:skip-back-line" />
</IconButton>
@@ -54,6 +55,7 @@ export default function ReviewPanelToolBar() {
<IconButton
onClick={() => undoBoardMove()}
disabled={boardHistory.length === 0}
sx={{ paddingX: 1.2, paddingY: 0.5 }}
>
<Icon icon="ri:arrow-left-s-line" height={30} />
</IconButton>

1
src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx
View File

@@ -52,6 +52,7 @@ export default function NextMoveButton() {
<IconButton
onClick={() => addNextGameMoveToBoard()}
disabled={!isButtonEnabled}
sx={{ paddingX: 1.2, paddingY: 0.5 }}
>
<Icon icon="ri:arrow-right-s-line" height={30} />
</IconButton>

8
src/sections/analysis/reviewPanelToolbar/saveButton.tsx
View File

@@ -41,7 +41,7 @@ export default function SaveButton() {
{gameFromUrl ? (
<Tooltip title="Game saved in database">
<Grid>
<IconButton disabled={true}>
<IconButton disabled={true} sx={{ paddingX: 1.2, paddingY: 0.5 }}>
<Icon icon="ri:folder-check-line" />
</IconButton>
</Grid>
@@ -49,7 +49,11 @@ export default function SaveButton() {
) : (
<Tooltip title="Save game">
<Grid>
<IconButton onClick={handleSave} disabled={!enableSave}>
<IconButton
onClick={handleSave}
disabled={!enableSave}
sx={{ paddingX: 1.2, paddingY: 0.5 }}
>
<Icon icon="ri:save-3-line" />
</IconButton>
</Grid>