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 distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import titleCase from 'title-case'; import titleCase from 'title-case';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
import { import {
Card, Card,
@ -37,7 +38,7 @@ const VerticalDivider = styled.div`
align-self: flex-end; align-self: flex-end;
margin: 0 ${remcalc(18)}; margin: 0 ${remcalc(18)};
@media (max-width: ${remcalc(767)}) { @media (max-width: ${remcalc(breakpoints.small.upper)}) {
display: none; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
.c4 { .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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -483,14 +482,14 @@ exports[`renders <InstanceList /> without throwing 1`] = `
margin: 0 0.1875rem; margin: 0 0.1875rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -812,7 +811,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -1201,14 +1199,14 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
margin: 0 0.1875rem; margin: 0 0.1875rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -1530,7 +1528,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -1919,14 +1916,14 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
margin: 0 0.1875rem; margin: 0 0.1875rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -2248,7 +2245,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -2637,14 +2633,14 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
margin: 0 0.1875rem; margin: 0 0.1875rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -2966,7 +2962,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -3355,14 +3350,14 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
margin: 0 0.1875rem; margin: 0 0.1875rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -3684,7 +3679,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -4073,14 +4067,14 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
margin: 0 0.1875rem; margin: 0 0.1875rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -4452,7 +4446,6 @@ exports[`renders <Item /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -4679,14 +4672,14 @@ exports[`renders <Item /> without throwing 1`] = `
height: 3rem; height: 3rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c14 { .c14 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -4980,7 +4973,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -5207,14 +5199,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
height: 3rem; height: 3rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c14 { .c14 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -5510,7 +5502,6 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -5737,14 +5728,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
height: 3rem; height: 3rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c13 { .c13 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c14 { .c14 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -6027,7 +6018,6 @@ exports[`renders <Item mutating /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -6252,14 +6242,14 @@ exports[`renders <Item mutating /> without throwing 1`] = `
display: block; display: block;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c16 { .c16 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c17 { .c17 {
width: 8.125rem; width: 8.125rem;
display: table-cell; 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; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -360,7 +359,7 @@ Array [
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
@ -976,7 +975,6 @@ exports[`renders <Item /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -1150,7 +1148,7 @@ exports[`renders <Item /> without throwing 1`] = `
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c9 { .c9 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
@ -1371,7 +1369,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -1545,7 +1542,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c9 { .c9 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
@ -1625,7 +1622,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
name="td" name="td"
selected={undefined} selected={undefined}
> >
5 months 6 months
</td> </td>
<td <td
className="c10" className="c10"
@ -1967,7 +1964,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -2252,7 +2248,7 @@ Array [
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
@ -2842,7 +2838,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -3127,7 +3122,7 @@ Array [
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
@ -3717,7 +3712,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -4002,7 +3996,7 @@ Array [
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
@ -4592,7 +4586,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -4877,7 +4870,7 @@ Array [
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
@ -5467,7 +5460,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -5752,7 +5744,7 @@ Array [
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c12 { .c12 {
width: 10rem; width: 10rem;
display: table-cell; 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 { .c17 {
display: none; display: none;
} }
@ -1509,7 +1509,7 @@ exports[`renders <Summary /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c40 c28 c29 c30" className="c40 c28 c29 c30"
@ -1544,7 +1544,7 @@ exports[`renders <Summary /> without throwing 1`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c41 c28 c29 c30" 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 { .c17 {
display: none; display: none;
} }
@ -3121,7 +3121,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c39 c28 c29 c30" className="c39 c28 c29 c30"
@ -3156,7 +3156,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c40 c28 c29 c30" 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 { .c17 {
display: none; display: none;
} }
@ -5048,7 +5048,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c39 c28 c29 c30" className="c39 c28 c29 c30"
@ -5083,7 +5083,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c40 c28 c29 c30" 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 { .c17 {
display: none; display: none;
} }
@ -7261,7 +7261,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c43 c28 c29 c30" className="c43 c28 c29 c30"
@ -7306,7 +7306,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c44 c28 c29 c30" 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 { .c17 {
display: none; display: none;
} }
@ -8967,7 +8967,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c39 c28 c29 c30" className="c39 c28 c29 c30"
@ -9002,7 +9002,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c40 c28 c29 c30" 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 { .c17 {
display: none; display: none;
} }
@ -10656,7 +10656,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c39 c28 c29 c30" className="c39 c28 c29 c30"
@ -10691,7 +10691,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c40 c28 c29 c30" 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 { .c17 {
display: none; display: none;
} }
@ -12507,7 +12507,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c40 c28 c29 c30" className="c40 c28 c29 c30"
@ -12542,7 +12542,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c41 c28 c29 c30" 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 get from 'lodash.get';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
import { import {
Card, Card,
@ -71,7 +72,7 @@ const VerticalDivider = styled.div`
align-self: flex-end; align-self: flex-end;
margin: 0 ${remcalc(12)}; margin: 0 ${remcalc(12)};
@media (max-width: ${remcalc(767)}) { @media (max-width: ${remcalc(breakpoints.small.upper)}) {
display: none; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -256,7 +256,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -1086,7 +1099,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -1978,7 +2004,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -2808,7 +2847,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -4275,7 +4355,6 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -5174,7 +5267,6 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -5960,7 +6066,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -6396,7 +6515,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -6975,7 +7107,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -7765,7 +7910,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -8201,7 +8359,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -8780,7 +8951,6 @@ Array [
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -267,7 +267,6 @@ exports[`renders <List /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c25 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c26 { .c26 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -1094,7 +1107,7 @@ exports[`renders <List error /> without throwing 1`] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -1242,7 +1255,6 @@ exports[`renders <List error /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c32 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c33 { .c33 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -2127,7 +2153,7 @@ exports[`renders <List instances /> without throwing 1`] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
@ -2228,7 +2254,6 @@ exports[`renders <List instances /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c25 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c26 { .c26 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c34 { .c34 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c35 { .c35 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -4235,14 +4274,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
.c51 { .c51 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
.c3 { .c3 {
@ -4412,7 +4451,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c51 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c25 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c26 { .c26 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c34 { .c34 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c35 { .c35 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -5681,7 +5747,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c55 c13 c56 c57" className="c55 c13 c56 c57"
@ -5715,7 +5781,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c59 c13 c56 c57" className="c59 c13 c56 c57"
@ -5754,7 +5820,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</div> </div>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c55 c13 c56 c57" className="c55 c13 c56 c57"
@ -5788,7 +5854,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c59 c13 c56 c57" className="c59 c13 c56 c57"
@ -5827,7 +5893,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</div> </div>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c55 c13 c56 c57" className="c55 c13 c56 c57"
@ -5877,7 +5943,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c59 c13 c56 c57" className="c59 c13 c56 c57"
@ -5933,7 +5999,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c61 c13 c56 c57" className="c61 c13 c56 c57"
@ -5964,7 +6030,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c62 c13 c56 c57" className="c62 c13 c56 c57"
@ -6807,14 +6873,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
.c51 { .c51 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
.c3 { .c3 {
@ -6984,7 +7050,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c51 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c25 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c26 { .c26 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c34 { .c34 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c35 { .c35 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -8253,7 +8346,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c55 c13 c56 c57" className="c55 c13 c56 c57"
@ -8287,7 +8380,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c59 c13 c56 c57" className="c59 c13 c56 c57"
@ -8326,7 +8419,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</div> </div>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c55 c13 c56 c57" className="c55 c13 c56 c57"
@ -8360,7 +8453,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c59 c13 c56 c57" className="c59 c13 c56 c57"
@ -8399,7 +8492,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</div> </div>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c55 c13 c56 c57" className="c55 c13 c56 c57"
@ -8449,7 +8542,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c59 c13 c56 c57" className="c59 c13 c56 c57"
@ -8505,7 +8598,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c61 c13 c56 c57" className="c61 c13 c56 c57"
@ -8536,7 +8629,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c62 c13 c56 c57" className="c62 c13 c56 c57"
@ -9574,14 +9667,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
} }
.c51 { .c51 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
.c3 { .c3 {
@ -9751,7 +9844,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c51 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c25 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c26 { .c26 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c34 { .c34 {
width: 10rem; width: 10rem;
display: table-cell; display: table-cell;
} }
} }
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:37.4375rem) {
.c35 { .c35 {
width: 8.125rem; width: 8.125rem;
display: table-cell; display: table-cell;
@ -11020,7 +11140,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c55 c13 c56 c57" className="c55 c13 c56 c57"
@ -11054,7 +11174,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c59 c13 c56 c57" className="c59 c13 c56 c57"
@ -11093,7 +11213,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</div> </div>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c60 c13 c56 c57" className="c60 c13 c56 c57"
@ -11127,7 +11247,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c61 c13 c56 c57" className="c61 c13 c56 c57"
@ -11166,7 +11286,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</div> </div>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c60 c13 c56 c57" className="c60 c13 c56 c57"
@ -11216,7 +11336,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c61 c13 c56 c57" className="c61 c13 c56 c57"
@ -11272,7 +11392,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c63 c13 c56 c57" className="c63 c13 c56 c57"
@ -11303,7 +11423,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c64 c13 c56 c57" className="c64 c13 c56 c57"
@ -11539,7 +11659,7 @@ exports[`renders <List loading /> without throwing 1`] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c19 {
display: none; display: none;
} }
@ -2134,7 +2218,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c41 c30 c31 c32" className="c41 c30 c31 c32"
@ -2169,7 +2253,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c42 c30 c31 c32" className="c42 c30 c31 c32"
@ -3483,7 +3567,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c19 {
display: none; display: none;
} }
@ -4102,7 +4200,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
> >
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)" query="only screen and (max-width: 37.4375rem)"
> >
<button <button
className="c41 c30 c31 c32" className="c41 c30 c31 c32"
@ -4137,7 +4235,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
</span> </span>
<span <span
name="react-responsive-mock" name="react-responsive-mock"
query="only screen and (min-width: 48rem)" query="only screen and (min-width: 37.5rem)"
> >
<button <button
className="c42 c30 c31 c32" 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c4 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
.c10 { .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 { .c4 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c4 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
.c10 { .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 { .c4 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 remcalc from 'remcalc';
import outy from 'outy'; 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')` export const Item = emotion('div')`
order: 0; order: 0;

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

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

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

@ -14,13 +14,13 @@ import {
FormGroup, FormGroup,
Card, Card,
Button, Button,
TableTh, TableTh as BaseTableTh,
TableTr, TableTr,
TableThead, TableThead as BaseTableThead,
Divider, Divider,
TableTbody, TableTbody,
Table, Table,
TableTd, TableTd as BaseTableTd,
Radio, Radio,
Checkbox, Checkbox,
FormLabel, FormLabel,
@ -30,6 +30,8 @@ import {
MemoryIcon MemoryIcon
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import { NoPackages } from 'joyent-logo-assets';
import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
import { EmptyState } from 'joyent-icons'; import { EmptyState } from 'joyent-icons';
const GroupIcons = { 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 }) => ( export const Filters = ({ onResetFilters }) => (
<Margin bottom={3}> <Margin bottom={3}>
<Margin bottom={3}> <Margin bottom={3}>
@ -129,6 +192,112 @@ export const Filters = ({ onResetFilters }) => (
</Margin> </Margin>
</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 = ({ export const Package = ({
selected = false, selected = false,

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

@ -23,10 +23,19 @@ import Step, {
import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit'; 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 getPackages from '../graphql/get-packages.gql';
import priceData from './prices.json'; import priceData from './prices.json';
import { Forms, Values } from '../constants'; 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; const { IC_PKG_F_SELECT, IC_PKG_F_FILTER } = Forms;
@ -84,16 +93,9 @@ const PackageComponent = ({
<StatusLoader /> <StatusLoader />
) : ( ) : (
<Fragment> <Fragment>
<Packages <SmallOnly>
{...props}
hasVms={hasVms}
sortBy={sortBy}
sortOrder={sortOrder}
onSortBy={handleSortBy}
packages={packages.length}
>
{packages.map(({ id, ...pkg }) => ( {packages.map(({ id, ...pkg }) => (
<Package <MobilePackage
key={id} key={id}
id={id} id={id}
selected={selected.id === id} selected={selected.id === id}
@ -103,7 +105,29 @@ const PackageComponent = ({
{...pkg} {...pkg}
/> />
))} ))}
</Packages> </SmallOnly>
<Medium>
<Packages
{...props}
hasVms={hasVms}
sortBy={sortBy}
sortOrder={sortOrder}
onSortBy={handleSortBy}
packages={packages.length}
>
{packages.map(({ id, ...pkg }) => (
<Package
key={id}
id={id}
selected={selected.id === id}
hasVms={hasVms}
onRowClick={handleRowClick}
sortBy={sortBy}
{...pkg}
/>
))}
</Packages>
</Medium>
<Margin top="4"> <Margin top="4">
<Button <Button
id={'next-button-packages'} id={'next-button-packages'}

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

@ -69,7 +69,7 @@ const TagsContainer = ({
...props ...props
}) => ( }) => (
<Step name="tags" getValue={handleGetValue} {...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"> <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
Tags can be used to identify your instances, group multiple instances Tags can be used to identify your instances, group multiple instances
together, define firewall and affinity rules, and more. 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; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -5196,7 +5195,6 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -5451,7 +5449,6 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -1251,7 +1250,6 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -2175,7 +2173,6 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -3149,7 +3146,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -4313,7 +4309,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -5610,7 +5605,6 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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 { .c4 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
.c0 { .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 { .c4 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 = { export const breakpoints = {
small: { small: {
upper: 767 upper: 599
}, },
medium: { medium: {
upper: 1023, upper: 999,
lower: 768 lower: 600
}, },
large: { large: {
upper: 1199, upper: 1399,
lower: 1024 lower: 1000
}, },
xlarge: { xlarge: {
lower: 1200 lower: 1400
} }
}; };
export default { export default {
// >= 768px // >= 599px
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`, smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
small: `only screen and (min-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)}) mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
and (max-width: ${remcalc(breakpoints.medium.upper)})`, and (max-width: ${remcalc(breakpoints.medium.upper)})`,
mediumDown: `only screen and (max-width: ${remcalc( mediumDown: `only screen and (max-width: ${remcalc(
breakpoints.medium.upper breakpoints.medium.upper
)})`, )})`,
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`, medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
// >= 1200px // >= 1400px
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)}) largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
and (max-width: ${remcalc(breakpoints.large.upper)})`, and (max-width: ${remcalc(breakpoints.large.upper)})`,
largeDown: `only screen 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; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; box-shadow: none;
@ -485,7 +484,6 @@ exports[`Form Radio 1`] = `
height: 1.125rem; height: 1.125rem;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
box-shadow: none; 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)}; height: ${remcalc(18)};
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
right: 0;
cursor: pointer; cursor: pointer;
background-color: rgb(255, 255, 255); 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 { export {
styled as StyledBreakpoints, styled as StyledBreakpoints,
query as QueryBreakpoints query as QueryBreakpoints,
breakpoints as ValueBreakpoints
} from './breakpoints'; } from './breakpoints';
export { export {

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

@ -30,7 +30,7 @@ exports[`Layout ViewContainer 1`] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
} }
@media only screen and (min-width:48em) { @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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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 { .c0 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 62.5rem; max-width: 78.75rem;
padding-bottom: 1.125rem; 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 { .c0 {
padding-left: 0.375rem; padding-left: 0.75rem;
padding-right: 0.375rem; 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(); .toJSON();
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
expect(tree).toHaveStyleRule('max-width', remcalc(1000)); expect(tree).toHaveStyleRule('max-width', remcalc(1260));
}); });
test('ViewContainer fluid', () => { test('ViewContainer fluid', () => {

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

@ -15,11 +15,21 @@ export default styled(Grid)`
`}; `};
${isNot('fluid')` ${isNot('fluid')`
max-width: ${remcalc(1000)}; max-width: ${remcalc(1260)};
${breakpoints.smallOnly` ${breakpoints.smallOnly`
padding-left: ${remcalc(6)}; padding-left: ${remcalc(12)};
padding-right: ${remcalc(6)}; 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 = () => { skipParallax = () => {
if ( if (
this.state.show && window.scrollY < document.getElementsByTagName('header')[0].offsetTop &&
window.scrollY < document.getElementsByTagName('header')[0].offsetTop this.state.show
) { ) {
window.scroll({ window.scroll({
top: document.getElementsByTagName('header')[0].offsetTop, top: document.getElementsByTagName('header')[0].offsetTop,
@ -106,7 +106,7 @@ export default class extends Component {
checkpoint = () => { checkpoint = () => {
if (isScrolledOutsideView()) { if (isScrolledOutsideView()) {
window.removeEventListener('scroll', this.checkpoint); window.removeEventListener('scroll', this.checkpoint);
this.setState({ show: false }); setTimeout(() => this.setState({ show: false }), 10);
} }
}; };