Add hover effect and appetize link

Illyism · Oct 14, 2015 · 080746c · 080746c
1 parent 21a8145
commit 080746c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/website/layout/AutodocsLayout.js b/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 href="https://appetize.io">appetize.io</a></p>
             </div>
           </div>
         </div>

diff --git a/website/src/react-native/css/react-native.css b/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,22 +890,24 @@ 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.90; }
 
 .modal-button-close {
   background: transparent;

diff --git a/website/src/react-native/js/scripts.js b/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) {