From d31a54a018953f07f74ed54027a0166db873e719 Mon Sep 17 00:00:00 2001
From: Andrej Badin <contact@andrejbadin.com>
Date: Mon, 30 May 2016 20:38:59 -0700
Subject: [PATCH] Fix scrolling issue on iOS devices.

Summary:
It was not possible to scroll due to overlaying (and visually not present) docs navigation layer.

Fixes issue introduced in PR #7669, see this [comment](https://github.com/facebook/react-native/pull/7669#issuecomment-220784882)
Additionally, script makes sure only single target is "in" and closes any other target with "in" state.
Closes https://github.com/facebook/react-native/pull/7731

Differential Revision: D3344927

Pulled By: vjeux

fbshipit-source-id: b2c64d90a2a6e531a9be79b936d6a5da61a69b22
---
 website/src/react-native/css/react-native.css | 37 ++++++++++++-------
 website/src/react-native/js/scripts.js        | 15 ++++++--
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 5217b1e62..7d506e34e 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -482,41 +482,52 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 }
 
 @media only screen and (max-device-width: 1024px) {
+  @-webkit-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @-moz-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @-o-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+
   .nav-docs {
     position: fixed;
     z-index: 90;
-    top: 0;
+    top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 53px 0 0 0;
     background: #3B3738;
-    /* Transition these properties */
-    transition: opacity 0.3s, visibility 0.3s;
-    visibility: hidden;
-    opacity: 0;
   }
 
   .nav-docs-viewport {
     border-top: 1px solid rgb(5, 165, 209);
-    height: 100%;
     padding: 25px;
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
-    top: -30px;
     position: relative;
-    transition: top 0.3s;
+    width: 100%;
+    height: 100%;
   }
 
   /* Active state */
   .nav-docs.in {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .nav-docs.in .nav-docs-viewport {
     top: 0;
+    -webkit-animation: slide-in 0.3s forwards;
+    -moz-animation: slide-in 0.3s forwards;
+    -o-animation: slide-in 0.3s forwards;
+    animation: slide-in 0.3s forwards;
   }
 
   .nav-docs * {
diff --git a/website/src/react-native/js/scripts.js b/website/src/react-native/js/scripts.js
index 0932c31ff..e59e8c1f4 100644
--- a/website/src/react-native/js/scripts.js
+++ b/website/src/react-native/js/scripts.js
@@ -8,7 +8,7 @@
 
   function init() {
     if (isMobile()) {
-      document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTargetNav);
+      document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTarget);
     }
 
     var backdrop = document.querySelector('.modal-backdrop');
@@ -46,12 +46,21 @@
     modal.classList.remove('modal-open');
   }
 
-  function toggleTargetNav(event) {
+  var toggledTarget;
+  function toggleTarget(event) {
     var target = document.body.querySelector(event.target.getAttribute('data-target'));
 
     if (target) {
       event.preventDefault();
-      target.classList.toggle('in');
+
+      if (toggledTarget === target) {
+        toggledTarget.classList.toggle('in');
+      } else {
+        toggledTarget && toggledTarget.classList.remove('in');
+        target.classList.add('in');
+      }
+
+      toggledTarget = target;
     }
   }