Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix select tile flow for odd number of elements

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-09-08 14:26:38 +10:00
parent d0002431c5
commit 36351efb82
6 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/dice/DiceTile.js
View File

@ -7,15 +7,16 @@ function DiceTile({ dice, isSelected, onDiceSelect, onDone, large }) {
onClick={() => onDiceSelect(dice)}
sx={{
position: "relative",
width: large ? "49%" : "32%",
width: large ? "48%" : "32%",
height: "0",
paddingTop: large ? "49%" : "32%",
paddingTop: large ? "48%" : "32%",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
}}
my={1}
mx={`${large ? 1 : 2 / 3}%`}
bg="muted"
onDoubleClick={() => onDone(dice)}
>

1
src/components/dice/DiceTiles.js
View File

@ -16,7 +16,6 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
sx={{
flexWrap: "wrap",
borderRadius: "4px",
justifyContent: "space-between",
}}
>
{dice.map((dice) => (

5
src/components/map/MapTile.js
View File

@ -98,9 +98,9 @@ function MapTile({
key={map.id}
sx={{
position: "relative",
width: large ? "49%" : "32%",
width: large ? "48%" : "32%",
height: "0",
paddingTop: large ? "49%" : "32%",
paddingTop: large ? "48%" : "32%",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
@ -108,6 +108,7 @@ function MapTile({
overflow: "hidden",
}}
my={1}
mx={`${large ? 1 : 2 / 3}%`}
bg="muted"
onClick={(e) => {
e.stopPropagation();

6
src/components/map/MapTiles.js
View File

@ -32,7 +32,6 @@ function MapTiles({
sx={{
flexWrap: "wrap",
borderRadius: "4px",
justifyContent: "space-between",
}}
onClick={() => onMapSelect(null)}
>
@ -48,14 +47,15 @@ function MapTiles({
":active": {
color: "secondary",
},
width: isSmallScreen ? "49%" : "32%",
width: isSmallScreen ? "48%" : "32%",
height: "0",
paddingTop: isSmallScreen ? "49%" : "32%",
paddingTop: isSmallScreen ? "48%" : "32%",
borderRadius: "4px",
position: "relative",
cursor: "pointer",
}}
my={1}
mx={`${isSmallScreen ? 1 : 2 / 3}%`}
bg="muted"
aria-label="Add Map"
title="Add Map"

5
src/components/token/TokenTile.js
View File

@ -18,9 +18,9 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
onClick={() => onTokenSelect(token)}
sx={{
position: "relative",
width: large ? "49%" : "32%",
width: large ? "48%" : "32%",
height: "0",
paddingTop: large ? "49%" : "32%",
paddingTop: large ? "48%" : "32%",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
@ -28,6 +28,7 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
overflow: "hidden",
}}
my={1}
mx={`${large ? 1 : 2 / 3}%`}
bg="muted"
>
<Image

6
src/components/token/TokenTiles.js
View File

@ -29,7 +29,6 @@ function TokenTiles({
sx={{
flexWrap: "wrap",
borderRadius: "4px",
justifyContent: "space-between",
}}
>
<Box
@ -44,14 +43,15 @@ function TokenTiles({
":active": {
color: "secondary",
},
width: isSmallScreen ? "49%" : "32%",
width: isSmallScreen ? "48%" : "32%",
height: "0",
paddingTop: isSmallScreen ? "49%" : "32%",
paddingTop: isSmallScreen ? "48%" : "32%",
borderRadius: "4px",
position: "relative",
cursor: "pointer",
}}
my={1}
mx={`${isSmallScreen ? 1 : 2 / 3}%`}
bg="muted"
aria-label="Add Token"
title="Add Token"