From 91621641e6352cef5937a7e40f4bc47bcc026d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Thu, 15 Feb 2018 08:25:14 -0800
Subject: [PATCH] visually center root node

Summary: root node is now centerwed between edge and editor

Reviewed By: emilsjolander

Differential Revision: D6989159

fbshipit-source-id: ce2621402d380843125fabc43452c64ea3b563dd
---
 website/src/components/Playground/index.css |  4 +
 website/src/components/Playground/index.js  | 84 +++++++++++----------
 website/src/pages/index.js                  |  2 +-
 3 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/website/src/components/Playground/index.css b/website/src/components/Playground/index.css
index f492f54a..d051ba11 100644
--- a/website/src/components/Playground/index.css
+++ b/website/src/components/Playground/index.css
@@ -49,6 +49,10 @@
   align-self: center;
 }
 
+.Playground.standalone > .YogaNode {
+  transform: translateX(-175px);
+}
+
 .Playground .Actions {
   padding: 15px;
 }
diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js
index 00f803c4..586d17e5 100644
--- a/website/src/components/Playground/index.js
+++ b/website/src/components/Playground/index.js
@@ -218,7 +218,7 @@ export default class Playground extends Component<Props, State> {
 
     const playground = (
       <div
-        className="Playground"
+        className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
         onMouseDown={this.onMouseDown}
         style={{height, maxHeight: height}}
         ref={ref => {
@@ -232,47 +232,49 @@ export default class Playground extends Component<Props, State> {
           direction={direction}
           showGuides={this.props.showGuides}
         />
-        <Sidebar>
-          <div className="Actions">
-            <Row gutter={15}>
-              <Col span={12}>
-                <CodeGenerators
-                  layoutDefinition={layoutDefinition}
-                  direction={direction}
-                />
-              </Col>
-              <Col span={12}>
-                <URLShortener />
-              </Col>
-            </Row>
-          </div>
-          {this.state.selectedNodePath ? (
-            <Editor
-              node={selectedNode}
-              selectedNodeIsRoot={
-                selectedNodePath ? selectedNodePath.length === 0 : false
-              }
-              onChangeLayout={this.onChangeLayout}
-              onChangeSetting={(key, value) => this.setState({[key]: value})}
-              direction={direction}
-              onRemove={
-                selectedNodePath && selectedNodePath.length > 0
-                  ? this.onRemove
-                  : undefined
-              }
-              onAdd={
-                selectedNodePath &&
-                selectedNodePath.length < this.props.maxDepth
-                  ? this.onAdd
-                  : undefined
-              }
-            />
-          ) : (
-            <div className="NoContent">
-              Select a node to edit its properties
+        {!this.props.renderSidebar && (
+          <Sidebar>
+            <div className="Actions">
+              <Row gutter={15}>
+                <Col span={12}>
+                  <CodeGenerators
+                    layoutDefinition={layoutDefinition}
+                    direction={direction}
+                  />
+                </Col>
+                <Col span={12}>
+                  <URLShortener />
+                </Col>
+              </Row>
             </div>
-          )}
-        </Sidebar>
+            {this.state.selectedNodePath ? (
+              <Editor
+                node={selectedNode}
+                selectedNodeIsRoot={
+                  selectedNodePath ? selectedNodePath.length === 0 : false
+                }
+                onChangeLayout={this.onChangeLayout}
+                onChangeSetting={(key, value) => this.setState({[key]: value})}
+                direction={direction}
+                onRemove={
+                  selectedNodePath && selectedNodePath.length > 0
+                    ? this.onRemove
+                    : undefined
+                }
+                onAdd={
+                  selectedNodePath &&
+                  selectedNodePath.length < this.props.maxDepth
+                    ? this.onAdd
+                    : undefined
+                }
+              />
+            ) : (
+              <div className="NoContent">
+                Select a node to edit its properties
+              </div>
+            )}
+          </Sidebar>
+        )}
       </div>
     );
 
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index e3a8d5be..1061eef1 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -58,7 +58,7 @@ const HeroSection = () => (
 const PlaygroundSection = () => (
   <Row>
     <Col xl={24} lg={0} md={0} sm={0} xs={0}>
-      <Playground selectedNodePath={[]} showGuides={false} height={600} />
+      <Playground selectedNodePath={[]} showGuides={false} height={601} />
     </Col>
   </Row>
 );