Moved map tiles to simple scroll
This commit is contained in:
parent
4eec22d922
commit
6e8cb833aa
@ -1,5 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Flex } from "theme-ui";
|
import { Flex } from "theme-ui";
|
||||||
|
import SimpleBar from "simplebar-react";
|
||||||
|
|
||||||
import AddIcon from "../../icons/AddIcon";
|
import AddIcon from "../../icons/AddIcon";
|
||||||
|
|
||||||
@ -15,57 +16,55 @@ function MapTiles({
|
|||||||
onSubmit,
|
onSubmit,
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Flex
|
<SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
|
||||||
my={2}
|
|
||||||
bg="muted"
|
|
||||||
sx={{
|
|
||||||
flexWrap: "wrap",
|
|
||||||
width: "500px",
|
|
||||||
maxHeight: "300px",
|
|
||||||
borderRadius: "4px",
|
|
||||||
// TODO: move to simple scroll
|
|
||||||
overflowY: "scroll",
|
|
||||||
flexGrow: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex
|
<Flex
|
||||||
onClick={onMapAdd}
|
py={2}
|
||||||
sx={{
|
|
||||||
":hover": {
|
|
||||||
color: "primary",
|
|
||||||
},
|
|
||||||
":focus": {
|
|
||||||
outline: "none",
|
|
||||||
},
|
|
||||||
":active": {
|
|
||||||
color: "secondary",
|
|
||||||
},
|
|
||||||
width: "150px",
|
|
||||||
height: "150px",
|
|
||||||
borderRadius: "4px",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
cursor: "pointer",
|
|
||||||
}}
|
|
||||||
m={2}
|
|
||||||
bg="muted"
|
bg="muted"
|
||||||
aria-label="Add Map"
|
sx={{
|
||||||
title="Add Map"
|
flexWrap: "wrap",
|
||||||
|
width: "500px",
|
||||||
|
borderRadius: "4px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<AddIcon large />
|
<Flex
|
||||||
|
onClick={onMapAdd}
|
||||||
|
sx={{
|
||||||
|
":hover": {
|
||||||
|
color: "primary",
|
||||||
|
},
|
||||||
|
":focus": {
|
||||||
|
outline: "none",
|
||||||
|
},
|
||||||
|
":active": {
|
||||||
|
color: "secondary",
|
||||||
|
},
|
||||||
|
width: "150px",
|
||||||
|
height: "150px",
|
||||||
|
borderRadius: "4px",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
m={2}
|
||||||
|
bg="muted"
|
||||||
|
aria-label="Add Map"
|
||||||
|
title="Add Map"
|
||||||
|
>
|
||||||
|
<AddIcon large />
|
||||||
|
</Flex>
|
||||||
|
{maps.map((map) => (
|
||||||
|
<MapTile
|
||||||
|
key={map.id}
|
||||||
|
map={map}
|
||||||
|
isSelected={map.id === selectedMap}
|
||||||
|
onMapSelect={onMapSelect}
|
||||||
|
onMapRemove={onMapRemove}
|
||||||
|
onMapReset={onMapReset}
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</Flex>
|
</Flex>
|
||||||
{maps.map((map) => (
|
</SimpleBar>
|
||||||
<MapTile
|
|
||||||
key={map.id}
|
|
||||||
map={map}
|
|
||||||
isSelected={map.id === selectedMap}
|
|
||||||
onMapSelect={onMapSelect}
|
|
||||||
onMapRemove={onMapRemove}
|
|
||||||
onMapReset={onMapReset}
|
|
||||||
onSubmit={onSubmit}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user