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

Fix token preview rendering for token groups

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-06-12 21:25:03 +10:00
parent 359be5373b
commit 1eed2eb15d
4 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/map/MapTileGroup.js
View File

@ -19,15 +19,20 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
<Grid
columns={`repeat(${layout.groupGridColumns}, 1fr)`}
p={2}
sx={{ gridGap: 2 }}
sx={{
gridGap: 2,
gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
}}
>
{maps.slice(0, 9).map((map) => (
<MapImage
sx={{ borderRadius: "8px" }}
map={map}
key={`${map.id}-group-tile`}
/>
))}
{maps
.slice(0, layout.groupGridColumns * layout.groupGridColumns)
.map((map) => (
<MapImage
sx={{ borderRadius: "8px" }}
map={map}
key={`${map.id}-group-tile`}
/>
))}
</Grid>
</Tile>
);

9
src/components/token/TokenBarTokenGroup.js
View File

@ -70,11 +70,16 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
} else {
return (
<Grid
columns="2fr 2fr"
columns="1fr 1fr"
alt={group.name}
title={group.name}
bg="muted"
sx={{ borderRadius: "8px", gridGap: "4px", minHeight: "48px" }}
sx={{
borderRadius: "8px",
gridGap: "4px",
height: "48px",
gridTemplateRows: "1fr 1fr",
}}
p="2px"
{...listeners}
{...attributes}

2
src/components/token/TokenImage.js
View File

@ -23,7 +23,7 @@ const TokenImage = React.forwardRef(({ token, ...props }, ref) => {
<Box
title={props.alt}
aria-label={props.alt}
sx={{ width: "100%", height: "100%" }}
sx={{ width: "100%", height: "100%", minHeight: 0 }}
>
<TokenOutlineSVG
outline={token.outline}

22
src/components/token/TokenTileGroup.js
View File

@ -25,15 +25,21 @@ function TokenTileGroup({
<Grid
columns={`repeat(${layout.groupGridColumns}, 1fr)`}
p={2}
sx={{ gridGap: 2 }}
sx={{
gridGap: 2,
height: "100%",
gridTemplateRows: `repeat(${layout.groupGridColumns}, 1fr)`,
}}
>
{tokens.slice(0, 9).map((token) => (
<TokenImage
sx={{ borderRadius: "8px" }}
token={token}
key={`${token.id}-group-tile`}
/>
))}
{tokens
.slice(0, layout.groupGridColumns * layout.groupGridColumns)
.map((token) => (
<TokenImage
sx={{ borderRadius: "8px" }}
token={token}
key={`${token.id}-group-tile`}
/>
))}
</Grid>
</Tile>
);