Merge pull request #3424 from rnplay/embedded-simulator-website

Documentation: Adjust styling and add Appetize link in the modal

website/layout/AutodocsLayout.js

@@ -470,9 +470,9 @@ var EmbeddedSimulator = React.createClass({
 
     return (
       <div className="column-left">
-        <p><strong>Run this example</strong></p>
-        <div className="modal-button-open">
-          <img src="/react-native/img/alertIOS.png" />
+        <p><a className="modal-button-open"><strong>Run this example</strong></a></p>
+        <div className="modal-button-open modal-button-open-img">
+          <img alt="Run example in simulator" width="170" height="358" src="/react-native/img/alertIOS.png" />
         </div>
         <Modal />
       </div>
@@ -492,7 +492,8 @@ var Modal = React.createClass({
           <div className="modal-content">
             <button className="modal-button-close">&times;</button>
             <div className="center">
-              <iframe className="simulator" src={url} width="274" height="550" frameborder="0" scrolling="no"></iframe>
+              <iframe className="simulator" src={url} width="256" height="550" frameborder="0" scrolling="no"></iframe>
+              <p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p>
             </div>
           </div>
         </div>

website/src/react-native/css/react-native.css

@@ -880,7 +880,7 @@ small code, li code, p code {
   height: 95%;
   left: 0;
   margin: auto;
-  max-height: 620px;
+  max-height: 648px;
   max-width: 460px;
   overflow: auto;
   position: fixed;
@@ -890,23 +890,27 @@ small code, li code, p code {
   z-index: 9999;
 }
 
-.modal-open {
-  display: block;
-}
+.modal-open { display: block; }
 
 .modal-content {
-  padding: 40px 24px 24px 24px;
+  padding: 40px 24px 8px 24px;
   position: relative;
 }
 
-.modal-content iframe {
-  margin: 0 auto;
-}
+.modal-content iframe { margin: 0 auto; }
 
 .modal-button-open {
+  cursor: pointer;
   text-align: center;
 }
 
+.modal-button-open-img {
+  background: #05A5D1;
+  height: 358px;
+}
+
+.modal-button-open-img:hover img { opacity: 0.9; }
+
 .modal-button-close {
   background: transparent;
   border-radius: 0 0 0 4px;
@@ -921,12 +925,13 @@ small code, li code, p code {
   right: 0;
   top: 0;
 }
-  .modal-button-close:active,
-  .modal-button-close:focus,
-  .modal-button-close:hover {
-    background: #EAF8FD;
-    outline: none;
-  }
+
+.modal-button-close:active,
+.modal-button-close:focus,
+.modal-button-close:hover {
+  background: #EAF8FD;
+  outline: none;
+}
 
 @media screen and (max-width: 960px) {
   .nav-main {

website/src/react-native/js/scripts.js

@@ -8,12 +8,16 @@
 
   function init() {
     var backdrop = document.querySelector('.modal-backdrop');
-    var modalButtonOpen = document.querySelector('.modal-button-open');
+    var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
     var modalButtonClose = document.querySelector('.modal-button-close');
 
     backdrop.addEventListener('click', hideModal);
-    modalButtonOpen.addEventListener('click', showModal);
     modalButtonClose.addEventListener('click', hideModal);
+
+    // Bind event to NodeList items
+    for (var i = 0; i < modalButtonOpenList.length; ++i) {
+      modalButtonOpenList[i].addEventListener('click', showModal);
+    }
   }
 
   function showModal(e) {