Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(instances): network section responive behaviour

This commit is contained in:
Fábio Moreira 2018-05-25 15:23:32 +01:00
parent 5cb02d709c
commit 8ac9ca3645
1 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
packages/resource-widgets/src/network/index.js
View File

@ -29,9 +29,12 @@ import {
DataCenterIcon, DataCenterIcon,
PublicIcon, PublicIcon,
PrivateIcon, PrivateIcon,
ArrowIcon ArrowIcon,
QueryBreakpoints
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const Box = styled.div` const Box = styled.div`
display: inline-block; display: inline-block;
background-color: ${props => props.theme.white}; background-color: ${props => props.theme.white};
@ -138,7 +141,7 @@ export const Expanded = ({
</CardHeaderMeta> </CardHeaderMeta>
</CardHeader> </CardHeader>
<CardOutlet> <CardOutlet>
<Padding all={5}> <Padding all={{ mobile: 3, tablet: 5 }}>
{description && ( {description && (
<Margin bottom={3}> <Margin bottom={3}>
<P>{description}</P> <P>{description}</P>
@ -175,25 +178,49 @@ export const Expanded = ({
</Flex> </Flex>
</FlexItem> </FlexItem>
</Margin> </Margin>
{fabric ? ( <Medium>
<Margin right={5}> {fabric ? (
<FlexItem> <Margin right={5}>
<Flex alignCenter> <FlexItem>
<FlexItem> <Flex alignCenter>
<Margin right={1}> <FlexItem>
<InstanceCountIcon /> <Margin right={1}>
</Margin> <InstanceCountIcon />
</FlexItem> </Margin>
<FlexItem> </FlexItem>
<P>{`${machines.length} instance${ <FlexItem>
machines.length === 1 ? '' : 's' <P>{`${machines.length} instance${
}`}</P> machines.length === 1 ? '' : 's'
</FlexItem> }`}</P>
</Flex> </FlexItem>
</FlexItem> </Flex>
</Margin> </FlexItem>
) : null} </Margin>
) : null}
</Medium>
</Flex> </Flex>
<SmallOnly>
{fabric ? (
<Flex>
<Margin right={5}>
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
<InstanceCountIcon />
</Margin>
</FlexItem>
<FlexItem>
<P>{`${machines.length} instance${
machines.length === 1 ? '' : 's'
}`}</P>
</FlexItem>
</Flex>
</FlexItem>
</Margin>
</Flex>
) : null}
</SmallOnly>
{fabric ? ( {fabric ? (
<Fragment> <Fragment>
<Margin top={3}> <Margin top={3}>