From 6736caaf459ee9e471eda53c1db7c5b564c18961 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Moreira?= Date: Mon, 28 May 2018 13:38:21 +0100 Subject: [PATCH] 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 --- .../__snapshots__/networks.spec.js.snap | 338 +++++++++++----- .../__snapshots__/network.spec.js.snap | 374 ++++-------------- .../resource-widgets/src/network/index.js | 83 ++-- 3 files changed, 381 insertions(+), 414 deletions(-) diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap index c85186f8..823b5e93 100644 --- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap +++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap @@ -1048,7 +1048,7 @@ exports[`renders without throwing 1`] = ` } .c17 { - padding: 1.875rem; + padding: 1.125rem; } .c6 { @@ -1403,6 +1403,12 @@ exports[`renders 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,139 +1661,285 @@ exports[`renders without throwing 1`] = ` -
- - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + +
+
+
+

+ 2 instances +

+
+
+ + + +
+
+
-

- 2 instances -

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ 2 instances +

+
- +
@@ -2042,7 +2194,15 @@ exports[`renders without throwing 1`] = `
+ + diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap index d89c0146..c552052d 100644 --- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap +++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap @@ -48,7 +48,7 @@ exports[`renders without throwing 1`] = ` } .c18 { - padding: 1.875rem; + padding: 1.125rem; } .c19 { @@ -452,6 +452,12 @@ exports[`renders without throwing 1`] = ` } } +@media (min-width:46.0625em) { + .c18 { + padding: 1.875rem; + } +} +
@@ -958,7 +964,7 @@ exports[`renders without throwing 1`] = ` } .c18 { - padding: 1.875rem; + padding: 1.125rem; } .c21 { @@ -1362,6 +1368,12 @@ exports[`renders without throwing 1`] = ` } } +@media (min-width:46.0625em) { + .c18 { + padding: 1.875rem; + } +} +
@@ -1881,7 +1893,7 @@ exports[`renders without throwing 3`] = ` } .c18 { - padding: 1.875rem; + padding: 1.125rem; } .c21 { @@ -2285,6 +2297,12 @@ exports[`renders without throwing 3`] = ` } } +@media (min-width:46.0625em) { + .c18 { + padding: 1.875rem; + } +} +
@@ -2808,7 +2826,7 @@ exports[`renders without throwing 1`] = ` } .c18 { - padding: 1.875rem; + padding: 1.125rem; } .c29 { @@ -3258,6 +3276,12 @@ exports[`renders without throwing 1`] = ` } } +@media (min-width:46.0625em) { + .c18 { + padding: 1.875rem; + } +} +
@@ -3437,138 +3461,6 @@ exports[`renders without throwing 1`] = `
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

- 0 instances -

-
-
-
-
without throwing 1`] = ` margin-bottom: 0.75rem; } -.c33 { +.c34 { margin-top: 0.1875rem; } @@ -3975,7 +3867,7 @@ exports[`renders without throwing 1`] = ` } .c18 { - padding: 1.875rem; + padding: 1.125rem; } .c27 { @@ -4118,7 +4010,7 @@ exports[`renders 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 without throwing 1`] = ` -webkit-padding-after: 0; } -.c34 { +.c35 { box-sizing: border-box; width: 18.75rem; height: 3rem; @@ -4423,62 +4315,62 @@ exports[`renders 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 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 without throwing 1`] = ` } } +@media (min-width:46.0625em) { + .c18 { + padding: 1.875rem; + } +} +
@@ -4685,138 +4587,6 @@ exports[`renders without throwing 1`] = `
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

- 0 instances -

-
-
-
-
without throwing 1`] = ` className="c30" >
without throwing 1`] = ` className="c23" >
without throwing 1`] = ` className="c23" >
without throwing 1`] = ` } .c18 { - padding: 1.875rem; + padding: 1.125rem; } .c21 { @@ -5717,6 +5487,12 @@ exports[`renders without throwing 1`] = ` } } +@media (min-width:46.0625em) { + .c18 { + padding: 1.875rem; + } +} +
diff --git a/packages/resource-widgets/src/network/index.js b/packages/resource-widgets/src/network/index.js index 4405035a..59b5ba5a 100644 --- a/packages/resource-widgets/src/network/index.js +++ b/packages/resource-widgets/src/network/index.js @@ -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 }) => ( @@ -138,7 +145,7 @@ export const Expanded = ({ - + {description && (

{description}

@@ -175,25 +182,49 @@ export const Expanded = ({ - {fabric ? ( - - - - - - - - - -

{`${machines.length} instance${ - machines.length === 1 ? '' : 's' - }`}

- - - - - ) : null} + + {fabric ? ( + + + + + + + + + +

{`${machines.length} instance${ + machines.length === 1 ? '' : 's' + }`}

+ + + + + ) : null} + + + {fabric ? ( + + + + + + + + + + +

{`${machines.length} instance${ + machines.length === 1 ? '' : 's' + }`}

+ + + + + + ) : null} + {fabric ? ( @@ -235,7 +266,7 @@ export const Expanded = ({ ) : null} - + ID - + - + Subnet - + - + IP range - +