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
GitHub
parent
5cb02d709c
commit
6736caaf45
@ -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>
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user