diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index ebb0e971..66daf815 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -349,18 +349,35 @@ header { */ .menu-cryps { - display: flex; - flex-flow: row wrap; + display: grid; + grid-auto-columns: 1fr 1fr 1fr; + grid-auto-rows: min-content 1fr; + + grid-template-areas: + "top" + "list"; +/* flex-flow: row wrap; flex: 1; justify-content: space-between; +*/ + + +} + +.menu-cryps .list { + grid-area: list; + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } .menu-cryp-ctr { - flex: 0 0 30%; - flex-flow: column; + /*flex: 0 0 30%;*/ - text-align: center; display: flex; + flex-flow: column; + text-align: center; justify-content: center; } diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx index ab26473f..81323e8f 100644 --- a/client/src/components/team.jsx +++ b/client/src/components/team.jsx @@ -36,8 +36,16 @@ const addState = connect( dispatch(actions.setTeam(crypIds)); } + function navToList() { + dispatch(actions.setGame(null)); + dispatch(actions.setInstance(null)); + return dispatch(actions.setNav('list')); + } + + return { setTeam, + navToList, }; } ); @@ -50,6 +58,7 @@ function Team(args) { setTeam, sendCrypSpawn, + navToList, } = args; if (!cryps) return
; @@ -97,10 +106,25 @@ function Team(args) { const spawnButtons = range(spawnButtonsNum) .map(i => sendCrypSpawn(name)} />); + + const header = ( +
+ +
+ ); + return (
- {crypPanels} - {spawnButtons} + {header} +
+ {crypPanels} + {spawnButtons} +
); }