cek/airboardgame
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix top menu on mobile

Browse source
This commit is contained in:
Jeremie Pardou-Piquemal 2022-03-16 21:32:01 +01:00 committed by Jérémie Pardou-Piquemal
parent af0e930e57
commit 4bfa239246
1 changed files with 36 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/views/BoardView/NavBar.jsx
View file

@ -11,7 +11,6 @@ import Touch from "../../ui/Touch";
import WebConferenceButton from "../../webconf/WebConferenceButton"; import WebConferenceButton from "../../webconf/WebConferenceButton";
import { getBestTranslationFromConfig } from "../../utils/api"; import { getBestTranslationFromConfig } from "../../utils/api";
import useLocalStorage from "../../hooks/useLocalStorage";
import InfoModal from "./InfoModal"; import InfoModal from "./InfoModal";
import LoadGameModal from "./LoadGameModal"; import LoadGameModal from "./LoadGameModal";
@ -100,7 +99,8 @@ const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
transform: none; transform: none;
} }
& .nav-right { /* TODO quick but dirty way to do that, need refactoring */
& .hide-mobile {
display: none; display: none;
} }
@ -158,7 +158,7 @@ const NavBar = ({ editMode, title }) => {
if (match.path === "/session/:sessionId" && history.length > 2) { if (match.path === "/session/:sessionId" && history.length > 2) {
// Go to previous if exists // Go to previous if exists
// Previous can be home or studio // Previous can be home or studio
// Yes history should be greater than 2 for any reason... // Yes history should be greater than 2 for some reason...
history.goBack(); history.goBack();
return; return;
} }
@ -204,7 +204,7 @@ const NavBar = ({ editMode, title }) => {
style={{ display: "inline" }} style={{ display: "inline" }}
/> />
{isMaster && ( {isMaster && (
<> <div className="hide-mobile">
<Touch <Touch
onClick={() => setShowChangeGameModal((prev) => !prev)} onClick={() => setShowChangeGameModal((prev) => !prev)}
alt={t("Change game")} alt={t("Change game")}
@ -215,7 +215,7 @@ const NavBar = ({ editMode, title }) => {
show={showChangeGameModal} show={showChangeGameModal}
setShow={setShowChangeGameModal} setShow={setShowChangeGameModal}
/> />
</> </div>
)} )}
</> </>
)} )}
@ -239,32 +239,42 @@ const NavBar = ({ editMode, title }) => {
<div className="nav-right"> <div className="nav-right">
{!editMode && ( {!editMode && (
<> <>
<UserList /> <div className="hide-mobile">
<Touch <UserList />
onClick={() => { </div>
setShowLink(true); <div className="hide-mobile">
}} <Touch
icon="add-user" onClick={() => {
title={t("Invite more player")} setShowLink(true);
/> }}
<WebConferenceButton room={room} /> icon="add-user"
title={t("Invite more player")}
/>
</div>
<div className="hide-mobile">
<WebConferenceButton room={room} />
</div>
</> </>
)} )}
<div className="spacer" /> <div className="spacer" />
{(isMaster || editMode) && ( {(isMaster || editMode) && (
<Touch <div className="hide-mobile">
onClick={() => setShowLoadGameModal((prev) => !prev)} <Touch
alt={editMode ? t("Load game") : t("Load session")} onClick={() => setShowLoadGameModal((prev) => !prev)}
title={editMode ? t("Load game") : t("Load session")} alt={editMode ? t("Load game") : t("Load session")}
icon={"upload-to-cloud"} title={editMode ? t("Load game") : t("Load session")}
/> icon={"upload-to-cloud"}
/>
</div>
)} )}
<Touch <div className="hide-mobile">
onClick={() => setShowSaveGameModal((prev) => !prev)} <Touch
alt={t("Save")} onClick={() => setShowSaveGameModal((prev) => !prev)}
title={editMode ? t("Save game") : t("Save session")} alt={t("Save")}
icon={editMode ? "save" : "download"} title={editMode ? t("Save game") : t("Save session")}
/> icon={editMode ? "save" : "download"}
/>
</div>
<div className="spacer" /> <div className="spacer" />
<Touch <Touch
onClick={() => setShowInfoModal((prev) => !prev)} onClick={() => setShowInfoModal((prev) => !prev)}