Fix select tile flow for odd number of elements
This commit is contained in:
parent
d0002431c5
commit
36351efb82
@ -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)}
|
||||
>
|
||||
|
@ -16,7 +16,6 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
|
||||
sx={{
|
||||
flexWrap: "wrap",
|
||||
borderRadius: "4px",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{dice.map((dice) => (
|
||||
|
@ -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();
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user