status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Andrej Badin 2016-05-30 20:38:59 -07:00 committed by Facebook Github Bot 4
parent 7914d3334d
commit d31a54a018
2 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
website/src/react-native/css/react-native.css
View File

@ -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) { @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 { .nav-docs {
position: fixed; position: fixed;
z-index: 90; z-index: 90;
top: 0; top: -100%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 53px 0 0 0; padding: 53px 0 0 0;
background: #3B3738; background: #3B3738;
/* Transition these properties */
transition: opacity 0.3s, visibility 0.3s;
visibility: hidden;
opacity: 0;
} }
.nav-docs-viewport { .nav-docs-viewport {
border-top: 1px solid rgb(5, 165, 209); border-top: 1px solid rgb(5, 165, 209);
height: 100%;
padding: 25px; padding: 25px;
overflow: scroll; overflow: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
top: -30px;
position: relative; position: relative;
transition: top 0.3s; width: 100%;
height: 100%;
} }
/* Active state */ /* Active state */
.nav-docs.in { .nav-docs.in {
visibility: visible;
opacity: 1;
}
.nav-docs.in .nav-docs-viewport {
top: 0; 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 * { .nav-docs * {

15
website/src/react-native/js/scripts.js vendored
View File

@ -8,7 +8,7 @@
function init() { function init() {
if (isMobile()) { 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'); var backdrop = document.querySelector('.modal-backdrop');
@ -46,12 +46,21 @@
modal.classList.remove('modal-open'); modal.classList.remove('modal-open');
} }
function toggleTargetNav(event) { var toggledTarget;
function toggleTarget(event) {
var target = document.body.querySelector(event.target.getAttribute('data-target')); var target = document.body.querySelector(event.target.getAttribute('data-target'));
if (target) { if (target) {
event.preventDefault(); 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;
} }
} }