fix(front-end): adjust padding and breakpoint when showing scrollbars

main
Josue 4 years ago
parent ea91b36291
commit 6d1f4f8025
  1. 9
      striker-ui/components/Anvils/AnvilList.tsx
  2. 3
      striker-ui/components/FileSystem/FileSystems.tsx
  3. 4
      striker-ui/components/Hosts/AnvilHost.tsx
  4. 8
      striker-ui/components/Network/Network.tsx
  5. 5
      striker-ui/components/Servers.tsx
  6. 4
      striker-ui/components/SharedStorage/SharedStorage.tsx

@ -1,7 +1,11 @@
import { useContext, useEffect } from 'react'; import { useContext, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { List, Box, Divider, ListItem } from '@material-ui/core'; import { List, Box, Divider, ListItem } from '@material-ui/core';
import { HOVER, DIVIDER } from '../../lib/consts/DEFAULT_THEME'; import {
HOVER,
DIVIDER,
LARGE_MOBILE_BREAKPOINT,
} from '../../lib/consts/DEFAULT_THEME';
import Anvil from './Anvil'; import Anvil from './Anvil';
import { AnvilContext } from '../AnvilContext'; import { AnvilContext } from '../AnvilContext';
import sortAnvils from './sortAnvils'; import sortAnvils from './sortAnvils';
@ -12,7 +16,8 @@ const useStyles = makeStyles((theme) => ({
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '30vh', height: '30vh',
[theme.breakpoints.down('md')]: { paddingRight: '.3em',
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
height: '100%', height: '100%',
overflow: 'hidden', overflow: 'hidden',
}, },

@ -8,6 +8,7 @@ import SharedStorageHost from './FileSystemsHost';
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import { AnvilContext } from '../AnvilContext'; import { AnvilContext } from '../AnvilContext';
import Spinner from '../Spinner'; import Spinner from '../Spinner';
import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
header: { header: {
@ -18,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
overflow: 'auto', overflow: 'auto',
height: '78vh', height: '78vh',
paddingLeft: '.3em', paddingLeft: '.3em',
[theme.breakpoints.down('md')]: { [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
height: '100%', height: '100%',
}, },
}, },

@ -7,13 +7,15 @@ import Decorator, { Colours } from '../Decorator';
import HOST_STATUS from '../../lib/consts/NODES'; import HOST_STATUS from '../../lib/consts/NODES';
import putJSON from '../../lib/fetchers/putJSON'; import putJSON from '../../lib/fetchers/putJSON';
import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
overflow: 'auto', overflow: 'auto',
height: '28vh', height: '28vh',
paddingLeft: '.3em', paddingLeft: '.3em',
[theme.breakpoints.down('md')]: { paddingRight: '.3em',
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
height: '100%', height: '100%',
overflow: 'hidden', overflow: 'hidden',
}, },

@ -4,7 +4,10 @@ import { makeStyles } from '@material-ui/core/styles';
import { Panel } from '../Panels'; import { Panel } from '../Panels';
import { HeaderText, BodyText } from '../Text'; import { HeaderText, BodyText } from '../Text';
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import { DIVIDER } from '../../lib/consts/DEFAULT_THEME'; import {
DIVIDER,
LARGE_MOBILE_BREAKPOINT,
} from '../../lib/consts/DEFAULT_THEME';
import processNetworkData from './processNetwork'; import processNetworkData from './processNetwork';
import { AnvilContext } from '../AnvilContext'; import { AnvilContext } from '../AnvilContext';
import Decorator, { Colours } from '../Decorator'; import Decorator, { Colours } from '../Decorator';
@ -15,7 +18,8 @@ const useStyles = makeStyles((theme) => ({
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '32vh', height: '32vh',
[theme.breakpoints.down('md')]: { paddingRight: '.3em',
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
height: '100%', height: '100%',
overflow: 'hidden', overflow: 'hidden',
}, },

@ -26,6 +26,7 @@ import {
RED, RED,
GREY, GREY,
BLACK, BLACK,
LARGE_MOBILE_BREAKPOINT,
} from '../lib/consts/DEFAULT_THEME'; } from '../lib/consts/DEFAULT_THEME';
import { AnvilContext } from './AnvilContext'; import { AnvilContext } from './AnvilContext';
import serverState from '../lib/consts/SERVERS'; import serverState from '../lib/consts/SERVERS';
@ -40,8 +41,10 @@ const useStyles = makeStyles((theme) => ({
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '78vh', height: '78vh',
[theme.breakpoints.down('md')]: { paddingRight: '.3em',
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
height: '100%', height: '100%',
overflow: 'hidden',
}, },
}, },
divider: { divider: {

@ -8,6 +8,7 @@ import SharedStorageHost from './SharedStorageHost';
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import { AnvilContext } from '../AnvilContext'; import { AnvilContext } from '../AnvilContext';
import Spinner from '../Spinner'; import Spinner from '../Spinner';
import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
header: { header: {
@ -18,7 +19,8 @@ const useStyles = makeStyles((theme) => ({
overflow: 'auto', overflow: 'auto',
height: '78vh', height: '78vh',
paddingLeft: '.3em', paddingLeft: '.3em',
[theme.breakpoints.down('md')]: { paddingRight: '.3em',
[theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
height: '100%', height: '100%',
}, },
}, },

Loading…
Cancel
Save