From b21dd9891a970d3055bba7c7304649305d3f7b11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emil=20Sj=C3=B6lander?= Date: Fri, 16 Feb 2018 06:41:56 -0800 Subject: [PATCH] Final tweaks Reviewed By: danielbuechele Differential Revision: D7009456 fbshipit-source-id: 65304f648141407bc15484840647050e712e89df --- .../contents/properties/layout-direction.md | 4 ++-- website/contents/properties/min-max.md | 2 +- .../components/Playground/CodeGenerators.js | 2 +- website/src/components/Playground/Editor.css | 7 +++++-- website/src/components/Playground/Editor.js | 19 +++++++++---------- .../components/Playground/YogaEnumSelect.js | 1 + .../Playground/YogaPositionEditor.css | 5 +++-- .../Playground/YogaPositionEditor.js | 2 +- website/src/templates/index.css | 7 ++++--- 9 files changed, 27 insertions(+), 22 deletions(-) diff --git a/website/contents/properties/layout-direction.md b/website/contents/properties/layout-direction.md index e9d6f8e9..e53a8e68 100644 --- a/website/contents/properties/layout-direction.md +++ b/website/contents/properties/layout-direction.md @@ -1,7 +1,7 @@ --- path: "docs/layout-direction" title: "Layout Direction" -hasPlayground: true +hasPlayground: false --- ## Layout Direction @@ -17,7 +17,7 @@ to the `CalculateLayout` call or by setting the direction on the root node. **LTR (DEFAULT)** Text and children and laid our from left to right. Margin and padding applied the start of an element are applied on the left side. -**RTL (DEFAULT)** Text and children and laid our from right to left. Margin and +**RTL** Text and children and laid our from right to left. Margin and padding applied the start of an element are applied on the right side. diff --git a/website/contents/properties/min-max.md b/website/contents/properties/min-max.md index b5d39084..b439d168 100644 --- a/website/contents/properties/min-max.md +++ b/website/contents/properties/min-max.md @@ -9,7 +9,7 @@ hasPlayground: true All the following properties set the maximum and minimum size constraints of an element. These properties have higher priority than all other properties and will always be respected. Constraints can be specified as either absolute pixel values or as percentages of their -parent's size. By default all these constraints are undefined. +parent's size. By default all these constraints are `undefined`. ### Max Width diff --git a/website/src/components/Playground/CodeGenerators.js b/website/src/components/Playground/CodeGenerators.js index 46e127cb..24e0b687 100644 --- a/website/src/components/Playground/CodeGenerators.js +++ b/website/src/components/Playground/CodeGenerators.js @@ -138,7 +138,7 @@ export default class CodeGenerators extends Component { )} , - + diff --git a/website/src/components/Playground/Editor.css b/website/src/components/Playground/Editor.css index 5b54be30..4e8aafa5 100644 --- a/website/src/components/Playground/Editor.css +++ b/website/src/components/Playground/Editor.css @@ -23,9 +23,12 @@ } .Editor h2 { - font-size: 16px; margin-bottom: 8px; - margin-top: 30px; + margin-top: 20px; + font-size: 12px; + font-weight: 700; + color: #444950; + text-transform: uppercase; } .Editor h2:first-child { diff --git a/website/src/components/Playground/Editor.js b/website/src/components/Playground/Editor.js index e7c1a970..72c38aa3 100644 --- a/website/src/components/Playground/Editor.js +++ b/website/src/components/Playground/Editor.js @@ -68,7 +68,7 @@ export default class Editor extends Component { onChange={this.props.onChangeSetting} />

- Flex direction + Flex Direction Defines the direction of the main-axis @@ -130,7 +130,7 @@ export default class Editor extends Component {

- Flex wrap + Flex Wrap Wrapping behaviour when child nodes don't fit into a single line @@ -144,7 +144,7 @@ export default class Editor extends Component {

- Justify content + Justify Content Aligns child nodes along the main-axis @@ -157,7 +157,7 @@ export default class Editor extends Component { />

- Align items + Align Items Aligns child nodes along the cross-axis @@ -170,7 +170,7 @@ export default class Editor extends Component { />

- Align self + Align Self Override align items of parent @@ -183,7 +183,7 @@ export default class Editor extends Component { />

- Align content + Align Content Alignment of lines along the cross-axis when wrapping @@ -197,7 +197,7 @@ export default class Editor extends Component {

- Width × height + Width × Height Dimensions of the node @@ -226,7 +226,7 @@ export default class Editor extends Component {

- Aspect ratio + Aspect Ratio Width/Height aspect ratio of node @@ -240,7 +240,6 @@ export default class Editor extends Component { onChange={this.props.onChangeLayout} /> -

Box model

{['padding', 'border', 'margin'].map(property => ( { /> ))}

- Position + Position Type Relative position offsets the node from it's calculated position. Absolute position removes the node from the flexbox diff --git a/website/src/components/Playground/YogaEnumSelect.js b/website/src/components/Playground/YogaEnumSelect.js index 83ed8c98..73a99b4f 100644 --- a/website/src/components/Playground/YogaEnumSelect.js +++ b/website/src/components/Playground/YogaEnumSelect.js @@ -75,6 +75,7 @@ export default class YogaEnumSelect extends Component { return this.values.length > 3 ? (
diff --git a/website/src/components/Playground/YogaPositionEditor.css b/website/src/components/Playground/YogaPositionEditor.css index 43f81476..9cc210e9 100644 --- a/website/src/components/Playground/YogaPositionEditor.css +++ b/website/src/components/Playground/YogaPositionEditor.css @@ -26,6 +26,7 @@ justify-content: space-between; align-items: center; flex-direction: row; - font-size: 16px; - font-weight: bold; + font-size: 12px; + font-weight: 700; + color: #444950; } diff --git a/website/src/components/Playground/YogaPositionEditor.js b/website/src/components/Playground/YogaPositionEditor.js index 9e3cc8c2..85d81042 100644 --- a/website/src/components/Playground/YogaPositionEditor.js +++ b/website/src/components/Playground/YogaPositionEditor.js @@ -53,7 +53,7 @@ export default class YogaPositionEditor extends Component { onChange(property, value.set('left', e.target.value)) } /> - {property} + {property.toUpperCase()}