From 9eb03b1bcd97c949548ce172daac6687dd5b85f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emil=20Sj=C3=B6lander?= <emilsj@fb.com>
Date: Tue, 13 Feb 2018 03:50:40 -0800
Subject: [PATCH] playground doc page first draft

Reviewed By: danielbuechele

Differential Revision: D6968725

fbshipit-source-id: 588018a347a723b32e4dcab407c4da2db0d85130
---
 website/src/templates/index.css            | 11 +++++++--
 website/src/templates/withPlayground.js    | 27 ++++++++--------------
 website/src/templates/withoutPlayground.js |  2 +-
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/website/src/templates/index.css b/website/src/templates/index.css
index db4c06a2..6d698dfb 100644
--- a/website/src/templates/index.css
+++ b/website/src/templates/index.css
@@ -1,6 +1,9 @@
-.doc-block .markdown {
+.no-playground .markdown {
   padding-top: 50px;
-  padding-bottom: 50px;
+}
+
+.doc-block .markdown {
+  padding-bottom: 20px;
 }
 
 .doc-block .overview {
@@ -34,4 +37,8 @@
   line-height: 180%;
   font-size: 14px;
   font-weight: 400;
+}
+
+.doc-block .prop {
+  margin-bottom: 20px;
 }
\ No newline at end of file
diff --git a/website/src/templates/withPlayground.js b/website/src/templates/withPlayground.js
index 090b59da..036a2362 100644
--- a/website/src/templates/withPlayground.js
+++ b/website/src/templates/withPlayground.js
@@ -17,32 +17,19 @@ import DocsSidebar from '../components/DocsSidebar';
 import EditValue from '../components/Playground/EditValue';
 import Link from 'gatsby-link';
 import {Button, Icon, Row, Col} from 'antd';
+import './index.css';
 
 export default ({pathContext}) => (
-  <Page>
+  <Page className="doc-block">
     <Playground
       selectedNodePath={[]}
       showGuides={false}
       renderSidebar={(layout, onChange) => (
         <DocsSidebar>
-          <Link to="/docs">
-            <Icon type="left-circle-o" /> back to overview
-          </Link>
-          <div dangerouslySetInnerHTML={{__html: pathContext.html}} />
-          {pathContext.frontmatter.editableProperties && (
-            <Row type="flex" align="bottom">
-              <Col span={12}>
-                <h3>Try it out</h3>
-              </Col>
-              <Col span={12}>
-                <Link to="/playground">
-                  <Icon type="export" /> Open in playground
-                </Link>
-              </Col>
-            </Row>
-          )}
+          <div className="markdown" dangerouslySetInnerHTML={{__html: pathContext.html}} />
+          
           {(pathContext.frontmatter.editableProperties || []).map(prop => (
-            <div key={prop}>
+            <div key={prop} className="prop">
               <h4>{prop}</h4>
               <EditValue
                 property={prop}
@@ -51,6 +38,10 @@ export default ({pathContext}) => (
               />
             </div>
           ))}
+          
+          <Link to="/docs" className="overview">
+            BACK TO OVERVIEW
+          </Link>
         </DocsSidebar>
       )}
     />
diff --git a/website/src/templates/withoutPlayground.js b/website/src/templates/withoutPlayground.js
index af50a860..157ad3c6 100644
--- a/website/src/templates/withoutPlayground.js
+++ b/website/src/templates/withoutPlayground.js
@@ -19,7 +19,7 @@ import './index.css';
 
 export default ({pathContext}) => {
   return (
-    <Page className="doc-block">
+    <Page className="doc-block no-playground">
       <Padded>
         <Row>
           <Col xl={16} lg={16} md={24} sm={24} xs={24}>