Added scaling to map and token select for small screens

src/components/Modal.js

@@ -7,6 +7,7 @@ function StyledModal({
   onRequestClose,
   children,
   allowClose,
+  style,
   ...props
 }) {
   const { theme } = useThemeUI();
@@ -26,6 +27,7 @@ function StyledModal({
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
           maxHeight: "100%",
+          ...style,
         },
       }}
       {...props}
@@ -44,6 +46,7 @@ function StyledModal({
 
 StyledModal.defaultProps = {
   allowClose: true,
+  style: {},
 };
 
 export default StyledModal;

src/components/map/MapTile.js

@@ -16,6 +16,7 @@ function MapTile({
   onMapRemove,
   onMapReset,
   onDone,
+  large,
 }) {
   const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
   const isDefault = map.type === "default";
@@ -46,7 +47,7 @@ function MapTile({
       }}
       bg="overlay"
       sx={{ borderRadius: "50%" }}
-      m={1}
+      m={2}
     >
       <ExpandMoreDotIcon />
     </IconButton>
@@ -65,7 +66,7 @@ function MapTile({
         }}
         bg="overlay"
         sx={{ borderRadius: "50%" }}
-        m={1}
+        m={2}
       >
         <RemoveMapIcon />
       </IconButton>
@@ -85,7 +86,7 @@ function MapTile({
         }}
         bg="overlay"
         sx={{ borderRadius: "50%" }}
-        m={1}
+        m={2}
       >
         <ResetMapIcon />
       </IconButton>
@@ -96,18 +97,17 @@ function MapTile({
     <Flex
       key={map.id}
       sx={{
-        borderColor: "primary",
-        borderStyle: isSelected ? "solid" : "none",
-        borderWidth: "4px",
         position: "relative",
-        width: "150px",
+        width: large ? "49%" : "32%",
-        height: "150px",
+        height: "0",
+        paddingTop: large ? "49%" : "32%",
         borderRadius: "4px",
         justifyContent: "center",
         alignItems: "center",
         cursor: "pointer",
+        overflow: "hidden",
       }}
-      m={2}
+      my={1}
       bg="muted"
       onClick={(e) => {
         e.stopPropagation();
@@ -123,7 +123,14 @@ function MapTile({
       }}
     >
       <UIImage
-        sx={{ width: "100%", height: "100%", objectFit: "contain" }}
+        sx={{
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
         src={mapSource}
       />
       <Flex
@@ -149,6 +156,20 @@ function MapTile({
           {map.name}
         </Text>
       </Flex>
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          borderColor: "primary",
+          borderStyle: isSelected ? "solid" : "none",
+          borderWidth: "4px",
+          pointerEvents: "none",
+          borderRadius: "4px",
+        }}
+      />
       {/* Show expand button only if both reset and remove is available */}
       {isSelected && (
         <Box sx={{ position: "absolute", top: 0, right: 0 }}>

src/components/map/MapTiles.js

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 import { Flex, Box, Text } from "theme-ui";
 import SimpleBar from "simplebar-react";
+import { useMedia } from "react-media";
 
 import AddIcon from "../../icons/AddIcon";
 
@@ -20,16 +21,18 @@ function MapTiles({
   onDone,
 }) {
   const { databaseStatus } = useContext(DatabaseContext);
+  const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+
   return (
     <Box sx={{ position: "relative" }}>
-      <SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
+      <SimpleBar style={{ maxHeight: "300px" }}>
         <Flex
-          py={2}
+          p={2}
           bg="muted"
           sx={{
             flexWrap: "wrap",
-            width: "500px",
             borderRadius: "4px",
+            justifyContent: "space-between",
           }}
           onClick={() => onMapSelect(null)}
         >
@@ -45,19 +48,31 @@ function MapTiles({
               ":active": {
                 color: "secondary",
               },
-              width: "150px",
+              width: isSmallScreen ? "49%" : "32%",
-              height: "150px",
+              height: "0",
+              paddingTop: isSmallScreen ? "49%" : "32%",
               borderRadius: "4px",
-              justifyContent: "center",
+              position: "relative",
-              alignItems: "center",
               cursor: "pointer",
             }}
-            m={2}
+            my={1}
             bg="muted"
             aria-label="Add Map"
             title="Add Map"
           >
-            <AddIcon large />
+            <Flex
+              sx={{
+                width: "100%",
+                height: "100%",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <AddIcon large />
+            </Flex>
           </Flex>
           {maps.map((map) => {
             const isSelected = selectedMap && map.id === selectedMap.id;
@@ -73,6 +88,7 @@ function MapTiles({
                 onMapRemove={onMapRemove}
                 onMapReset={onMapReset}
                 onDone={onDone}
+                large={isSmallScreen}
               />
             );
           })}

src/components/token/TokenTile.js

@@ -9,7 +9,7 @@ import {
   unknownSource,
 } from "../../tokens";
 
-function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
+function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
   const tokenSource = useDataSource(token, defaultTokenSources, unknownSource);
   const isDefault = token.type === "default";
 
@@ -17,22 +17,28 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
     <Flex
       onClick={() => onTokenSelect(token)}
       sx={{
-        borderColor: "primary",
-        borderStyle: isSelected ? "solid" : "none",
-        borderWidth: "4px",
         position: "relative",
-        width: "150px",
+        width: large ? "49%" : "32%",
-        height: "150px",
+        height: "0",
+        paddingTop: large ? "49%" : "32%",
         borderRadius: "4px",
         justifyContent: "center",
         alignItems: "center",
         cursor: "pointer",
+        overflow: "hidden",
       }}
-      m={2}
+      my={1}
       bg="muted"
     >
       <Image
-        sx={{ width: "100%", height: "100%", objectFit: "contain" }}
+        sx={{
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
         src={tokenSource}
       />
       <Flex
@@ -58,6 +64,20 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
           {token.name}
         </Text>
       </Flex>
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          borderColor: "primary",
+          borderStyle: isSelected ? "solid" : "none",
+          borderWidth: "4px",
+          pointerEvents: "none",
+          borderRadius: "4px",
+        }}
+      />
       {isSelected && !isDefault && (
         <Box sx={{ position: "absolute", top: 0, right: 0 }}>
           <IconButton
@@ -68,7 +88,7 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
             }}
             bg="overlay"
             sx={{ borderRadius: "50%" }}
-            m={1}
+            m={2}
           >
             <RemoveTokenIcon />
           </IconButton>

src/components/token/TokenTiles.js

@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useContext } from "react";
-import { Flex } from "theme-ui";
+import { Flex, Box, Text } from "theme-ui";
 import SimpleBar from "simplebar-react";
+import { useMedia } from "react-media";
 
 import AddIcon from "../../icons/AddIcon";
 
 import TokenTile from "./TokenTile";
+import Link from "../Link";
+
+import DatabaseContext from "../../contexts/DatabaseContext";
 
 function TokenTiles({
   tokens,
@@ -13,54 +17,90 @@ function TokenTiles({
   selectedToken,
   onTokenRemove,
 }) {
+  const { databaseStatus } = useContext(DatabaseContext);
+  const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+
   return (
-    <SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
+    <Box sx={{ position: "relative" }}>
-      <Flex
+      <SimpleBar style={{ maxHeight: "300px" }}>
-        py={2}
-        bg="muted"
-        sx={{
-          flexWrap: "wrap",
-          width: "500px",
-          borderRadius: "4px",
-        }}
-      >
         <Flex
-          onClick={onTokenAdd}
+          p={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"
-          aria-label="Add Token"
+          sx={{
-          title="Add Token"
+            flexWrap: "wrap",
+            borderRadius: "4px",
+            justifyContent: "space-between",
+          }}
         >
-          <AddIcon large />
+          <Box
+            onClick={onTokenAdd}
+            sx={{
+              ":hover": {
+                color: "primary",
+              },
+              ":focus": {
+                outline: "none",
+              },
+              ":active": {
+                color: "secondary",
+              },
+              width: isSmallScreen ? "49%" : "32%",
+              height: "0",
+              paddingTop: isSmallScreen ? "49%" : "32%",
+              borderRadius: "4px",
+              position: "relative",
+              cursor: "pointer",
+            }}
+            my={1}
+            bg="muted"
+            aria-label="Add Token"
+            title="Add Token"
+          >
+            <Flex
+              sx={{
+                width: "100%",
+                height: "100%",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <AddIcon large />
+            </Flex>
+          </Box>
+          {tokens.map((token) => (
+            <TokenTile
+              key={token.id}
+              token={token}
+              isSelected={selectedToken && token.id === selectedToken.id}
+              onTokenSelect={onTokenSelect}
+              onTokenRemove={onTokenRemove}
+              large={isSmallScreen}
+            />
+          ))}
         </Flex>
-        {tokens.map((token) => (
+      </SimpleBar>
-          <TokenTile
+      {databaseStatus === "disabled" && (
-            key={token.id}
+        <Box
-            token={token}
+          sx={{
-            isSelected={selectedToken && token.id === selectedToken.id}
+            position: "absolute",
-            onTokenSelect={onTokenSelect}
+            top: 0,
-            onTokenRemove={onTokenRemove}
+            left: 0,
-          />
+            right: 0,
-        ))}
+            textAlign: "center",
-      </Flex>
+          }}
-    </SimpleBar>
+          bg="highlight"
+          p={1}
+        >
+          <Text as="p" variant="body2">
+            Token saving is unavailable. See <Link to="/faq#saving">FAQ</Link>{" "}
+            for more information.
+          </Text>
+        </Box>
+      )}
+    </Box>
   );
 }
 

src/modals/SelectMapModal.js

@@ -272,7 +272,11 @@ function SelectMapModal({
   };
 
   return (
-    <Modal isOpen={isOpen} onRequestClose={handleClose}>
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={handleClose}
+      style={{ maxWidth: "542px", width: "100%" }}
+    >
       <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
         <input
           onChange={(event) => handleImagesUpload(event.target.files)}

src/modals/SelectTokensModal.js

@@ -131,7 +131,11 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
   const selectedTokenWithChanges = { ...selectedToken, ...tokenSettingChanges };
 
   return (
-    <Modal isOpen={isOpen} onRequestClose={handleRequestClose}>
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={handleRequestClose}
+      style={{ maxWidth: "542px", width: "100%" }}
+    >
       <ImageDrop onDrop={handleImagesUpload} dropText="Drop token to upload">
         <input
           onChange={(event) => handleImagesUpload(event.target.files)}