mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00
Code Issues Releases Wiki Activity

making metric list item responsive

Browse Source
This commit is contained in:
Alex Windett 2017-02-03 15:21:57 +00:00
parent bb6a7aff23
commit 1202dcb830
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/list/meta.js
View File

@ -9,7 +9,7 @@ const {
default: styled default: styled
} = Styled; } = Styled;
const xs = (props) => props.collapsed const md = (props) => props.collapsed
? 12 ? 12
: 6; : 6;
@ -27,10 +27,12 @@ module.exports = transferProps([
'headed', 'headed',
'fromHeader' 'fromHeader'
], (props) => { ], (props) => {
const meta = ( const meta = (
<Column <Column
md={md(props)}
name='list-item-meta' name='list-item-meta'
xs={xs(props)} xs={12}
{...props} {...props}
> >
<InnerRow collapsed={props.collapsed}> <InnerRow collapsed={props.collapsed}>

3
ui/src/components/list/outlet.js
View File

@ -16,8 +16,9 @@ const StyledColumn = styled(Column)`
const Outlet = (props) => ( const Outlet = (props) => (
<StyledColumn <StyledColumn
md={6}
name='list-item-outlet' name='list-item-outlet'
xs={6} xs={12}
{...props} {...props}
> >
{props.children} {props.children}

9
ui/src/components/list/story.js
View File

@ -189,13 +189,14 @@ storiesOf('List Item', module)
<Base> <Base>
<ListItem headed> <ListItem headed>
<ListItemHeader> <ListItemHeader>
<ListItemMeta> <ListItemMeta md={6} xs={12} >
<ListItemTitle>Percona</ListItemTitle> <ListItemTitle>Percona</ListItemTitle>
<ListItemSubTitle>5 instances</ListItemSubTitle> <ListItemSubTitle>5 instances</ListItemSubTitle>
<ListItemDescription>Flags</ListItemDescription> <ListItemDescription>Flags</ListItemDescription>
</ListItemMeta> </ListItemMeta>
<ListItemOptions>…</ListItemOptions> <ListItemOptions>…</ListItemOptions>
</ListItemHeader> </ListItemHeader>
<ListItemGroupView> <ListItemGroupView>
<ListItem flat> <ListItem flat>
<ListItemView> <ListItemView>
@ -204,7 +205,7 @@ storiesOf('List Item', module)
</ListItemMeta> </ListItemMeta>
<ListItemOutlet> <ListItemOutlet>
<Row> <Row>
<Column xs={4}> <Column md={4} xs={12}>
<MiniMetricView borderless> <MiniMetricView borderless>
<MiniMetricMeta> <MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle> <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
@ -213,7 +214,7 @@ storiesOf('List Item', module)
<MiniMetricGraph data={MiniMetricData} /> <MiniMetricGraph data={MiniMetricData} />
</MiniMetricView> </MiniMetricView>
</Column> </Column>
<Column xs={4}> <Column md={4} xs={12}>
<MiniMetricView borderless> <MiniMetricView borderless>
<MiniMetricMeta> <MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle> <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
@ -222,7 +223,7 @@ storiesOf('List Item', module)
<MiniMetricGraph data={MiniMetricData} /> <MiniMetricGraph data={MiniMetricData} />
</MiniMetricView> </MiniMetricView>
</Column> </Column>
<Column xs={4}> <Column md={4} xs={12}>
<MiniMetricView borderless> <MiniMetricView borderless>
<MiniMetricMeta> <MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle> <MiniMetricTitle>Memory: 54%</MiniMetricTitle>