From c6b1ed649fdc34533b485cef9a3fc527dc326551 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 6353bbfad..1f514a6cf 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 2436c1401..e812927d9 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);