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

#1406 - implement responsive rules on create instance (#1432)

Browse Source 
* fix(instances): swap absolute media query value for defined breakpoint

* feat(ui-toolkit): update breakpoints

* feat(ui-toolkit): view container padding and max width

* feat(ui-toolkit): responsive image selector

* fix(ui-toolkit): delay parallax header hiding

* feat(instances): responsive rules for package selection

* test(instances): update snapshots

* fix(instances): use color variables on package card

* fix(instances): import breakpoints from ui-toolkit

* feat(instances): package selection for mobile or desktop version

* feat(instances): remove unnecessary col css props

* test(instances): update snapshots

* test(instances): update resource widgets snaphots
This commit is contained in:
Fábio Moreira 2018-05-23 12:41:40 +01:00 committed by GitHub
parent 8422cdfe8c
commit b66f761a9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 1508 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
consoles/my-joy-images/src/components/summary.js
View File

@ -6,6 +6,7 @@ import Flex, { FlexItem } from 'styled-flex-component';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import titleCase from 'title-case';
import remcalc from 'remcalc';
import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
import {
Card,
@ -37,7 +38,7 @@ const VerticalDivider = styled.div`
align-self: flex-end;
margin: 0 ${remcalc(18)};
@media (max-width: ${remcalc(767)}) {
@media (max-width: ${remcalc(breakpoints.small.upper)}) {
display: none;
}
`;

22
consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
View File

@ -36,7 +36,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
.c4 {
@ -113,10 +113,24 @@ exports[`renders <Menu links /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

50
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
View File

@ -94,7 +94,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -483,14 +482,14 @@ exports[`renders <InstanceList /> without throwing 1`] = `
margin: 0 0.1875rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@ -812,7 +811,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -1201,14 +1199,14 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
margin: 0 0.1875rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@ -1530,7 +1528,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -1919,14 +1916,14 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
margin: 0 0.1875rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@ -2248,7 +2245,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -2637,14 +2633,14 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
margin: 0 0.1875rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@ -2966,7 +2962,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -3355,14 +3350,14 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
margin: 0 0.1875rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@ -3684,7 +3679,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -4073,14 +4067,14 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
margin: 0 0.1875rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 8.125rem;
display: table-cell;
@ -4452,7 +4446,6 @@ exports[`renders <Item /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -4679,14 +4672,14 @@ exports[`renders <Item /> without throwing 1`] = `
height: 3rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c14 {
width: 8.125rem;
display: table-cell;
@ -4980,7 +4973,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5207,14 +5199,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
height: 3rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c14 {
width: 8.125rem;
display: table-cell;
@ -5510,7 +5502,6 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5737,14 +5728,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
height: 3rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c13 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c14 {
width: 8.125rem;
display: table-cell;
@ -6027,7 +6018,6 @@ exports[`renders <Item mutating /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -6252,14 +6242,14 @@ exports[`renders <Item mutating /> without throwing 1`] = `
display: block;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c16 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c17 {
width: 8.125rem;
display: table-cell;

26
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
View File

@ -75,7 +75,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -360,7 +359,7 @@ Array [
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
@ -976,7 +975,6 @@ exports[`renders <Item /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -1150,7 +1148,7 @@ exports[`renders <Item /> without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c9 {
width: 10rem;
display: table-cell;
@ -1371,7 +1369,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -1545,7 +1542,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c9 {
width: 10rem;
display: table-cell;
@ -1625,7 +1622,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
name="td"
selected={undefined}
>
5 months
6 months
</td>
<td
className="c10"
@ -1967,7 +1964,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -2252,7 +2248,7 @@ Array [
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
@ -2842,7 +2838,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -3127,7 +3122,7 @@ Array [
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
@ -3717,7 +3712,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -4002,7 +3996,7 @@ Array [
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
@ -4592,7 +4586,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -4877,7 +4870,7 @@ Array [
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;
@ -5467,7 +5460,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5752,7 +5744,7 @@ Array [
border-bottom-width: 0.0625rem;
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c12 {
width: 10rem;
display: table-cell;

42
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

@ -1247,7 +1247,7 @@ exports[`renders <Summary /> without throwing 1`] = `
}
}
@media (max-width:47.9375rem) {
@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@ -1509,7 +1509,7 @@ exports[`renders <Summary /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c40 c28 c29 c30"
@ -1544,7 +1544,7 @@ exports[`renders <Summary /> without throwing 1`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c41 c28 c29 c30"
@ -2857,7 +2857,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
}
}
@media (max-width:47.9375rem) {
@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@ -3121,7 +3121,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c39 c28 c29 c30"
@ -3156,7 +3156,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c40 c28 c29 c30"
@ -4784,7 +4784,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
}
}
@media (max-width:47.9375rem) {
@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@ -5048,7 +5048,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c39 c28 c29 c30"
@ -5083,7 +5083,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c40 c28 c29 c30"
@ -6992,7 +6992,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
}
}
@media (max-width:47.9375rem) {
@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@ -7261,7 +7261,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c43 c28 c29 c30"
@ -7306,7 +7306,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c44 c28 c29 c30"
@ -8705,7 +8705,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
}
}
@media (max-width:47.9375rem) {
@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@ -8967,7 +8967,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c39 c28 c29 c30"
@ -9002,7 +9002,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c40 c28 c29 c30"
@ -10394,7 +10394,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
}
}
@media (max-width:47.9375rem) {
@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@ -10656,7 +10656,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c39 c28 c29 c30"
@ -10691,7 +10691,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c40 c28 c29 c30"
@ -12245,7 +12245,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
}
}
@media (max-width:47.9375rem) {
@media (max-width:37.4375rem) {
.c17 {
display: none;
}
@ -12507,7 +12507,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c40 c28 c29 c30"
@ -12542,7 +12542,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c41 c28 c29 c30"

3
consoles/my-joy-instances/src/components/instances/summary.js
View File

@ -8,6 +8,7 @@ import titleCase from 'title-case';
import get from 'lodash.get';
import remcalc from 'remcalc';
import { Field } from 'redux-form';
import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
import {
Card,
@ -71,7 +72,7 @@ const VerticalDivider = styled.div`
align-self: flex-end;
margin: 0 ${remcalc(12)};
@media (max-width: ${remcalc(767)}) {
@media (max-width: ${remcalc(breakpoints.small.upper)}) {
display: none;
}
`;

198
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
View File

@ -203,7 +203,7 @@ exports[`renders <Cns /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -633,10 +633,24 @@ exports[`renders <Cns /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -954,7 +968,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1206,10 +1220,24 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -1566,7 +1594,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -2152,10 +2180,24 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -3169,7 +3211,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -3278,10 +3320,24 @@ exports[`renders <Cns loading /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -3574,7 +3630,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -3916,10 +3972,24 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -4361,7 +4431,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -5044,10 +5114,24 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -6197,7 +6281,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -6664,10 +6748,24 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -7141,7 +7239,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -7616,10 +7714,24 @@ exports[`renders <Cns services /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -8045,7 +8157,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -8297,10 +8409,24 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

320
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
View File

@ -189,7 +189,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -256,7 +256,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -412,10 +411,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -1019,7 +1032,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1086,7 +1099,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -1242,10 +1254,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -1911,7 +1937,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1978,7 +2004,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -2134,10 +2159,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -2741,7 +2780,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -2808,7 +2847,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -2964,10 +3002,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -3586,7 +3638,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -3630,10 +3682,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -3851,7 +3917,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -3895,10 +3961,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -4171,7 +4251,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -4275,7 +4355,6 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -4431,10 +4510,24 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -5070,7 +5163,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -5174,7 +5267,6 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5330,10 +5422,24 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -5923,7 +6029,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -5960,7 +6066,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -6107,10 +6212,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -6359,7 +6478,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -6396,7 +6515,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -6543,10 +6661,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -6897,7 +7029,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -6975,7 +7107,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -7174,10 +7305,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -7728,7 +7873,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -7765,7 +7910,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -7912,10 +8056,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -8164,7 +8322,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -8201,7 +8359,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -8348,10 +8505,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -8702,7 +8873,7 @@ Array [
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -8780,7 +8951,6 @@ Array [
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -8979,10 +9149,24 @@ Array [
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

314
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
View File

@ -156,7 +156,7 @@ exports[`renders <List /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -267,7 +267,6 @@ exports[`renders <List /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -682,21 +681,35 @@ exports[`renders <List /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
@ -1094,7 +1107,7 @@ exports[`renders <List error /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1242,7 +1255,6 @@ exports[`renders <List error /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -1657,21 +1669,35 @@ exports[`renders <List error /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (min-width:37.4375rem) {
.c32 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c33 {
width: 8.125rem;
display: table-cell;
@ -2127,7 +2153,7 @@ exports[`renders <List instances /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -2228,7 +2254,6 @@ exports[`renders <List instances /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -2838,35 +2863,49 @@ exports[`renders <List instances /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@ -4235,14 +4274,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
.c51 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
.c3 {
@ -4412,7 +4451,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5058,42 +5096,70 @@ exports[`renders <List instances selected /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (max-width:37.4375rem) {
.c51 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c51 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c51 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@ -5681,7 +5747,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c55 c13 c56 c57"
@ -5715,7 +5781,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c59 c13 c56 c57"
@ -5754,7 +5820,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c55 c13 c56 c57"
@ -5788,7 +5854,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c59 c13 c56 c57"
@ -5827,7 +5893,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c55 c13 c56 c57"
@ -5877,7 +5943,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c59 c13 c56 c57"
@ -5933,7 +5999,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c61 c13 c56 c57"
@ -5964,7 +6030,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c62 c13 c56 c57"
@ -6807,14 +6873,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
.c51 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
.c3 {
@ -6984,7 +7050,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -7630,42 +7695,70 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (max-width:37.4375rem) {
.c51 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c51 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c51 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@ -8253,7 +8346,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c55 c13 c56 c57"
@ -8287,7 +8380,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c59 c13 c56 c57"
@ -8326,7 +8419,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c55 c13 c56 c57"
@ -8360,7 +8453,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c59 c13 c56 c57"
@ -8399,7 +8492,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c55 c13 c56 c57"
@ -8449,7 +8542,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c59 c13 c56 c57"
@ -8505,7 +8598,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c61 c13 c56 c57"
@ -8536,7 +8629,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c62 c13 c56 c57"
@ -9574,14 +9667,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
.c51 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
.c3 {
@ -9751,7 +9844,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -10397,42 +10489,70 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (max-width:37.4375rem) {
.c51 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c51 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c51 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media only screen and (min-width:37.4375rem) {
.c25 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c26 {
width: 8.125rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c34 {
width: 10rem;
display: table-cell;
}
}
@media only screen and (min-width:47.9375rem) {
@media only screen and (min-width:37.4375rem) {
.c35 {
width: 8.125rem;
display: table-cell;
@ -11020,7 +11140,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c55 c13 c56 c57"
@ -11054,7 +11174,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c59 c13 c56 c57"
@ -11093,7 +11213,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c60 c13 c56 c57"
@ -11127,7 +11247,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c61 c13 c56 c57"
@ -11166,7 +11286,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</div>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c60 c13 c56 c57"
@ -11216,7 +11336,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c61 c13 c56 c57"
@ -11272,7 +11392,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c63 c13 c56 c57"
@ -11303,7 +11423,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c64 c13 c56 c57"
@ -11539,7 +11659,7 @@ exports[`renders <List loading /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -11710,10 +11830,24 @@ exports[`renders <List loading /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

110
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -162,7 +162,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -323,10 +323,24 @@ exports[`renders <Metadata /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -942,7 +956,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1447,10 +1461,24 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -1921,7 +1949,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -2119,10 +2147,24 @@ exports[`renders <Metadata error /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -2475,7 +2517,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -2638,10 +2680,24 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -3469,7 +3525,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -3989,10 +4045,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

88
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
View File

@ -57,7 +57,7 @@ exports[`renders <Networks /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -172,10 +172,24 @@ exports[`renders <Networks /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -580,7 +594,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -669,10 +683,24 @@ exports[`renders <Networks error /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -845,7 +873,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -897,10 +925,24 @@ exports[`renders <Networks loading /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -1063,7 +1105,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1415,10 +1457,24 @@ exports[`renders <Networks networks /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

166
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

@ -71,7 +71,7 @@ exports[`renders <Summary /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@ -114,10 +114,24 @@ exports[`renders <Summary /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -233,7 +247,7 @@ exports[`renders <Summary loading /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@ -276,10 +290,24 @@ exports[`renders <Summary loading /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -344,7 +372,7 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -403,10 +431,24 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -512,7 +554,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@ -592,10 +634,24 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -732,7 +788,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
display: -webkit-box;
display: -webkit-flex;
@ -775,10 +831,24 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -1515,7 +1585,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1860,14 +1930,28 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media (max-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media (max-width:37.4375rem) {
.c19 {
display: none;
}
@ -2134,7 +2218,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c41 c30 c31 c32"
@ -2169,7 +2253,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c42 c30 c31 c32"
@ -3483,7 +3567,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -3828,14 +3912,28 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media (max-width:47.9375rem) {
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@media (max-width:37.4375rem) {
.c19 {
display: none;
}
@ -4102,7 +4200,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
query="only screen and (max-width: 37.4375rem)"
>
<button
className="c41 c30 c31 c32"
@ -4137,7 +4235,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
query="only screen and (min-width: 37.5rem)"
>
<button
className="c42 c30 c31 c32"

176
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

@ -162,7 +162,7 @@ exports[`renders <Tags /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -336,10 +336,24 @@ exports[`renders <Tags /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -959,7 +973,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -1429,10 +1443,24 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -1876,7 +1904,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -2050,10 +2078,24 @@ exports[`renders <Tags editable /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -2695,7 +2737,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -3176,10 +3218,24 @@ exports[`renders <Tags editing /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -4106,7 +4162,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -4587,10 +4643,24 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -5071,7 +5141,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -5245,10 +5315,24 @@ exports[`renders <Tags error /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -5557,7 +5641,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -5720,10 +5804,24 @@ exports[`renders <Tags loading /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -5993,7 +6091,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -6188,10 +6286,24 @@ exports[`renders <Tags tags /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

44
consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
View File

@ -64,7 +64,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
.c4 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
.c10 {
@ -138,10 +138,24 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c4 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c4 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c4 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -302,7 +316,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
.c4 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
.c10 {
@ -376,10 +390,24 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c4 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c4 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c4 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

2
consoles/my-joy-navigation/src/components/header.js
View File

@ -4,7 +4,7 @@ import emotion from 'preact-emotion';
import remcalc from 'remcalc';
import outy from 'outy';
import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
export const Item = emotion('div')`
order: 0;

18
packages/instance-steps/src/image/components.js
View File

@ -13,15 +13,22 @@ import * as Assets from 'joyent-logo-assets';
import {
H3,
P,
FormGroup,
FormGroup as BaseFormGroup,
SectionList as BaseSectionList,
SectionListItem,
SectionListAnchor,
H4 as BaseH4,
Select,
Card as BaseCard
Card as BaseCard,
StyledBreakpoints as breakpoints
} from 'joyent-ui-toolkit';
const imageColSize = {
small: 6,
medium: 4,
large: 3
};
const Version = styled(Select)`
min-width: 100%;
width: ${remcalc(144)};
@ -40,6 +47,11 @@ const SectionList = styled(BaseSectionList)`
const Card = styled(BaseCard)`
border-bottom: 0;
width: 100%;
`;
const FormGroup = styled(BaseFormGroup)`
width: 100%;
`;
const H4 = styled(BaseH4)`
@ -79,7 +91,7 @@ const Image = ({ onClick, active, ...image }) => {
const Logo = Assets[pascalCase(imageName)] || Assets.Placeholder;
return (
<Col md={2} sm={3}>
<Col lg={3} md={4} xs={6}>
<Margin bottom={3}>
<Card id={id} onClick={handleCardClick} active={active} preview>
<Logo

175
packages/instance-steps/src/package/components.js
View File

@ -14,13 +14,13 @@ import {
FormGroup,
Card,
Button,
TableTh,
TableTh as BaseTableTh,
TableTr,
TableThead,
TableThead as BaseTableThead,
Divider,
TableTbody,
Table,
TableTd,
TableTd as BaseTableTd,
Radio,
Checkbox,
FormLabel,
@ -30,6 +30,8 @@ import {
MemoryIcon
} from 'joyent-ui-toolkit';
import { NoPackages } from 'joyent-logo-assets';
import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
import { EmptyState } from 'joyent-icons';
const GroupIcons = {
@ -60,6 +62,67 @@ const FullWidthCard = styled(Card)`
`};
`;
const TableThead = styled(BaseTableThead)`
${is('smallScreen')`
background-color: transparent;
`};
`;
const TableTh = styled(BaseTableTh)`
@media only screen and (min-width: ${remcalc(
breakpoints.medium.lower
)}) and (max-width: ${remcalc(700)}) {
&:not(:first-child) {
width: auto;
}
padding: 0 ${remcalc(3)};
}
${is('smallScreen')`
border: none;
color: ${props => props.theme.greyDark};
font-size: ${remcalc(13)};
height: auto;
padding: 0;
`};
`;
const TableTd = styled(BaseTableTd)`
@media only screen and (min-width: ${remcalc(
breakpoints.medium.lower
)}) and (max-width: ${remcalc(700)}) {
&:not(:first-child) {
width: auto;
}
padding: 0 ${remcalc(3)};
}
${is('smallScreen')`
border: none;
font-size: ${remcalc(15)};
height: auto;
padding: ${remcalc(4)} 0;
`};
`;
const FormItem = styled('form')`
border: 1px solid ${props => props.theme.grey};
border-radius: 4px;
${is('selected')`
border-color: ${props => props.theme.primary};
background-color: rgba(59,70,204,0.05);
`};
`;
const PackageSpecs = styled('div')`
border-top: 1px solid ${props => props.theme.grey};
${is('selected')`
border-color: ${props => props.theme.primary};
`};
`;
export const Filters = ({ onResetFilters }) => (
<Margin bottom={3}>
<Margin bottom={3}>
@ -129,6 +192,112 @@ export const Filters = ({ onResetFilters }) => (
</Margin>
</Margin>
);
export const MobilePackage = ({
selected = false,
id,
name,
group,
memory,
price,
vcpus,
disk,
ssd,
hasVms,
sortBy,
onRowClick
}) => (
<FormItem selected={selected}>
<Padding all={2} onClick={() => onRowClick(id)}>
<FormGroup name="package" value={id} type="radio" field={Field} fluid>
<Radio onBlur={null} noMargin>
<Flex alignCenter>
<Margin left={2} right={1}>
{GroupIcons[group]}
</Margin>
<Margin left={1} right={2}>
<FormLabel style={{ fontWeight: '600' }} noMargin actionable>
{`${name} `}
{ssd && <Sup badge>SSD</Sup>}
</FormLabel>
</Margin>
</Flex>
</Radio>
</FormGroup>
</Padding>
<PackageSpecs selected={selected}>
<Padding top={1} left={2} bottom={1}>
<Table>
<TableThead smallScreen>
<TableTr>
<TableTh left smallScreen>
<Padding top={1}>
<span>RAM </span>
</Padding>
</TableTh>
<TableTh left smallScreen>
<Padding top={1}>
<span>Disk </span>
</Padding>
</TableTh>
{hasVms && (
<TableTh left smallScreen>
<Padding top={1}>
<span>vCPU</span>
</Padding>
</TableTh>
)}
<TableTh left smallScreen>
<Padding top={1}>
<span>$/hour</span>
</Padding>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
<TableTrActionable onClick={() => onRowClick(id)}>
<TableTd
left
selected={selected}
bold={sortBy === 'memory'}
smallScreen
>
{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
</TableTd>
<TableTd
left
selected={selected}
bold={sortBy === 'disk'}
smallScreen
>
<Margin inline right={1}>
{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
</Margin>
</TableTd>
{hasVms && (
<TableTd
left
bold={sortBy === 'vcpus'}
selected={selected}
smallScreen
>
{vcpus}
</TableTd>
)}
<TableTd
left
bold={sortBy === 'price'}
selected={selected}
smallScreen
>
{fourDecimals(price)}
</TableTd>
</TableTrActionable>
</TableTbody>
</Table>
</Padding>
</PackageSpecs>
</FormItem>
);
export const Package = ({
selected = false,

26
packages/instance-steps/src/package/index.js
View File

@ -23,10 +23,19 @@ import Step, {
import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
import { Filters, Packages, Package, Overview } from './components';
import {
Filters,
Packages,
Package,
MobilePackage,
Overview
} from './components';
import getPackages from '../graphql/get-packages.gql';
import priceData from './prices.json';
import { Forms, Values } from '../constants';
import { QueryBreakpoints } from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const { IC_PKG_F_SELECT, IC_PKG_F_FILTER } = Forms;
@ -84,6 +93,20 @@ const PackageComponent = ({
<StatusLoader />
) : (
<Fragment>
<SmallOnly>
{packages.map(({ id, ...pkg }) => (
<MobilePackage
key={id}
id={id}
selected={selected.id === id}
hasVms={hasVms}
onRowClick={handleRowClick}
sortBy={sortBy}
{...pkg}
/>
))}
</SmallOnly>
<Medium>
<Packages
{...props}
hasVms={hasVms}
@ -104,6 +127,7 @@ const PackageComponent = ({
/>
))}
</Packages>
</Medium>
<Margin top="4">
<Button
id={'next-button-packages'}

2
packages/instance-steps/src/tags/index.js
View File

@ -69,7 +69,7 @@ const TagsContainer = ({
...props
}) => (
<Step name="tags" getValue={handleGetValue} {...props}>
<StepHeader icon={<TagsIcon />}>Tags</StepHeader>
<StepHeader icon={1 === 0 && <TagsIcon />}>Tags</StepHeader>
<StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
Tags can be used to identify your instances, group multiple instances
together, define firewall and affinity rules, and more.

3
packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
View File

@ -4941,7 +4941,6 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5196,7 +5195,6 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5451,7 +5449,6 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;

6
packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
View File

@ -340,7 +340,6 @@ exports[`renders <Network /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -1251,7 +1250,6 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -2175,7 +2173,6 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -3149,7 +3146,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -4313,7 +4309,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -5610,7 +5605,6 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;

22
packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
View File

@ -91,7 +91,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
.c4 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
.c0 {
@ -125,10 +125,24 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c4 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c4 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c4 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

18
packages/ui-toolkit/src/breakpoints/screens.js
View File

@ -2,33 +2,33 @@ import remcalc from 'remcalc';
export const breakpoints = {
small: {
upper: 767
upper: 599
},
medium: {
upper: 1023,
lower: 768
upper: 999,
lower: 600
},
large: {
upper: 1199,
lower: 1024
upper: 1399,
lower: 1000
},
xlarge: {
lower: 1200
lower: 1400
}
};
export default {
// >= 768px
// >= 599px
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
// >= 1024px
// >= 999px
mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
and (max-width: ${remcalc(breakpoints.medium.upper)})`,
mediumDown: `only screen and (max-width: ${remcalc(
breakpoints.medium.upper
)})`,
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
// >= 1200px
// >= 1400px
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
and (max-width: ${remcalc(breakpoints.large.upper)})`,
largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,

2
packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
View File

@ -74,7 +74,6 @@ exports[`Form Checkbox 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;
@ -485,7 +484,6 @@ exports[`Form Radio 1`] = `
height: 1.125rem;
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255,255,255);
box-shadow: none;

1
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -45,7 +45,6 @@ const Label = styled.label`
height: ${remcalc(18)};
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255, 255, 255);

3
packages/ui-toolkit/src/index.js
View File

@ -21,7 +21,8 @@ export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
export {
styled as StyledBreakpoints,
query as QueryBreakpoints
query as QueryBreakpoints,
breakpoints as ValueBreakpoints
} from './breakpoints';
export {

66
packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap
View File

@ -30,7 +30,7 @@ exports[`Layout ViewContainer 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
}
@media only screen and (min-width:48em) {
@ -51,10 +51,24 @@ exports[`Layout ViewContainer 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -72,7 +86,7 @@ exports[`Layout ViewContainer center 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -114,10 +128,24 @@ exports[`Layout ViewContainer center 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}
@ -155,7 +183,7 @@ exports[`Layout ViewContainer main 1`] = `
.c0 {
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
max-width: 78.75rem;
padding-bottom: 1.125rem;
}
@ -177,10 +205,24 @@ exports[`Layout ViewContainer main 1`] = `
}
}
@media only screen and (max-width:47.9375rem) {
@media only screen and (max-width:37.4375rem) {
.c0 {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
.c0 {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
}
@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
.c0 {
padding-left: 4.375rem;
padding-right: 4.375rem;
}
}

2
packages/ui-toolkit/src/layout/__tests__/layout.spec.js
View File

@ -32,7 +32,7 @@ describe('Layout', () => {
.toJSON();
expect(tree).toMatchSnapshot();
expect(tree).toHaveStyleRule('max-width', remcalc(1000));
expect(tree).toHaveStyleRule('max-width', remcalc(1260));
});
test('ViewContainer fluid', () => {

16
packages/ui-toolkit/src/layout/view-container.js
View File

@ -15,11 +15,21 @@ export default styled(Grid)`
`};
${isNot('fluid')`
max-width: ${remcalc(1000)};
max-width: ${remcalc(1260)};
${breakpoints.smallOnly`
padding-left: ${remcalc(6)};
padding-right: ${remcalc(6)};
padding-left: ${remcalc(12)};
padding-right: ${remcalc(12)};
`};
${breakpoints.mediumOnly`
padding-left: ${remcalc(30)};
padding-right: ${remcalc(30)};
`};
${breakpoints.largeOnly`
padding-left: ${remcalc(70)};
padding-right: ${remcalc(70)};
`};
`};

6
packages/ui-toolkit/src/styleguide/parallax.js
View File

@ -92,8 +92,8 @@ export default class extends Component {
skipParallax = () => {
if (
this.state.show &&
window.scrollY < document.getElementsByTagName('header')[0].offsetTop
window.scrollY < document.getElementsByTagName('header')[0].offsetTop &&
this.state.show
) {
window.scroll({
top: document.getElementsByTagName('header')[0].offsetTop,
@ -106,7 +106,7 @@ export default class extends Component {
checkpoint = () => {
if (isScrolledOutsideView()) {
window.removeEventListener('scroll', this.checkpoint);
this.setState({ show: false });
setTimeout(() => this.setState({ show: false }), 10);
}
};