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 sortAnvils from './sortAnvils';
const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
overflow: 'auto',
height: '30vh',
[theme.breakpoints.down('md')]: {
height: '100%',
overflow: 'hidden',
},
},
divider: {
background: DIVIDER,
@ -67,7 +71,7 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
const classes = useStyles();
useEffect(() => {
setAnvilUuid(sortAnvils(list)[0].anvil_uuid);
if (uuid === '') setAnvilUuid(sortAnvils(list)[0].anvil_uuid);
}, [uuid, list, setAnvilUuid]);
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 { AnvilContext } from './AnvilContext';
const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme) => ({
container: {
width: '100%',
overflow: 'auto',
height: '30vh',
[theme.breakpoints.down('md')]: {
height: '100%',
overflow: 'hidden',
},
},
root: {
paddingTop: '10px',

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

@ -16,11 +16,14 @@ import {
import { AnvilContext } from './AnvilContext';
import serverState from '../lib/consts/SERVERS';
const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
overflow: 'auto',
height: '100%',
height: '80vh',
[theme.breakpoints.down('md')]: {
height: '100%',
},
},
divider: {
background: DIVIDER,
@ -79,61 +82,59 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
return (
<Panel>
<HeaderText text="Servers" />
<List
component="nav"
className={classes.root}
aria-label="mailbox folders"
>
{data &&
data.servers.map((server: AnvilServer) => {
return (
<>
<ListItem
button
className={classes.button}
key={server.server_uuid}
>
<Box display="flex" flexDirection="row" width="100%">
<Box p={1} className={classes.noPaddingLeft}>
<div
className={`${classes.decorator} ${
classes[selectDecorator(server.server_state)]
}`}
/>
<Box className={classes.root}>
<List component="nav">
{data &&
data.servers.map((server: AnvilServer) => {
return (
<>
<ListItem
button
className={classes.button}
key={server.server_uuid}
>
<Box display="flex" flexDirection="row" width="100%">
<Box p={1} className={classes.noPaddingLeft}>
<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 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>
</ListItem>
<Divider className={classes.divider} />
</>
);
})}
</List>
</ListItem>
<Divider className={classes.divider} />
</>
);
})}
</List>
</Box>
</Panel>
);
};