fix: small screen cleanup

This fixes up the grid, adds the meta viewport needed to support mobile, and adds responsive font sizes. fixes #70
etclabscore · Sep 17, 2019 · 9c7e47b · 9c7e47b
1 parent 88fe837
commit 9c7e47b
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 244 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@etclabscore/ethereum-json-rpc": "^1.1.1",
     "@etclabscore/ethereum-json-rpc-specification": "https://github.com/etclabscore/ethereum-json-rpc-specification.git",
     "@etclabscore/jade-service-runner-client": "^1.2.3",
-    "@material-ui/core": "^4.1.3",
+    "@material-ui/core": "^4.2.1",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/styles": "^4.1.2",
     "@qiwi/semantic-release-gh-pages-plugin": "^1.10.6",

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
   <title>Jade Explorer</title>
 </head>
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
-import { AppBar, CssBaseline, Theme, Toolbar, Typography, IconButton, Grid, InputBase, Tooltip } from "@material-ui/core"; //tslint:disable-line
-import { makeStyles, ThemeProvider } from "@material-ui/styles";
+import { AppBar, CssBaseline, Toolbar, Typography, IconButton, Grid, InputBase, Tooltip, Hidden } from "@material-ui/core";
+import { ThemeProvider } from "@material-ui/styles";
 import Link from "@material-ui/core/Link";
 import { Link as RouterLink } from "react-router-dom";
 import React, { Dispatch, ChangeEvent, KeyboardEvent, useState } from "react";
@@ -24,13 +24,8 @@ import useMultiGethStore from "./stores/useMultiGethStore";
 import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
 import ETHJSONSpec from "@etclabscore/ethereum-json-rpc-specification/openrpc.json";
 
-import createHistory from "history/createBrowserHistory";
-const history = createHistory();
-
-const useStyles = makeStyles((theme: Theme) => ({
-  title: {
-  },
-}));
+import { createBrowserHistory } from "history";
+const history = createBrowserHistory();
 
 function App(props: any) {
   const darkMode = useDarkMode();
@@ -40,7 +35,6 @@ function App(props: any) {
   const [, , setServiceRunnerUrl] = useServiceRunnerStore();
   const [erpc, setMultiGethUrlOverride]: [EthereumJSONRPC, Dispatch<string>] = useMultiGethStore();
 
-  const classes = useStyles(theme);
   const handleConfigurationChange = (type: string, url: string) => {
     if (type === "service-runner") {
       setServiceRunnerUrl(url);
@@ -114,11 +108,10 @@ function App(props: any) {
   return (
     <Router history={history}>
       <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <AppBar position="static" color="default" elevation={0}>
+        <AppBar position="sticky" color="default" elevation={0}>
           <Toolbar>
             <Grid justify="space-between" alignItems="center" alignContent="center" container>
-              <Grid item style={{ marginTop: "8px" }} direction="row">
+              <Grid item style={{ marginTop: "8px" }}>
                 <Link
                   component={({ className, children }: { children: any, className: string }) => (
                     <RouterLink className={className} to={"/"}>
@@ -144,35 +137,44 @@ function App(props: any) {
                       }
                     </Grid>
                     <Grid>
-                      <Typography className={classes.title} color="textSecondary" variant="h6">Jade Explorer</Typography>
+                      <Typography color="textSecondary" variant="h6">
+                        Explorer
+                      </Typography>
                     </Grid>
                   </Grid>
                 </Link>
               </Grid>
-              <Grid item xs={7}>
-                <InputBase
-                  placeholder="Enter an Address, Transaction Hash or Block Number"
-                  onKeyDown={
-                    (event: KeyboardEvent<HTMLInputElement>) => {
-                      if (event.keyCode === 13) {
-                        handleSearch(search.trim());
+              <Hidden only="xs">
+                <Grid item md={7} lg={8}>
+                  <InputBase
+                    placeholder="Enter an Address, Transaction Hash or Block Number"
+                    onKeyDown={
+                      (event: KeyboardEvent<HTMLInputElement>) => {
+                        if (event.keyCode === 13) {
+                          handleSearch(search.trim());
+                        }
                       }
                     }
-                  }
-                  onChange={
-                    (event: ChangeEvent<HTMLInputElement>) => {
-                      setSearch(event.target.value);
+                    onChange={
+                      (event: ChangeEvent<HTMLInputElement>) => {
+                        setSearch(event.target.value);
+                      }
                     }
-                  }
-                  fullWidth
-                  style={{ background: "rgba(0,0,0,0.1)", borderRadius: "4px", padding: "0px 10px", marginRight: "5px" }}
-                />
-              </Grid>
+                    fullWidth
+                    style={{
+                      background: "rgba(0,0,0,0.1)",
+                      borderRadius: "4px",
+                      padding: "0px 10px",
+                      marginRight: "5px",
+                    }}
+                  />
+                </Grid>
+              </Hidden>
               <Grid item>
-                <Tooltip title="JSOSN-RPC API Documentation">
+                <Tooltip title="JSON-RPC API Documentation">
                   <IconButton
                     onClick={() =>
-                      window.open("https://playground.open-rpc.org/?schemaUrl=https://raw.githubusercontent.com/etclabscore/ethereum-json-rpc-specification/master/openrpc.json")
+                      window.open("https://playground.open-rpc.org/?schemaUrl=https://raw.githubusercontent.com/etclabscore/ethereum-json-rpc-specification/master/openrpc.json") //tslint:disable-line
                     }>
                     <NotesIcon />
                   </IconButton>
@@ -196,6 +198,7 @@ function App(props: any) {
           </Toolbar>
         </AppBar>
         <div style={{ margin: "0px 25px 0px 25px" }}>
+          <CssBaseline />
           <Switch>
             <Route path={"/"} component={Dashboard} exact={true} />
             <Route path={"/block/:hash"} component={Block} />

diff --git a/src/components/BlockList/BlockList.tsx b/src/components/BlockList/BlockList.tsx
@@ -16,41 +16,44 @@ function BlockList({ blocks }: any) {
     return b.number - a.number;
   });
   return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell><Typography>Block Number</Typography></TableCell>
-          <TableCell><Typography>Hash</Typography></TableCell>
-          <TableCell><Typography>Timestamp</Typography></TableCell>
-          <TableCell><Typography>Transactions</Typography></TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {sortedBlocks.map((b: any) => {
-          return (
-            <TableRow key={b.number}>
-              <TableCell component="th" scope="row"><Typography>{parseInt(b.number, 16)}</Typography></TableCell>
-              <TableCell style={rightPaddingFix}>
-                <Link
-                  component={({ className, children }: { children: any, className: string }) => (
-                    <RouterLink className={className} to={`/block/${b.hash}`} >
-                      {children}
-                    </RouterLink>
-                  )}>
-                  {b.hash}
-                </Link>
-              </TableCell>
-              <TableCell style={rightPaddingFix}>
-                <Typography>{hexToDate(b.timestamp)}</Typography>
-              </TableCell>
-              <TableCell style={rightPaddingFix}>
-                <Typography>{b.transactions.length}</Typography>
-              </TableCell>
-            </TableRow>
-          );
-        })}
-      </TableBody>
-    </Table>
+    <div style={{ width: "100%", overflowX: "auto" }}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell><Typography>Block Number</Typography></TableCell>
+            <TableCell><Typography>Hash</Typography></TableCell>
+            <TableCell><Typography>Timestamp</Typography></TableCell>
+            <TableCell><Typography>Transactions</Typography></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {sortedBlocks.map((b: any) => {
+            return (
+              <TableRow key={b.number}>
+                <TableCell component="th" scope="row"><Typography>{parseInt(b.number, 16)}</Typography></TableCell>
+                <TableCell style={rightPaddingFix}>
+                  <Link
+                    component={({ className, children }: { children: any, className: string }) => (
+                      <RouterLink className={className} to={`/block/${b.hash}`} >
+                        {children}
+                      </RouterLink>
+                    )}>
+                    {b.hash}
+                  </Link>
+                </TableCell>
+                <TableCell style={rightPaddingFix}>
+                  <Typography>{hexToDate(b.timestamp)}</Typography>
+                </TableCell>
+                <TableCell style={rightPaddingFix}>
+                  <Typography>{b.transactions.length}</Typography>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+
   );
 }
 

diff --git a/src/components/ChartCard.tsx b/src/components/ChartCard.tsx
@@ -8,7 +8,7 @@ interface IProps {
 
 const ChartCard: React.FC<IProps> = (props) => {
   return (
-    <Card style={{background: "transparent"}}>
+    <Card style={{background: "transparent"}} elevation={0}>
       <CardContent>
         <Typography variant="h6">{props.title}</Typography>
         {props.children}

diff --git a/src/containers/BlockCardList.tsx b/src/containers/BlockCardList.tsx
@@ -31,7 +31,7 @@ export default function BlockCardListContainer(props: IProps) {
           return hexToNumber(b.number) - hexToNumber(a.number);
         }).map((block: any) => {
           return (
-            <Grid item xs={12} sm={4}>
+            <Grid item xs={12} sm={4} key={block.hash}>
               <BlockCard block={block} />
             </Grid>
           );

diff --git a/src/containers/Dashboard.tsx b/src/containers/Dashboard.tsx
@@ -52,18 +52,7 @@ const blockMapTransactionCount = (block: any) => {
   };
 };
 
-const getStyles = () => {
-  return {
-    topItems: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-    },
-  };
-};
-
 export default (props: any) => {
-  const styles = getStyles();
   const [erpc]: [EthereumJSONRPC] = useMultiGethStore();
   const theme = useTheme<Theme>();
   const victoryTheme = getTheme(theme);
@@ -124,88 +113,92 @@ export default (props: any) => {
 
   return (
     <div>
-      <Grid container={true} spacing={3}>
-        <Grid style={styles.topItems} item={true} xs={12}>
-          <div key="blockHeight">
+      <Grid container spacing={3} direction="column">
+        <Grid item container justify="space-between">
+          <Grid item key="blockHeight">
             <ChartCard title="Block Height">
-              <Typography variant="h3">{blockNumber}</Typography>
+              <Typography variant="h4">{blockNumber}</Typography>
             </ChartCard>
-          </div>
-          <div key="chainId">
+          </Grid>
+          <Grid key="chainId" item>
             <ChartCard title="Chain ID">
-              <Typography variant="h3">{hexToNumber(chainId)}</Typography>
+              <Typography variant="h4">{hexToNumber(chainId)}</Typography>
             </ChartCard>
-          </div>
+          </Grid>
           {syncing &&
             <div key="syncing">
               <ChartCard title="Syncing">
                 {typeof syncing === "object" && syncing.currentBlock &&
-                  <Typography variant="h3">
+                  <Typography variant="h4">
                     {hexToNumber(syncing.currentBlock)} / {hexToNumber(syncing.highestBlock || "0x0")}
                   </Typography>
                 }
               </ChartCard>
             </div>
           }
-          <div key="gasPrice">
+          <Grid key="gasPrice" item>
             <ChartCard title="Gas Price">
-              <Typography variant="h3">{weiToGwei(hexToNumber(gasPrice))} Gwei</Typography>
+              <Typography variant="h4">{weiToGwei(hexToNumber(gasPrice))} Gwei</Typography>
             </ChartCard>
-          </div>
-          <div key="hRate">
+          </Grid>
+          <Grid key="hRate" item>
             <ChartCard title="Network Hash Rate">
               {block &&
                 <HashRate block={block} blockTime={config.blockTime}>
-                  {(hashRate: any) => <Typography variant="h3">{hashRate} GH/s</Typography>}
+                  {(hashRate: any) => <Typography variant="h4">{hashRate} GH/s</Typography>}
                 </HashRate>
               }
             </ChartCard>
-          </div>
-          <div key="pending-tx">
+          </Grid>
+          <Grid key="pending-tx" item>
             <ChartCard title="Pending Transactions">
-              {<Typography variant="h3">{pendingTransctionsLength}</Typography>}
+              {<Typography variant="h4">{pendingTransctionsLength}</Typography>}
             </ChartCard>
-          </div>
-          <div>
+          </Grid>
+          <Grid key="peers" item>
             <ChartCard title="Peers">
-              <Typography variant="h3">{hexToNumber(peerCount)}</Typography>
+              <Typography variant="h4">{hexToNumber(peerCount)}</Typography>
             </ChartCard>
-          </div>
-        </Grid>
-        <Grid key="hashChart" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Hash Rate last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryLine data={blocks.map(blockMapHashRate)} />
-            </VictoryChart>
-          </ChartCard>
-        </Grid>
-        <Grid key="txChart" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Transaction count last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryBar data={blocks.map(blockMapTransactionCount)} />
-            </VictoryChart>
-          </ChartCard>
+          </Grid>
         </Grid>
-        <Grid key="gasUsed" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Gas Used Last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryBar data={blocks.map(blockMapGasUsed)} />
-            </VictoryChart>
-          </ChartCard>
-        </Grid>
-        <Grid key="uncles" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Uncles Last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryBar data={blocks.map(blockMapUncles)} />
-            </VictoryChart>
-          </ChartCard>
+        <Grid item container>
+          <Grid key="hashChart" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Hash Rate last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryLine data={blocks.map(blockMapHashRate)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
+          <Grid key="txChart" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Transaction count last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryBar data={blocks.map(blockMapTransactionCount)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
+          <Grid key="gasUsed" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Gas Used Last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryBar data={blocks.map(blockMapGasUsed)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
+          <Grid key="uncles" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Uncles Last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryBar data={blocks.map(blockMapUncles)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
         </Grid>
 
       </Grid>
 
       <BlockCardListContainer from={Math.max(blockNumber - 3, 0)} to={blockNumber} />
-      <BlockListContainer from={Math.max((blockNumber - 3) - 11, 0)} to={blockNumber - 3} style={{ marginTop: "30px" }} />
-
+      <BlockListContainer
+        from={Math.max((blockNumber - 3) - 11, 0)}
+        to={blockNumber - 3}
+        style={{ marginTop: "30px" }} />
     </div>
   );
 };