seasharp/anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: set scrolling depending on screen size

Browse Source
This commit is contained in:
Josue 2021-04-30 11:12:44 -04:00 committed by Tsu-ba-me
parent 04b5f6e9fd
commit 09f30eba37
3 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
striker-ui/components/Anvils/AnvilList.tsx
View File

@ -13,11 +13,15 @@ import Anvil from './Anvil';
import { AnvilContext } from '../AnvilContext'; import { AnvilContext } from '../AnvilContext';
import sortAnvils from './sortAnvils'; import sortAnvils from './sortAnvils';
const useStyles = makeStyles(() => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '30vh', height: '30vh',
[theme.breakpoints.down('md')]: {
height: '100%',
overflow: 'hidden',
},
}, },
divider: { divider: {
background: DIVIDER, background: DIVIDER,
@ -67,7 +71,7 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
const classes = useStyles(); const classes = useStyles();
useEffect(() => { useEffect(() => {
setAnvilUuid(sortAnvils(list)[0].anvil_uuid); if (uuid === '') setAnvilUuid(sortAnvils(list)[0].anvil_uuid);
}, [uuid, list, setAnvilUuid]); }, [uuid, list, setAnvilUuid]);
return ( return (

6
striker-ui/components/Network.tsx
View File

@ -9,11 +9,15 @@ import { BLUE, PURPLE_OFF, DIVIDER } from '../lib/consts/DEFAULT_THEME';
import processNetworkData from './processNetwork'; import processNetworkData from './processNetwork';
import { AnvilContext } from './AnvilContext'; import { AnvilContext } from './AnvilContext';
const useStyles = makeStyles(() => ({ const useStyles = makeStyles((theme) => ({
container: { container: {
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '30vh', height: '30vh',
[theme.breakpoints.down('md')]: {
height: '100%',
overflow: 'hidden',
},
}, },
root: { root: {
paddingTop: '10px', paddingTop: '10px',

113
striker-ui/components/Servers.tsx
View File

@ -16,11 +16,14 @@ import {
import { AnvilContext } from './AnvilContext'; import { AnvilContext } from './AnvilContext';
import serverState from '../lib/consts/SERVERS'; import serverState from '../lib/consts/SERVERS';
const useStyles = makeStyles(() => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '100%', height: '80vh',
[theme.breakpoints.down('md')]: {
height: '100%',
},
}, },
divider: { divider: {
background: DIVIDER, background: DIVIDER,
@ -79,61 +82,59 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
return ( return (
<Panel> <Panel>
<HeaderText text="Servers" /> <HeaderText text="Servers" />
<List <Box className={classes.root}>
component="nav" <List component="nav">
className={classes.root} {data &&
aria-label="mailbox folders" data.servers.map((server: AnvilServer) => {
> return (
{data && <>
data.servers.map((server: AnvilServer) => { <ListItem
return ( button
<> className={classes.button}
<ListItem key={server.server_uuid}
button >
className={classes.button} <Box display="flex" flexDirection="row" width="100%">
key={server.server_uuid} <Box p={1} className={classes.noPaddingLeft}>
> <div
<Box display="flex" flexDirection="row" width="100%"> className={`${classes.decorator} ${
<Box p={1} className={classes.noPaddingLeft}> classes[selectDecorator(server.server_state)]
<div }`}
className={`${classes.decorator} ${ />
classes[selectDecorator(server.server_state)] </Box>
}`} <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
/> <BodyText text={server.server_name} />
<BodyText
text={
serverState.get(server.server_state) ||
'Not Available'
}
/>
</Box>
{server.server_state !== 'shut_off' &&
server.server_state !== 'crashed' &&
anvil[
anvil.findIndex((a) => a.anvil_uuid === uuid)
].nodes.map(
(
node: AnvilListItemNode,
index: number,
): JSX.Element => (
<Box p={1} key={node.node_uuid}>
<BodyText
text={node.node_name}
selected={server.server_host_index === index}
/>
</Box>
),
)}
</Box> </Box>
<Box p={1} flexGrow={1} className={classes.noPaddingLeft}> </ListItem>
<BodyText text={server.server_name} /> <Divider className={classes.divider} />
<BodyText </>
text={ );
serverState.get(server.server_state) || })}
'Not Available' </List>
} </Box>
/>
</Box>
{server.server_state !== 'shut_off' &&
server.server_state !== 'crashed' &&
anvil[
anvil.findIndex((a) => a.anvil_uuid === uuid)
].nodes.map(
(
node: AnvilListItemNode,
index: number,
): JSX.Element => (
<Box p={1} key={node.node_uuid}>
<BodyText
text={node.node_name}
selected={server.server_host_index === index}
/>
</Box>
),
)}
</Box>
</ListItem>
<Divider className={classes.divider} />
</>
);
})}
</List>
</Panel> </Panel>
); );
}; };