style: prettify

This commit is contained in:
Sérgio Ramos 2017-11-16 11:58:56 +00:00 committed by Sérgio Ramos
parent 897e56b772
commit c983f9f9ca
9 changed files with 146 additions and 177 deletions

View File

@ -8,7 +8,7 @@ delivery (CD as known from now on in this document).
We will define CD in this document as a method of developing a feature per We will define CD in this document as a method of developing a feature per
commit with an encapsulating test that proves that the functionality is working, commit with an encapsulating test that proves that the functionality is working,
the contributor will test their code locally and if all is passing will push to the contributor will test their code locally and if all is passing will push to
*master*. _master_.
For contributors that do not have write access, follow the same conventions but For contributors that do not have write access, follow the same conventions but
open a Pull Request instead. open a Pull Request instead.
@ -23,8 +23,8 @@ In this scenario, the contributor should open a pull request instead.
## Commit messages ## Commit messages
Follow [Git blessed](http://chris.beams.io/posts/git-commit/) and [Conventional Follow [Git blessed](http://chris.beams.io/posts/git-commit/) and
Commits](https://conventionalcommits.org) [Conventional Commits](https://conventionalcommits.org)
1. Separate subject from body with a blank line 1. Separate subject from body with a blank line
1. Limit the subject line to 50 characters 1. Limit the subject line to 50 characters
@ -36,14 +36,14 @@ Commits](https://conventionalcommits.org)
Types: Types:
- build * build
- chore * chore
- ci * ci
- docs * docs
- feat * feat
- fix * fix
- perf * perf
- refactor * refactor
- revert * revert
- style * style
- test * test

View File

@ -4,57 +4,57 @@
## Table of Contents ## Table of Contents
- [Requirements](#requirements) * [Requirements](#requirements)
- [Links](#links) * [Links](#links)
- [Related](#related) * [Related](#related)
- [Contribute](#contribute) * [Contribute](#contribute)
- [License](#license) * [License](#license)
## Requirements ## Requirements
- [Triton account](https://sso.joyent.com/signup) * [Triton account](https://sso.joyent.com/signup)
- [Triton CLI](https://www.npmjs.com/package/triton) * [Triton CLI](https://www.npmjs.com/package/triton)
- [Docker](https://www.docker.com/) * [Docker](https://www.docker.com/)
## Links ## Links
- [Joyent Ui Toolkit](https://joyent-ui-toolkit.now.sh/) * [Joyent Ui Toolkit](https://joyent-ui-toolkit.now.sh/)
- [Create Instance Prototype](https://create-instance-prototype.now.sh) * [Create Instance Prototype](https://create-instance-prototype.now.sh)
## Related ## Related
- [cloudapi-gql](https://github.com/yldio/cloudapi-gql) * [cloudapi-gql](https://github.com/yldio/cloudapi-gql)
#### CoPilot #### CoPilot
- [copilot](https://github.com/yldio/copilot) * [copilot](https://github.com/yldio/copilot)
- [docker-compose-api](https://github.com/yldio/docker-compose-api) * [docker-compose-api](https://github.com/yldio/docker-compose-api)
#### styled-components #### styled-components
- [normalized-styled-components](https://github.com/yldio/normalized-styled-components) * [normalized-styled-components](https://github.com/yldio/normalized-styled-components)
- [styled-is](https://github.com/yldio/styled-is) * [styled-is](https://github.com/yldio/styled-is)
#### Utilities #### Utilities
- [pseudo-yaml-ast](https://github.com/yldio/pseudo-yaml-ast) * [pseudo-yaml-ast](https://github.com/yldio/pseudo-yaml-ast)
- [pseudo-json-ast](https://github.com/yldio/pseudo-json-ast) * [pseudo-json-ast](https://github.com/yldio/pseudo-json-ast)
- [unitcalc](https://github.com/yldio/unitcalc) * [unitcalc](https://github.com/yldio/unitcalc)
- [remcalc](https://github.com/yldio/remcalc) * [remcalc](https://github.com/yldio/remcalc)
- [rnd-id](https://github.com/yldio/rnd-id) * [rnd-id](https://github.com/yldio/rnd-id)
#### Tooling #### Tooling
- [stylelint-config-joyent-portal](https://github.com/yldio/stylelint-config-joyent-portal) * [stylelint-config-joyent-portal](https://github.com/yldio/stylelint-config-joyent-portal)
- [joyent-react-scripts](https://github.com/yldio/joyent-react-scripts) * [joyent-react-scripts](https://github.com/yldio/joyent-react-scripts)
- [babel-preset-joyent-portal](https://github.com/yldio/babel-preset-joyent-portal) * [babel-preset-joyent-portal](https://github.com/yldio/babel-preset-joyent-portal)
- [eslint-config-joyent-portal](https://github.com/yldio/eslint-config-joyent-portal) * [eslint-config-joyent-portal](https://github.com/yldio/eslint-config-joyent-portal)
#### Components #### Components
- [react-topology](https://github.com/yldio/react-topology) * [react-topology](https://github.com/yldio/react-topology)
- [metrics](https://github.com/yldio/metrics-yall) * [metrics](https://github.com/yldio/metrics-yall)
- [joyent-manifest-editor](https://github.com/yldio/joyent-manifest-editor) * [joyent-manifest-editor](https://github.com/yldio/joyent-manifest-editor)
## Contribute ## Contribute

View File

@ -172,7 +172,6 @@ const style = css`
margin: 0; margin: 0;
`}; `};
${is('bold')` ${is('bold')`
font-weight: bold; font-weight: bold;
`}; `};

View File

@ -10,4 +10,4 @@ const InputDropdown = styled.div`
margin-top: ${remcalc(8)}; margin-top: ${remcalc(8)};
`; `;
export default InputDropdown;; export default InputDropdown;

View File

@ -1,43 +1,9 @@
import styled, { css } from 'styled-components';
import { Grid } from 'react-styled-flexboxgrid'; import { Grid } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import is, { isNot } from 'styled-is'; import is, { isNot } from 'styled-is';
import { styled as breakpoints } from '../breakpoints'; import { styled as breakpoints } from '../breakpoints';
const Base = css`
margin-right: auto;
margin-left: auto;
${is('fluid')`
width: 100%;
padding-left: 0;
padding-right: 0;
`};
${isNot('fluid')`
max-width: ${remcalc(1000)};
${breakpoints.smallOnly`
padding-left: ${remcalc(6)};
padding-right: ${remcalc(6)};
`};
`};
${is('main')`
padding-bottom: ${remcalc(18)};
`};
${is('center')`
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
`};
`;
export default Grid.extend` export default Grid.extend`
${is('fluid')` ${is('fluid')`
width: 100%; width: 100%;
@ -67,7 +33,3 @@ export default Grid.extend`
align-items: center; align-items: center;
`}; `};
`; `;
//
//
// const View
//

View File

@ -94,7 +94,6 @@ export const H4 = styled.h4`
} }
`; `;
export const H5 = styled.h4` export const H5 = styled.h4`
margin: 0; margin: 0;
${typography.color}; ${typography.color};

View File

@ -104,7 +104,7 @@ class Affinity extends Component {
<P> <P>
Affinity rules control the location of instances, to help reduce Affinity rules control the location of instances, to help reduce
traffic across networks and keep the workload balanced. With strict traffic across networks and keep the workload balanced. With strict
rules, instances are only provisioned when the criteria is met. {' '} rules, instances are only provisioned when the criteria is met.{' '}
<a href="https://apidocs.joyent.com/docker/features/placement "> <a href="https://apidocs.joyent.com/docker/features/placement ">
Read the docs Read the docs
</a> </a>
@ -122,82 +122,85 @@ class Affinity extends Component {
</ViewContainer>, </ViewContainer>,
<Row> <Row>
<Col xs={12}> <Col xs={12}>
{this.state.showRuleCreation ? ( {this.state.showRuleCreation ? (
<Margin top={2}> <Margin top={2}>
<Card shadow> <Card shadow>
<CardHeader secondary={false} transparent={false}> <CardHeader secondary={false} transparent={false}>
<CardHeaderMeta> <CardHeaderMeta>
<Row between="xs" middle="xs"> <Row between="xs" middle="xs">
<Col xs={12}> <Col xs={12}>
<H4>Create an affinity rule</H4> <H4>Create an affinity rule</H4>
</Col> </Col>
</Row> </Row>
</CardHeaderMeta> </CardHeaderMeta>
</CardHeader> </CardHeader>
<CardOutlet> <CardOutlet>
<div> <div>
<H4>The instance</H4> <H4>The instance</H4>
</div> </div>
<div> <div>
<Select fluid onChange={this.instanceChange}> <Select fluid onChange={this.instanceChange}>
<option>must</option> <option>must</option>
<option>should</option> <option>should</option>
</Select>
</div>
<div>
<H4>be on</H4>
</div>
<div>
<Select fluid onChange={this.beChange}>
<option>the same</option>
<option>a different</option>
</Select>
</div>
<div>
<H4>node as the instance(s) identified by the</H4>
</div>
<div>
<MarginInline right={1}>
<Select fluid onChange={this.typeChange}>
<option>instance name</option>
<option>tag name</option>
</Select> </Select>
</MarginInline> </div>
<MarginInline right={1}> <div>
<Select fluid onChange={this.typeChange}> <H4>be on</H4>
<option>equalling</option> </div>
<option>not equalling</option> <div>
<option>containing</option> <Select fluid onChange={this.beChange}>
<option>starting with</option> <option>the same</option>
<option>ending with</option> <option>a different</option>
</Select> </Select>
</MarginInline> </div>
<Input <div>
type="text" <H4>node as the instance(s) identified by the</H4>
onChange={this.valueChange} </div>
required <div>
value={this.state.rule.value} <MarginInline right={1}>
placeholder="Example instance name: nginx" <Select fluid onChange={this.typeChange}>
/> <option>instance name</option>
</div> <option>tag name</option>
<div> </Select>
<Button secondary onClick={this.toggleForm}> </MarginInline>
Cancel <MarginInline right={1}>
</Button> <Select fluid onChange={this.typeChange}>
<Button onClick={this.submit} disabled={!this.state.rule.value}> <option>equalling</option>
Create <option>not equalling</option>
</Button> <option>containing</option>
</div> <option>starting with</option>
</CardOutlet> <option>ending with</option>
</Card> </Select>
</Margin> </MarginInline>
) : ( <Input
<Margin top={2}> type="text"
<Button secondary bold onClick={this.toggleForm}> onChange={this.valueChange}
Create affinity rule required
</Button> value={this.state.rule.value}
</Margin> placeholder="Example instance name: nginx"
)} />
</div>
<div>
<Button secondary onClick={this.toggleForm}>
Cancel
</Button>
<Button
onClick={this.submit}
disabled={!this.state.rule.value}
>
Create
</Button>
</div>
</CardOutlet>
</Card>
</Margin>
) : (
<Margin top={2}>
<Button secondary bold onClick={this.toggleForm}>
Create affinity rule
</Button>
</Margin>
)}
</Col> </Col>
</Row> </Row>
]; ];

View File

@ -70,23 +70,23 @@ class Filters extends Component {
} = this.props; } = this.props;
return [ return [
<Row> <Row>
<Col xs={8}> <Col xs={8}>
<Margin bottom={6}> <Margin bottom={6}>
<H2>Package</H2> <H2>Package</H2>
</Margin> </Margin>
</Col> </Col>
</Row>, </Row>,
<RowMargin> <RowMargin>
<Col xs={8}> <Col xs={8}>
<P> <P>
A package defines the specs of your instance. On Triton, packages A package defines the specs of your instance. On Triton, packages
can only increase in size.{' '} can only increase in size.{' '}
<a href="https://docs.joyent.com/public-cloud/instances/packages/sizing"> <a href="https://docs.joyent.com/public-cloud/instances/packages/sizing">
Read the docs Read the docs
</a> </a>
</P> </P>
</Col> </Col>
</RowMargin>, </RowMargin>,
<Row> <Row>
<Col> <Col>

View File

@ -76,8 +76,12 @@ class Home extends Component {
)); ));
return [ return [
<Row><Col xs={12}>{breadcrumbLinks}</Col></Row>, <Row>
<Row><Col xs={12}>{_msg}</Col></Row>, <Col xs={12}>{breadcrumbLinks}</Col>
</Row>,
<Row>
<Col xs={12}>{_msg}</Col>
</Row>,
<Margin vertical={2}> <Margin vertical={2}>
<Divider height="1px" /> <Divider height="1px" />
</Margin>, </Margin>,
@ -98,7 +102,9 @@ class Home extends Component {
<PackagesHOC /> <PackagesHOC />
</Margin>, </Margin>,
<Row end="xs"> <Row end="xs">
<Col xs={12}><Button>Next</Button></Col> <Col xs={12}>
<Button>Next</Button>
</Col>
</Row>, </Row>,
<Margin top={2}> <Margin top={2}>
<AffinityHOC /> <AffinityHOC />