From 77abc8fc61549c3722fbcd1894a2a0c4f36164be Mon Sep 17 00:00:00 2001
From: Joel Marcey <joelm@fb.com>
Date: Thu, 23 Jun 2016 18:13:41 -0700
Subject: [PATCH] Move Component Embedded Simulator next to its example

Summary:
Right now the embedded simulator is always at the top right corner.
This can be confusing as to what code is associated with the simulation.

So, move the simulator next to its actual code.

This has the added benefit of allowing us to use the React Native
Web Player for the simpler examples in the components.
Closes https://github.com/facebook/react-native/pull/8384

Differential Revision: D3479056

Pulled By: bestander

fbshipit-source-id: f400d8387ec771b94d5e798c1e955b25f9a0f1bf
---
 website/layout/AutodocsLayout.js              | 14 +++----
 website/src/react-native/css/react-native.css | 42 ++++++++++++-------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index 6353bbfad897cd..1f514a6cfe13f7 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -775,7 +775,7 @@ var EmbeddedSimulator = React.createClass({
       : <img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png" />;
 
     return (
-      <div className="column-left">
+      <div className="embedded-simulator">
         <p><a className="modal-button-open"><strong>Run this example</strong></a></p>
         <div className="modal-button-open modal-button-open-img">
           {imagePreview}
@@ -855,9 +855,12 @@ var Autodocs = React.createClass({
           path={example.path}
           metadata={metadata}
         />
-        <Prism>
-          {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
-        </Prism>
+        <div className="example-container">
+          <Prism>
+           {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
+          </Prism>
+          <EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
+        </div>
       </div>
     );
   },
@@ -901,9 +904,6 @@ var Autodocs = React.createClass({
               {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
             </div>
           </div>
-
-          <EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
-
         </section>
       </Site>
     );
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 2436c14019ff73..e812927d97da16 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -125,6 +125,33 @@ html * {
   rendering-intent: auto;
 }
 
+.example-container {
+  position: relative;
+}
+
+.embedded-simulator, .embedded-simulator * {
+  box-sizing: border-box;
+}
+
+.embedded-simulator p {
+  text-align: center;
+  color: #999;
+}
+
+.embedded-simulator {
+  width: 210px;
+  position: absolute;
+  right: -200px;
+  top: 0;
+}
+
+@media screen and (max-width: 680px) {
+  .embedded-simulator {
+    position: relative;
+    right: 0;
+  }
+}
+
 .prism {
   white-space: pre-wrap;
   font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
@@ -1027,21 +1054,6 @@ small code, li code, p code {
   text-decoration: none !important;
 }
 
-.column-left, .column-left * {
-  box-sizing: border-box;
-}
-
-.column-left p {
-  text-align: center;
-  color: #999;
-}
-
-.column-left {
-  float: left;
-  padding: 20px;
-  width: 210px;
-}
-
 /* Modal */
 .modal-backdrop {
   background: rgba(0,0,0,.4);