Implement responsive designs for CI: Networks (#1438)

* feat(instances): network section responive behaviour

* feat(instances): adjust network info container width

* test(instances): update network step snapshot

* test(instances): update network step snapshots
This commit is contained in:
Fábio Moreira 2018-05-28 13:38:21 +01:00 committed by GitHub
parent 5cb02d709c
commit 6736caaf45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 381 additions and 414 deletions

View File

@ -1048,7 +1048,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
}
.c17 {
padding: 1.875rem;
padding: 1.125rem;
}
.c6 {
@ -1403,6 +1403,12 @@ exports[`renders <Networks networks /> without throwing 1`] = `
font-weight: 200;
}
@media (min-width:46.0625em) {
.c17 {
padding: 1.875rem;
}
}
@media only screen and (min-width:48em) {
.c1 {
width: 46rem;
@ -1655,6 +1661,151 @@ exports[`renders <Networks networks /> without throwing 1`] = `
</div>
</div>
</div>
<span
name="react-responsive-mock"
query="only screen and (min-width: 37.5rem)"
>
<div
className="c19"
>
<div
className="c20"
>
<div
className="c21"
>
<div
className="c20"
>
<div
className="c22"
>
<svg
height="17"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-1105 974)"
>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -968)"
xlinkHref="#c"
/>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -962)"
xlinkHref="#d"
/>
</g>
</g>
</g>
</g>
<defs>
<path
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
id="c"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="d"
/>
</defs>
</svg>
</div>
</div>
<div
className="c20"
>
<p
className="c6"
>
2 instances
</p>
</div>
</div>
</div>
</div>
</span>
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 37.4375rem)"
>
<div
className="c18"
>
<div
className="c19"
>
@ -1788,6 +1939,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
</div>
</div>
</div>
</span>
<div
className="c23"
>
@ -2042,7 +2194,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
</div>
</div>
</div>
<span
name="react-responsive-mock"
query="only screen and (min-width: 37.5rem)"
/>
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 37.4375rem)"
/>
</div>
</div>
</div>

View File

@ -48,7 +48,7 @@ exports[`renders <Network /> without throwing 1`] = `
}
.c18 {
padding: 1.875rem;
padding: 1.125rem;
}
.c19 {
@ -452,6 +452,12 @@ exports[`renders <Network /> without throwing 1`] = `
}
}
@media (min-width:46.0625em) {
.c18 {
padding: 1.875rem;
}
}
<div
className="c0"
>
@ -958,7 +964,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
}
.c18 {
padding: 1.875rem;
padding: 1.125rem;
}
.c21 {
@ -1362,6 +1368,12 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
}
}
@media (min-width:46.0625em) {
.c18 {
padding: 1.875rem;
}
}
<div
className="c0"
>
@ -1881,7 +1893,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
}
.c18 {
padding: 1.875rem;
padding: 1.125rem;
}
.c21 {
@ -2285,6 +2297,12 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
}
}
@media (min-width:46.0625em) {
.c18 {
padding: 1.875rem;
}
}
<div
className="c0"
>
@ -2808,7 +2826,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
}
.c18 {
padding: 1.875rem;
padding: 1.125rem;
}
.c29 {
@ -3258,6 +3276,12 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
}
}
@media (min-width:46.0625em) {
.c18 {
padding: 1.875rem;
}
}
<div
className="c0"
>
@ -3437,138 +3461,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
</div>
</div>
</div>
<div
className="c22"
>
<div
className="c23"
>
<div
className="c24"
>
<div
className="c23"
>
<div
className="c25"
>
<svg
height="17"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-1105 974)"
>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -968)"
xlinkHref="#c"
/>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -962)"
xlinkHref="#d"
/>
</g>
</g>
</g>
</g>
<defs>
<path
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
id="c"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="d"
/>
</defs>
</svg>
</div>
</div>
<div
className="c23"
>
<p
className="c20"
>
0 instances
</p>
</div>
</div>
</div>
</div>
</div>
<div
className="c26"
@ -3965,7 +3857,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
margin-bottom: 0.75rem;
}
.c33 {
.c34 {
margin-top: 0.1875rem;
}
@ -3975,7 +3867,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
}
.c18 {
padding: 1.875rem;
padding: 1.125rem;
}
.c27 {
@ -4118,7 +4010,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
font-size: 0.9375rem;
}
.c32 {
.c33 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -4399,7 +4291,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
-webkit-padding-after: 0;
}
.c34 {
.c35 {
box-sizing: border-box;
width: 18.75rem;
height: 3rem;
@ -4423,62 +4315,62 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
max-width: 100%;
}
.c34:focus {
.c35:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c34::-webkit-input-placeholder {
.c35::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c34::-moz-placeholder {
.c35::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c34:-ms-input-placeholder {
.c35:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c34:invalid {
.c35:invalid {
box-shadow: none;
}
.c34:disabled {
.c35:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
}
.c34:disabled::-webkit-input-placeholder {
.c35:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c34:disabled::-moz-placeholder {
.c35:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c34:disabled:-ms-input-placeholder {
.c35:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c34:disabled {
.c35:disabled {
color: rgb(73,73,73);
}
.c34:disabled::-webkit-input-placeholder {
.c35:disabled::-webkit-input-placeholder {
color: rgb(73,73,73);
}
.c34:disabled::-moz-placeholder {
.c35:disabled::-moz-placeholder {
color: rgb(73,73,73);
}
.c34:disabled:-ms-input-placeholder {
.c35:disabled:-ms-input-placeholder {
color: rgb(73,73,73);
}
.c31 {
.c32 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
@ -4488,6 +4380,10 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
background-color: #f7f7f7;
}
.c31 {
width: 100%;
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
@ -4506,6 +4402,12 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
}
}
@media (min-width:46.0625em) {
.c18 {
padding: 1.875rem;
}
}
<div
className="c0"
>
@ -4685,138 +4587,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
</div>
</div>
</div>
<div
className="c22"
>
<div
className="c23"
>
<div
className="c24"
>
<div
className="c23"
>
<div
className="c25"
>
<svg
height="17"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-1105 974)"
>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -968)"
xlinkHref="#c"
/>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1105 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1111 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgb(73, 73, 73)"
transform="translate(1117 -962)"
xlinkHref="#d"
/>
</g>
</g>
</g>
</g>
<defs>
<path
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
id="c"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="d"
/>
</defs>
</svg>
</div>
</div>
<div
className="c23"
>
<p
className="c20"
>
0 instances
</p>
</div>
</div>
</div>
</div>
</div>
<div
className="c26"
@ -4888,22 +4658,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
className="c30"
>
<div
className="c8"
className="c31 c8"
name="id"
role="group"
style={undefined}
>
<label
className="c31 c32"
className="c32 c33"
htmlFor="x"
>
ID
</label>
<div
className="c33"
className="c34"
>
<input
className="c34"
className="c35"
disabled={false}
id="x"
onBlur={null}
@ -4917,22 +4687,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
className="c23"
>
<div
className="c8"
className="c31 c8"
name="subnet"
role="group"
style={undefined}
>
<label
className="c31 c32"
className="c32 c33"
htmlFor="y"
>
Subnet
</label>
<div
className="c33"
className="c34"
>
<input
className="c34"
className="c35"
disabled={false}
id="y"
onBlur={null}
@ -4945,22 +4715,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
className="c23"
>
<div
className="c8"
className="c31 c8"
name="ip-range"
role="group"
style={undefined}
>
<label
className="c31 c32"
className="c32 c33"
htmlFor="z"
>
IP range
</label>
<div
className="c33"
className="c34"
>
<input
className="c34"
className="c35"
disabled={false}
id="z"
onBlur={null}
@ -5313,7 +5083,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
}
.c18 {
padding: 1.875rem;
padding: 1.125rem;
}
.c21 {
@ -5717,6 +5487,12 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
}
}
@media (min-width:46.0625em) {
.c18 {
padding: 1.875rem;
}
}
<div
className="c0"
>

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};
@ -46,6 +49,10 @@ const CardHeader = styled(BaseCardHeader)`
`};
`;
const ResponsiveFormGroup = styled(FormGroup)`
width: 100%;
`;
export const Collapsed = ({ name, fabric, ...network }) => (
<Margin inline right={3} top={3}>
<Box>
@ -138,7 +145,7 @@ export const Expanded = ({
</CardHeaderMeta>
</CardHeader>
<CardOutlet>
<Padding all={5}>
<Padding all={{ mobile: 3, tablet: 5 }}>
{description && (
<Margin bottom={3}>
<P>{description}</P>
@ -175,6 +182,7 @@ export const Expanded = ({
</Flex>
</FlexItem>
</Margin>
<Medium>
{fabric ? (
<Margin right={5}>
<FlexItem>
@ -193,7 +201,30 @@ export const Expanded = ({
</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}>
@ -235,7 +266,7 @@ export const Expanded = ({
) : null}
<FlexItem>
<Margin bottom={2}>
<FormGroup name="id">
<ResponsiveFormGroup name="id">
<FormLabel>ID</FormLabel>
<Margin top={0.5}>
<Input
@ -246,11 +277,11 @@ export const Expanded = ({
value={id}
/>
</Margin>
</FormGroup>
</ResponsiveFormGroup>
</Margin>
</FlexItem>
<FlexItem>
<FormGroup name="subnet">
<ResponsiveFormGroup name="subnet">
<FormLabel>Subnet</FormLabel>
<Margin top={0.5}>
<Input
@ -261,10 +292,10 @@ export const Expanded = ({
value={subnet}
/>
</Margin>
</FormGroup>
</ResponsiveFormGroup>
</FlexItem>
<FlexItem>
<FormGroup name="ip-range">
<ResponsiveFormGroup name="ip-range">
<FormLabel>IP range</FormLabel>
<Margin top={0.5}>
<Input
@ -275,7 +306,7 @@ export const Expanded = ({
value={`${provision_start_ip} - ${provision_end_ip}`}
/>
</Margin>
</FormGroup>
</ResponsiveFormGroup>
</FlexItem>
</Flex>
</Padding>