mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-12-29 05:10:05 +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
} = Styled;
const xs = (props) => props.collapsed
const md = (props) => props.collapsed
? 12
: 6;
@ -27,10 +27,12 @@ module.exports = transferProps([
'headed',
'fromHeader'
], (props) => {
const meta = (
<Column
md={md(props)}
name='list-item-meta'
xs={xs(props)}
xs={12}
{...props}
>
<InnerRow collapsed={props.collapsed}>

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

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

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

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