feat(my-joyent): add group filtering
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
c234b70bf7
commit
5b1059882b
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:3069/",
|
||||
"webRoot": "${workspaceRoot}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
// temp
|
||||
"no-undef": 1,
|
||||
"no-debugger": 1,
|
||||
"no-negated-condition": 0
|
||||
"no-negated-condition": 0,
|
||||
"jsx-a11y/href-no-hash": 0
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,20 +5,17 @@
|
|||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "build/",
|
||||
"scripts": {
|
||||
"dev":
|
||||
"REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
|
||||
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
|
||||
"start": "PORT=3069 react-scripts start",
|
||||
"build": "NODE_ENV=production react-scripts build",
|
||||
"lint:css": "stylelint './src/**/*.js'",
|
||||
"lint:js": "eslint . --fix",
|
||||
"lint": "redrun -s lint:*",
|
||||
"lint-ci:css": "stylelint './src/**/*.js'",
|
||||
"lint-ci:js":
|
||||
"eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
|
||||
"lint-ci:js": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
|
||||
"lint-ci": "redrun -p lint-ci:*",
|
||||
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
||||
"test-ci":
|
||||
"echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
|
||||
"test-ci": "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
|
||||
"prepublish": "node scripts/postinstall"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -26,6 +23,7 @@
|
|||
"graphql-tag": "^2.4.2",
|
||||
"jest-cli": "^21.0.1",
|
||||
"joyent-ui-toolkit": "^2.0.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"normalized-styled-components": "^1.0.9",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^15.6.1",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,179 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Filters /> without throwing 1`] = `
|
||||
.c0 {
|
||||
.c6 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5625rem 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c6::-moz-focus-inner,
|
||||
.c6[type='button']::-moz-focus-inner,
|
||||
.c6[type='reset']::-moz-focus-inner,
|
||||
.c6[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c6:-moz-focusring,
|
||||
.c6[type='button']:-moz-focusring,
|
||||
.c6[type='reset']:-moz-focusring,
|
||||
.c6[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c6:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c6:hover {
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c6:active,
|
||||
.c6:active:hover,
|
||||
.c6:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c6[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c6 + button {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
padding: 0.5625rem 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c7::-moz-focus-inner,
|
||||
.c7[type='button']::-moz-focus-inner,
|
||||
.c7[type='reset']::-moz-focus-inner,
|
||||
.c7[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c7:-moz-focusring,
|
||||
.c7[type='button']:-moz-focusring,
|
||||
.c7[type='reset']:-moz-focusring,
|
||||
.c7[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c7:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c7:hover {
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c7:active,
|
||||
.c7:active:hover,
|
||||
.c7:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c7[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c7 + button {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
|
|
@ -17,7 +183,6 @@ exports[`renders <Filters /> without throwing 1`] = `
|
|||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -114,7 +279,6 @@ exports[`renders <Filters /> without throwing 1`] = `
|
|||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c2 > div {
|
||||
|
|
@ -127,278 +291,40 @@ exports[`renders <Filters /> without throwing 1`] = `
|
|||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c0 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-basis: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
<label
|
||||
className="c0"
|
||||
htmlFor=""
|
||||
>
|
||||
Choose a package
|
||||
</label>
|
||||
.c3 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c1 .input-range {
|
||||
position: relative;
|
||||
width: calc(100% - 18px);
|
||||
margin: auto;
|
||||
min-height: 0.625rem;
|
||||
}
|
||||
|
||||
.c1 .slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #bdbdbd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
-webkit-transform: translateY(-50%) translateX(-50%);
|
||||
-ms-transform: translateY(-50%) translateX(-50%);
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.c1 .slider::active {
|
||||
-webkit-transform: scale(1.3);
|
||||
-ms-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.c1 .slider::focus {
|
||||
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
|
||||
}
|
||||
|
||||
.c1 .disabled .track {
|
||||
background: #D8D8D8;
|
||||
}
|
||||
|
||||
.c1 .disabled .slider {
|
||||
background: #CCC;
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: none;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.c1 .min,
|
||||
.c1 .max {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c1 .value {
|
||||
top: 0.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c1 .value .label-container {
|
||||
font-weight: 600;
|
||||
font-size: 0.625rem;
|
||||
color: #464646;
|
||||
left: -50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c1 .track {
|
||||
background: #D8D8D8;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c1 .active-track {
|
||||
background: #364ACD;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
.c5 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c0 > div {
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.c0 > div:not(:last-child) {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
<section
|
||||
className="c0"
|
||||
>
|
||||
.c2 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c0 .input-range {
|
||||
position: relative;
|
||||
width: calc(100% - 18px);
|
||||
margin: auto;
|
||||
min-height: 0.625rem;
|
||||
}
|
||||
|
||||
.c0 .slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #bdbdbd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
-webkit-transform: translateY(-50%) translateX(-50%);
|
||||
-ms-transform: translateY(-50%) translateX(-50%);
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.c0 .slider::active {
|
||||
-webkit-transform: scale(1.3);
|
||||
-ms-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.c0 .slider::focus {
|
||||
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
|
||||
}
|
||||
|
||||
.c0 .disabled .track {
|
||||
background: #D8D8D8;
|
||||
}
|
||||
|
||||
.c0 .disabled .slider {
|
||||
background: #CCC;
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: none;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.c0 .min,
|
||||
.c0 .max {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c0 .value {
|
||||
top: 0.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c0 .value .label-container {
|
||||
font-weight: 600;
|
||||
font-size: 0.625rem;
|
||||
color: #464646;
|
||||
left: -50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .track {
|
||||
background: #D8D8D8;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .active-track {
|
||||
background: #364ACD;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
<label
|
||||
className="c0 c1"
|
||||
<section
|
||||
className="c0"
|
||||
>
|
||||
<label
|
||||
className="c1"
|
||||
htmlFor=""
|
||||
>
|
||||
Choose a package
|
||||
</label>
|
||||
<section
|
||||
className="c2"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<label
|
||||
className="c4 c1"
|
||||
htmlFor=""
|
||||
>
|
||||
GB RAM
|
||||
|
|
@ -512,127 +438,11 @@ exports[`renders <Filters /> without throwing 1`] = `
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
.c2 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c0 .input-range {
|
||||
position: relative;
|
||||
width: calc(100% - 18px);
|
||||
margin: auto;
|
||||
min-height: 0.625rem;
|
||||
}
|
||||
|
||||
.c0 .slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #bdbdbd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
-webkit-transform: translateY(-50%) translateX(-50%);
|
||||
-ms-transform: translateY(-50%) translateX(-50%);
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.c0 .slider::active {
|
||||
-webkit-transform: scale(1.3);
|
||||
-ms-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.c0 .slider::focus {
|
||||
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
|
||||
}
|
||||
|
||||
.c0 .disabled .track {
|
||||
background: #D8D8D8;
|
||||
}
|
||||
|
||||
.c0 .disabled .slider {
|
||||
background: #CCC;
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: none;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.c0 .min,
|
||||
.c0 .max {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c0 .value {
|
||||
top: 0.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c0 .value .label-container {
|
||||
font-weight: 600;
|
||||
font-size: 0.625rem;
|
||||
color: #464646;
|
||||
left: -50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .track {
|
||||
background: #D8D8D8;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .active-track {
|
||||
background: #364ACD;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<label
|
||||
className="c0 c1"
|
||||
<label
|
||||
className="c4 c1"
|
||||
htmlFor=""
|
||||
>
|
||||
vCPUs
|
||||
|
|
@ -746,127 +556,11 @@ exports[`renders <Filters /> without throwing 1`] = `
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
.c2 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c0 .input-range {
|
||||
position: relative;
|
||||
width: calc(100% - 18px);
|
||||
margin: auto;
|
||||
min-height: 0.625rem;
|
||||
}
|
||||
|
||||
.c0 .slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #bdbdbd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
-webkit-transform: translateY(-50%) translateX(-50%);
|
||||
-ms-transform: translateY(-50%) translateX(-50%);
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.c0 .slider::active {
|
||||
-webkit-transform: scale(1.3);
|
||||
-ms-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.c0 .slider::focus {
|
||||
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
|
||||
}
|
||||
|
||||
.c0 .disabled .track {
|
||||
background: #D8D8D8;
|
||||
}
|
||||
|
||||
.c0 .disabled .slider {
|
||||
background: #CCC;
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: none;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.c0 .min,
|
||||
.c0 .max {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c0 .value {
|
||||
top: 0.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c0 .value .label-container {
|
||||
font-weight: 600;
|
||||
font-size: 0.625rem;
|
||||
color: #464646;
|
||||
left: -50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .track {
|
||||
background: #D8D8D8;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .active-track {
|
||||
background: #364ACD;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<label
|
||||
className="c0 c1"
|
||||
<label
|
||||
className="c4 c1"
|
||||
htmlFor=""
|
||||
>
|
||||
TB Disk
|
||||
|
|
@ -980,127 +674,11 @@ exports[`renders <Filters /> without throwing 1`] = `
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
.c2 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c0 .input-range {
|
||||
position: relative;
|
||||
width: calc(100% - 18px);
|
||||
margin: auto;
|
||||
min-height: 0.625rem;
|
||||
}
|
||||
|
||||
.c0 .slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #bdbdbd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
-webkit-transform: translateY(-50%) translateX(-50%);
|
||||
-ms-transform: translateY(-50%) translateX(-50%);
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.c0 .slider::active {
|
||||
-webkit-transform: scale(1.3);
|
||||
-ms-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.c0 .slider::focus {
|
||||
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
|
||||
}
|
||||
|
||||
.c0 .disabled .track {
|
||||
background: #D8D8D8;
|
||||
}
|
||||
|
||||
.c0 .disabled .slider {
|
||||
background: #CCC;
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: none;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.c0 .min,
|
||||
.c0 .max {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c0 .value {
|
||||
top: 0.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c0 .value .label-container {
|
||||
font-weight: 600;
|
||||
font-size: 0.625rem;
|
||||
color: #464646;
|
||||
left: -50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .track {
|
||||
background: #D8D8D8;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 0.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0 .active-track {
|
||||
background: #364ACD;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: ;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
<label
|
||||
className="c0 c1"
|
||||
<label
|
||||
className="c4 c1"
|
||||
htmlFor=""
|
||||
>
|
||||
$/hr
|
||||
|
|
@ -1215,5 +793,46 @@ exports[`renders <Filters /> without throwing 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section
|
||||
className="c5"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
className="c6"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</button>
|
||||
<button
|
||||
className="c6"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
Memory Optimized
|
||||
</button>
|
||||
<button
|
||||
className="c6"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
General Purpose
|
||||
</button>
|
||||
<button
|
||||
className="c6"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
Storage Optimized
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="c7"
|
||||
disabled={false}
|
||||
onClick={undefined}
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</section>
|
||||
</section>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,72 +1,66 @@
|
|||
import React from 'react';
|
||||
import { Col } from 'react-styled-flexboxgrid';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import { Slider, FormLabel } from 'joyent-ui-toolkit';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import { FormLabel, Button } from 'joyent-ui-toolkit';
|
||||
import { default as defaultState } from '@state/state';
|
||||
|
||||
const FilterWrapper = styled.section`
|
||||
import Sliders from '@components/sliders';
|
||||
|
||||
const GroupWrapper = styled.section`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: ${remcalc(36)};
|
||||
`;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: ${remcalc(36)};
|
||||
}
|
||||
}
|
||||
const Wrapper = styled.section`
|
||||
/* Comment for prettier */
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Filters = ({
|
||||
filters: { cpu, cost, ram, disk },
|
||||
filters,
|
||||
ramSliderChange,
|
||||
cpuSliderChange,
|
||||
diskSliderChange,
|
||||
costSliderChange
|
||||
}) => {
|
||||
return (
|
||||
<Col xs={12}>
|
||||
<FormLabel>Choose a package</FormLabel>
|
||||
<FilterWrapper>
|
||||
<Slider
|
||||
minValue={ram.min}
|
||||
maxValue={ram.max}
|
||||
step={0.256}
|
||||
value={ram}
|
||||
onChangeComplete={value => ramSliderChange(value)}
|
||||
>
|
||||
GB RAM
|
||||
</Slider>
|
||||
<Slider
|
||||
minValue={cpu.min}
|
||||
maxValue={cpu.max}
|
||||
step={0.25}
|
||||
value={cpu}
|
||||
onChangeComplete={value => cpuSliderChange(value)}
|
||||
>
|
||||
vCPUs
|
||||
</Slider>
|
||||
<Slider
|
||||
minValue={disk.min}
|
||||
maxValue={disk.max}
|
||||
step={0.01}
|
||||
value={disk}
|
||||
onChangeComplete={value => diskSliderChange(value)}
|
||||
>
|
||||
TB Disk
|
||||
</Slider>
|
||||
<Slider
|
||||
minValue={cost.min}
|
||||
maxValue={cost.max}
|
||||
step={0.02}
|
||||
value={cost}
|
||||
onChangeComplete={value => costSliderChange(value)}
|
||||
>
|
||||
$/hr
|
||||
</Slider>
|
||||
</FilterWrapper>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
costSliderChange,
|
||||
groupChange,
|
||||
filterReset
|
||||
}) => (
|
||||
<Wrapper>
|
||||
<FormLabel>Choose a package</FormLabel>
|
||||
<Sliders
|
||||
filters={filters}
|
||||
ramSliderChange={ramSliderChange}
|
||||
cpuSliderChange={cpuSliderChange}
|
||||
diskSliderChange={diskSliderChange}
|
||||
costSliderChange={costSliderChange}
|
||||
/>
|
||||
<GroupWrapper>
|
||||
<div>
|
||||
{filters.groups.map(group => (
|
||||
<Button
|
||||
key={group.name}
|
||||
tertiary
|
||||
small
|
||||
selected={group.selected}
|
||||
onClick={() => groupChange(group)}
|
||||
>
|
||||
{group.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
disabled={isEqual(filters,defaultState.filters)}
|
||||
secondary
|
||||
small
|
||||
onClick={filterReset}
|
||||
>
|
||||
Reset Filters
|
||||
</Button>
|
||||
</GroupWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
export default Filters;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,24 @@ exports[`renders <Home /> without throwing 1`] = `
|
|||
"max": 107.26,
|
||||
"min": 0.01,
|
||||
},
|
||||
"groups": Array [
|
||||
Object {
|
||||
"name": "Compute Optimized",
|
||||
"selected": false,
|
||||
},
|
||||
Object {
|
||||
"name": "Memory Optimized",
|
||||
"selected": false,
|
||||
},
|
||||
Object {
|
||||
"name": "General Purpose",
|
||||
"selected": false,
|
||||
},
|
||||
Object {
|
||||
"name": "Storage Optimized",
|
||||
"selected": false,
|
||||
},
|
||||
],
|
||||
"ram": Object {
|
||||
"max": 50.688,
|
||||
"min": 0.256,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ class Home extends Component {
|
|||
|
||||
this.closeMessage = this.closeMessage.bind(this);
|
||||
this.changeValue = this.changeValue.bind(this);
|
||||
this.changeGroup = this.changeGroup.bind(this);
|
||||
}
|
||||
|
||||
closeMessage() {
|
||||
|
|
@ -24,26 +25,37 @@ class Home extends Component {
|
|||
}
|
||||
|
||||
changeValue(key, value) {
|
||||
const { filters } = this.props;
|
||||
this.props.onFilterChange({
|
||||
const { filters, onFilterChange } = this.props;
|
||||
onFilterChange({
|
||||
...filters,
|
||||
[key]: value
|
||||
});
|
||||
}
|
||||
|
||||
changeGroup(group) {
|
||||
const { filters, onFilterChange } = this.props;
|
||||
const otherGroups = filters.groups.filter(g => g.name !== group.name);
|
||||
|
||||
onFilterChange({
|
||||
...filters,
|
||||
groups: [
|
||||
...otherGroups,
|
||||
{ name: group.name, selected: !group.selected }
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { showMessage } = this.state;
|
||||
const { filters } = this.props;
|
||||
const { filters, onFilterReset } = this.props;
|
||||
const _msg = showMessage ? (
|
||||
<Message
|
||||
title="Choosing deployement data center"
|
||||
onCloseClick={this.closeMessage}
|
||||
>
|
||||
<p>
|
||||
Not all data centres have all configurations of instances available.
|
||||
Make sure that you choose the data center that suits your
|
||||
requirements. <Anchor href="#">Learn More</Anchor>
|
||||
</p>
|
||||
Not all data centres have all configurations of instances available.
|
||||
Make sure that you choose the data center that suits your requirements.{' '}
|
||||
<Anchor href="#">Learn More</Anchor>
|
||||
</Message>
|
||||
) : null;
|
||||
|
||||
|
|
@ -58,6 +70,8 @@ class Home extends Component {
|
|||
<Row>
|
||||
<Filters
|
||||
filters={filters}
|
||||
filterReset={onFilterReset}
|
||||
groupChange={group => this.changeGroup(group)}
|
||||
ramSliderChange={value => this.changeValue('ram', value)}
|
||||
cpuSliderChange={value => this.changeValue('cpu', value)}
|
||||
diskSliderChange={value => this.changeValue('disk', value)}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: space-between;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
|
|
@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: ;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
padding: 0 1.125rem;
|
||||
|
|
@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<h2
|
||||
className="c0"
|
||||
<h2
|
||||
className="c2"
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<a
|
||||
<a
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<img
|
||||
className="c0"
|
||||
<img
|
||||
className="c3"
|
||||
src="test-file-mock"
|
||||
/>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@ exports[`renders <NotFound /> without throwing 1`] = `
|
|||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: ;
|
||||
background-image: none;
|
||||
background-color: ;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
|
@ -42,12 +40,9 @@ exports[`renders <NotFound /> without throwing 1`] = `
|
|||
.c6:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c6:hover {
|
||||
background-color: ;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
|
|
@ -56,8 +51,6 @@ exports[`renders <NotFound /> without throwing 1`] = `
|
|||
.c6:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c6[disabled] {
|
||||
|
|
@ -131,209 +124,21 @@ exports[`renders <NotFound /> without throwing 1`] = `
|
|||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: ;
|
||||
background-image: none;
|
||||
background-color: ;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c5:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c5:hover {
|
||||
background-color: ;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c5:active,
|
||||
.c5:active:hover,
|
||||
.c5:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c5[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-size: 2rem;
|
||||
margin: 0.625rem 0;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 2.25rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
margin-bottom: 1.875rem;
|
||||
max-width: 30.625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
.c1 {
|
||||
font-size: 2rem;
|
||||
margin: 0.625rem 0;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 2.25rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
<h1
|
||||
className="c0 c1"
|
||||
<h1
|
||||
className="c2 c3"
|
||||
>
|
||||
I have no memory of this place
|
||||
</h1>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.875rem;
|
||||
max-width: 30.625rem;
|
||||
}
|
||||
|
||||
<p
|
||||
className="c0 c1"
|
||||
<p
|
||||
className="c4 c5"
|
||||
>
|
||||
HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
|
||||
</p>
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: ;
|
||||
background-image: none;
|
||||
background-color: ;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: ;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c0[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0"
|
||||
<a
|
||||
className="c6"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
primary={true}
|
||||
|
|
|
|||
|
|
@ -32,13 +32,11 @@ exports[`renders <SectionNav /> without throwing 1`] = `
|
|||
.c3 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
color: ;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c3.active {
|
||||
color: ;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -51,78 +49,15 @@ exports[`renders <SectionNav /> without throwing 1`] = `
|
|||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
color: ;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c2.active {
|
||||
color: ;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
<ul
|
||||
className="c0"
|
||||
<ul
|
||||
className="c1"
|
||||
>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
color: ;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c1.active {
|
||||
color: ;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
<li
|
||||
className="c0"
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
color: ;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c0.active {
|
||||
color: ;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
<a
|
||||
<a
|
||||
aria-current="true"
|
||||
className="active c0 active"
|
||||
className="active c3 active"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
style={Object {}}
|
||||
|
|
@ -130,45 +65,18 @@ exports[`renders <SectionNav /> without throwing 1`] = `
|
|||
Instances
|
||||
</a>
|
||||
</li>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
<li
|
||||
className="c0"
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
Custom images
|
||||
</li>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
<li
|
||||
className="c0"
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
Docker images
|
||||
</li>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
<li
|
||||
className="c0"
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
Docker registries
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Package /> without throwing 1`] = `
|
||||
.c2 {
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
|
|
@ -10,10 +10,9 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c5 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
|
|
@ -37,7 +36,7 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -59,21 +58,20 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
min-height: 7.875rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border: 0.0625rem solid;
|
||||
background-color: ;
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-right: 0rem;
|
||||
margin-left: 0rem;
|
||||
border-radius: 0.25rem background: border:1px solid;
|
||||
background: ;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
|
||||
min-height: 11.5625rem;
|
||||
min-width: 200px;
|
||||
min-width: 237px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -102,7 +100,7 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c4 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -128,7 +126,7 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c7 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
|
|
@ -144,25 +142,25 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
|
|
@ -175,8 +173,13 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-right: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c2 {
|
||||
.c3 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
|
|
@ -186,799 +189,77 @@ exports[`renders <Package /> without throwing 1`] = `
|
|||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
className="c0 c1"
|
||||
name="card"
|
||||
>
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
min-width: auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c2"
|
||||
name="card-view"
|
||||
>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c0 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c3"
|
||||
name="card-meta"
|
||||
>
|
||||
.c1 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.c3 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
.c0 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c5"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.263
|
||||
per hour
|
||||
</div>
|
||||
.c1 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
<span
|
||||
className="c0"
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
7.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
.c1 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
<span
|
||||
className="c0"
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
4
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
.c1 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
<span
|
||||
className="c0"
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
2
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
.c1 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
<span
|
||||
className="c0"
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
SSD
|
||||
</span>
|
||||
</div>
|
||||
.c1 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: ;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-flex-grow: 2;
|
||||
-ms-flex-grow: 2;
|
||||
flex-grow: 2;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
<div
|
||||
className="c8 c5"
|
||||
name="card-footer"
|
||||
>
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
<span
|
||||
className="c0"
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardSubTitle,
|
||||
|
|
@ -8,8 +11,13 @@ import {
|
|||
CardMeta
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const PackageStyled = styled(Card)`
|
||||
margin-right: ${remcalc(18)};
|
||||
margin-bottom: ${remcalc(18)};
|
||||
`;
|
||||
|
||||
const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
|
||||
<Card transparent>
|
||||
<PackageStyled transparent>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>${price} per hour</CardTitle>
|
||||
|
|
@ -21,7 +29,7 @@ const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
|
|||
<CardFooter>{group}</CardFooter>
|
||||
</CardMeta>
|
||||
</CardView>
|
||||
</Card>
|
||||
</PackageStyled>
|
||||
);
|
||||
|
||||
export default Package;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -10,16 +10,15 @@ const ListStyled = styled.ul`
|
|||
list-style: none;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: ${remcalc(36)};
|
||||
`;
|
||||
const Packages = ({ packages }) => (
|
||||
<ListStyled>
|
||||
{packages.map(pack => (
|
||||
{packages.length > 0 ? packages.map(pack => (
|
||||
<li key={pack.name}>
|
||||
<Package pack={pack} />
|
||||
</li>
|
||||
))}
|
||||
)) : 'There are no packages that meet your criteria'}
|
||||
</ListStyled>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
import React from 'react';
|
||||
import { Slider } from 'joyent-ui-toolkit';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
const FilterWrapper = styled.section`
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: ${remcalc(36)};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Sliders = ({
|
||||
filters: { cpu, cost, ram, disk },
|
||||
ramSliderChange,
|
||||
cpuSliderChange,
|
||||
diskSliderChange,
|
||||
costSliderChange
|
||||
}) => (
|
||||
<FilterWrapper>
|
||||
<Slider
|
||||
minValue={ram.min}
|
||||
maxValue={ram.max}
|
||||
step={0.256}
|
||||
value={ram}
|
||||
onChangeComplete={value => ramSliderChange(value)}
|
||||
>
|
||||
GB RAM
|
||||
</Slider>
|
||||
<Slider
|
||||
minValue={cpu.min}
|
||||
maxValue={cpu.max}
|
||||
step={0.25}
|
||||
value={cpu}
|
||||
onChangeComplete={value => cpuSliderChange(value)}
|
||||
>
|
||||
vCPUs
|
||||
</Slider>
|
||||
<Slider
|
||||
minValue={disk.min}
|
||||
maxValue={disk.max}
|
||||
step={0.01}
|
||||
value={disk}
|
||||
onChangeComplete={value => diskSliderChange(value)}
|
||||
>
|
||||
TB Disk
|
||||
</Slider>
|
||||
<Slider
|
||||
minValue={cost.min}
|
||||
maxValue={cost.max}
|
||||
step={0.02}
|
||||
value={cost}
|
||||
onChangeComplete={value => costSliderChange(value)}
|
||||
>
|
||||
$/hr
|
||||
</Slider>
|
||||
</FilterWrapper>
|
||||
);
|
||||
|
||||
export default Sliders;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,12 +1,14 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import changeFilters from '../../state/actions';
|
||||
import { changeFilters, resetFilters } from '../../state/actions';
|
||||
import { LayoutContainer } from '@components/layout';
|
||||
import { Home } from '@components/home';
|
||||
|
||||
const HomeHOC = ({ filters, onFilterChange }) => (
|
||||
const HomeHOC = (props) => (
|
||||
<LayoutContainer>
|
||||
<Home filters={filters} onFilterChange={onFilterChange} />
|
||||
<Home
|
||||
{...props}
|
||||
/>
|
||||
</LayoutContainer>
|
||||
);
|
||||
|
||||
|
|
@ -20,6 +22,9 @@ const mapDispatchToProps = dispatch => {
|
|||
return {
|
||||
onFilterChange: filters => {
|
||||
dispatch(changeFilters(filters));
|
||||
},
|
||||
onFilterReset: () => {
|
||||
dispatch(resetFilters());
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: space-between;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
|
|
@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: ;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
padding: 0 1.125rem;
|
||||
|
|
@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
|
|||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<h2
|
||||
className="c0"
|
||||
<h2
|
||||
className="c2"
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<a
|
||||
<a
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<img
|
||||
className="c0"
|
||||
<img
|
||||
className="c3"
|
||||
src="test-file-mock"
|
||||
/>
|
||||
</a>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,8 +1,8 @@
|
|||
const changeFilters = filters => {
|
||||
return {
|
||||
type: 'CHANGE_FILTERS',
|
||||
filters
|
||||
};
|
||||
};
|
||||
export const changeFilters = filters => ({
|
||||
type: 'CHANGE_FILTERS',
|
||||
filters
|
||||
});
|
||||
|
||||
export default changeFilters;
|
||||
export const resetFilters = () => ({
|
||||
type: 'RESET_FILTERS'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import { default as defaultState } from './state';
|
||||
|
||||
const selectedGroups = groups =>
|
||||
groups.filter(group => group.selected).map(group => group.name);
|
||||
|
||||
const filterReducer = (state = defaultState, action) => {
|
||||
switch (action.type) {
|
||||
case 'CHANGE_FILTERS':
|
||||
console.log(state);
|
||||
return {
|
||||
...state,
|
||||
...action.filters,
|
||||
filters: {
|
||||
...action.filters
|
||||
},
|
||||
packages: defaultState.packages
|
||||
.filter(
|
||||
pack =>
|
||||
|
|
@ -27,6 +32,21 @@ const filterReducer = (state = defaultState, action) => {
|
|||
pack.price >= action.filters.cost.min &&
|
||||
pack.price <= action.filters.cost.max
|
||||
)
|
||||
.filter(
|
||||
pack =>
|
||||
selectedGroups(action.filters.groups).length > 0 ?
|
||||
selectedGroups(action.filters.groups).includes(pack.group) :
|
||||
true
|
||||
)
|
||||
};
|
||||
|
||||
case 'RESET_FILTERS':
|
||||
return {
|
||||
...state,
|
||||
filters: {
|
||||
...defaultState.filters
|
||||
},
|
||||
packages: defaultState.packages
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,13 @@ const state = {
|
|||
cpu: { min: 0.25, max: 8 },
|
||||
cost: { min: 0.016, max: 2.131 },
|
||||
ram: { min: 0.256, max: 63.8 },
|
||||
disk: { min: 0.01, max: 4.9 }
|
||||
disk: { min: 0.01, max: 4.9 },
|
||||
groups: [
|
||||
{ name: 'Compute Optimized', selected: false },
|
||||
{ name: 'Memory Optimized', selected: false },
|
||||
{ name: 'General Purpose', selected: false },
|
||||
{ name: 'Storage Optimized', selected: false }
|
||||
]
|
||||
},
|
||||
packages
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,5 +14,11 @@ export default {
|
|||
disk: {
|
||||
min: 0.01,
|
||||
max: 107.26
|
||||
}
|
||||
},
|
||||
groups: [
|
||||
{ name: 'Compute Optimized', selected: false },
|
||||
{ name: 'Memory Optimized', selected: false },
|
||||
{ name: 'General Purpose', selected: false },
|
||||
{ name: 'Storage Optimized', selected: false }
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ const style = css`
|
|||
color: ${props => props.theme.tertiary};
|
||||
background-color: ${props => props.theme.background};
|
||||
border-color: ${props => props.theme.grey};
|
||||
font-weight: 600;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
|
|
@ -134,6 +135,10 @@ const style = css`
|
|||
`} ${is('rect')`
|
||||
border-radius: 0;
|
||||
`};
|
||||
${is('small')`
|
||||
padding: ${remcalc(9)} ${remcalc(18)};
|
||||
font-weight: 600;
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledButton = NButton.extend`
|
||||
|
|
@ -157,7 +162,7 @@ const StyledLink = styled(Link)`
|
|||
* @example ./usage.md
|
||||
*/
|
||||
const Button = props => {
|
||||
const { href = '', to = '', loading = false, secondary, tertiary } = props;
|
||||
const { href = '', to = '', loading = false, secondary } = props;
|
||||
|
||||
const Views = [
|
||||
() => (to ? StyledLink : null),
|
||||
|
|
@ -168,7 +173,7 @@ const Button = props => {
|
|||
const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
|
||||
|
||||
const children = loading ? (
|
||||
<StatusLoader secondary={!secondary} tertiary={tertiary} />
|
||||
<StatusLoader secondary={!secondary} />
|
||||
) : (
|
||||
props.children
|
||||
);
|
||||
|
|
@ -192,6 +197,7 @@ Button.propTypes = {
|
|||
primary: PropTypes.bool,
|
||||
secondary: PropTypes.bool,
|
||||
tertiary: PropTypes.bool,
|
||||
small: PropTypes.bool,
|
||||
/**
|
||||
* When used, will give button an active state (Only for tertiary for now)
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -36,13 +36,12 @@ const StyledCard = Row.extend`
|
|||
`};
|
||||
|
||||
${is('transparent')`
|
||||
border-radius: ${remcalc(4)}
|
||||
background:
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${props => props.theme.grey};
|
||||
background: ${props => props.theme.background};
|
||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
|
||||
min-height: ${remcalc(185)};
|
||||
min-width: 200px;
|
||||
min-width: 237px;
|
||||
`};
|
||||
|
||||
${is('stacked')`
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const StyledContainer = styled.div`
|
|||
background-color: ${props => props.theme.white};
|
||||
box-shadow: ${bottomShaddow};
|
||||
border: ${border.confirmed};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledColor = styled.div`
|
||||
|
|
@ -74,9 +75,9 @@ Message.propTypes = {
|
|||
title: PropTypes.string,
|
||||
message: PropTypes.string,
|
||||
onCloseClick: PropTypes.func,
|
||||
error: PropTypes.boolean,
|
||||
warning: PropTypes.boolean,
|
||||
success: PropTypes.boolean
|
||||
error: PropTypes.bool,
|
||||
warning: PropTypes.bool,
|
||||
success: PropTypes.bool
|
||||
};
|
||||
|
||||
export default Message;
|
||||
|
|
|
|||
Loading…
Reference in New Issue