jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix info panel visible issue in mobile

Browse Source
This commit is contained in:
Halit Aksoy 2022-09-03 21:06:52 +03:00
parent 4161d552ba
commit 3344439ef4
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/GamePage.tsx
View File

@ -263,7 +263,7 @@ const GamePage: FunctionComponent<{
function renderMobileBoardToolbar() { function renderMobileBoardToolbar() {
return <BoardToolbar style={{ justifyContent: "center" }} visible={showBoardView && isMobile || false}> return <BoardToolbar style={{ justifyContent: "center" }} visible={showBoardView && isMobile || false}>
{buildInfoPanel()} {buildInfoPanel({ visible: isMobile })}
</BoardToolbar>; </BoardToolbar>;
} }
@ -273,7 +273,7 @@ const GamePage: FunctionComponent<{
marginBottom: "0.5rem", marginLeft: "6%", maxWidth: isMobile ? "40vw" : "30vw", marginBottom: "0.5rem", marginLeft: "6%", maxWidth: isMobile ? "40vw" : "30vw",
width: isMobile ? "40vw" : "30vw" width: isMobile ? "40vw" : "30vw"
}} context={context} layoutMode="left" user={topLocatedUser} visible={showBoardView || false} /> }} context={context} layoutMode="left" user={topLocatedUser} visible={showBoardView || false} />
{buildInfoPanel()} {buildInfoPanel({ visible: !isMobile })}
<UserStatus style={{ <UserStatus style={{
marginBottom: "0.5rem", marginRight: "6%", maxWidth: isMobile ? "40vw" : "30vw", marginBottom: "0.5rem", marginRight: "6%", maxWidth: isMobile ? "40vw" : "30vw",
width: isMobile ? "40vw" : "30vw" width: isMobile ? "40vw" : "30vw"
@ -281,7 +281,7 @@ const GamePage: FunctionComponent<{
</BoardToolbar>; </BoardToolbar>;
} }
function buildInfoPanel() { function buildInfoPanel(params: { visible: boolean }) {
return ( return (
<InfoPanel <InfoPanel
style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }} style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}
@ -291,7 +291,7 @@ const GamePage: FunctionComponent<{
whitePlayer={topLocatedUser} whitePlayer={topLocatedUser}
blackPlayer={bottomLocatedUser} blackPlayer={bottomLocatedUser}
leftPlayer={leftPlayer} leftPlayer={leftPlayer}
visible={!isMobile} visible={params.visible}
isSpectator={isSpectator} /> isSpectator={isSpectator} />
); );
} }