Auto height while list is loading #73
This commit is contained in:
parent
52674520da
commit
7444963fec
|
@ -29,7 +29,8 @@ const styles = () => ({
|
||||||
'&:focus': {
|
'&:focus': {
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
},
|
},
|
||||||
display: 'grid',
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,7 @@ import SearchBar from 'material-ui-search-bar'
|
||||||
import { withStyles } from '@material-ui/core/styles'
|
import { withStyles } from '@material-ui/core/styles'
|
||||||
import MuiList from '@material-ui/core/List'
|
import MuiList from '@material-ui/core/List'
|
||||||
import Img from '~/components/layout/Img'
|
import Img from '~/components/layout/Img'
|
||||||
|
import Block from '~/components/layout/Block'
|
||||||
import ListItem from '@material-ui/core/ListItem'
|
import ListItem from '@material-ui/core/ListItem'
|
||||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
||||||
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
|
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
|
||||||
|
@ -24,6 +25,9 @@ import { lg, md, sm, xs, mediumFontSize, border } from '~/theme/variables'
|
||||||
import { type Token } from '~/routes/tokens/store/model/token'
|
import { type Token } from '~/routes/tokens/store/model/token'
|
||||||
|
|
||||||
const styles = () => ({
|
const styles = () => ({
|
||||||
|
root: {
|
||||||
|
minHeight: '132px',
|
||||||
|
},
|
||||||
heading: {
|
heading: {
|
||||||
padding: `${md} ${lg}`,
|
padding: `${md} ${lg}`,
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
|
@ -53,6 +57,7 @@ const styles = () => ({
|
||||||
list: {
|
list: {
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
overflowY: 'scroll',
|
overflowY: 'scroll',
|
||||||
|
padding: 0,
|
||||||
},
|
},
|
||||||
token: {
|
token: {
|
||||||
minHeight: '50px',
|
minHeight: '50px',
|
||||||
|
@ -114,6 +119,7 @@ class Tokens extends React.Component<Props> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
|
<Block className={classes.root}>
|
||||||
<Row align="center" grow className={classes.heading}>
|
<Row align="center" grow className={classes.heading}>
|
||||||
<Paragraph className={classes.manage} noMargin>Manage Tokens</Paragraph>
|
<Paragraph className={classes.manage} noMargin>Manage Tokens</Paragraph>
|
||||||
<IconButton onClick={onClose} disableRipple>
|
<IconButton onClick={onClose} disableRipple>
|
||||||
|
@ -137,6 +143,7 @@ class Tokens extends React.Component<Props> {
|
||||||
</Button>
|
</Button>
|
||||||
</Row>
|
</Row>
|
||||||
<Hairline />
|
<Hairline />
|
||||||
|
</Block>
|
||||||
<MuiList className={classes.list}>
|
<MuiList className={classes.list}>
|
||||||
{tokens.map((token: Token) => (
|
{tokens.map((token: Token) => (
|
||||||
<ListItem key={token.get('address')} className={classes.token}>
|
<ListItem key={token.get('address')} className={classes.token}>
|
||||||
|
|
Loading…
Reference in New Issue