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