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)} onClick={() => onDiceSelect(dice)}
sx={{ sx={{
position: "relative", position: "relative",
width: large ? "49%" : "32%", width: large ? "48%" : "32%",
height: "0", height: "0",
paddingTop: large ? "49%" : "32%", paddingTop: large ? "48%" : "32%",
borderRadius: "4px", borderRadius: "4px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
cursor: "pointer", cursor: "pointer",
}} }}
my={1} my={1}
mx={`${large ? 1 : 2 / 3}%`}
bg="muted" bg="muted"
onDoubleClick={() => onDone(dice)} onDoubleClick={() => onDone(dice)}
> >

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

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

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

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

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

@ -32,7 +32,6 @@ function MapTiles({
sx={{ sx={{
flexWrap: "wrap", flexWrap: "wrap",
borderRadius: "4px", borderRadius: "4px",
justifyContent: "space-between",
}} }}
onClick={() => onMapSelect(null)} onClick={() => onMapSelect(null)}
> >
@ -48,14 +47,15 @@ function MapTiles({
":active": { ":active": {
color: "secondary", color: "secondary",
}, },
width: isSmallScreen ? "49%" : "32%", width: isSmallScreen ? "48%" : "32%",
height: "0", height: "0",
paddingTop: isSmallScreen ? "49%" : "32%", paddingTop: isSmallScreen ? "48%" : "32%",
borderRadius: "4px", borderRadius: "4px",
position: "relative", position: "relative",
cursor: "pointer", cursor: "pointer",
}} }}
my={1} my={1}
mx={`${isSmallScreen ? 1 : 2 / 3}%`}
bg="muted" bg="muted"
aria-label="Add Map" aria-label="Add Map"
title="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)} onClick={() => onTokenSelect(token)}
sx={{ sx={{
position: "relative", position: "relative",
width: large ? "49%" : "32%", width: large ? "48%" : "32%",
height: "0", height: "0",
paddingTop: large ? "49%" : "32%", paddingTop: large ? "48%" : "32%",
borderRadius: "4px", borderRadius: "4px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
@ -28,6 +28,7 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
overflow: "hidden", overflow: "hidden",
}} }}
my={1} my={1}
mx={`${large ? 1 : 2 / 3}%`}
bg="muted" bg="muted"
> >
<Image <Image

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

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