diff --git a/css/react-native.css b/css/react-native.css index c768d8370e9..7d506e34ec2 100644 --- a/css/react-native.css +++ b/css/react-native.css @@ -481,42 +481,53 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li border-bottom: 0; } -@media screen and (max-device-width: 960px) { +@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 * { @@ -555,18 +566,38 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li } } -@media screen and (min-device-width: 641px) and (max-device-width: 1024px) { +/** + * Multicolumn layout for phone (landscape only) & tablet (regardless its screen orientation)/ + */ +@media only screen and (min-device-width : 375px) and (max-device-width : 1024px) { .nav-docs-section ul { display: flex; flex-wrap: wrap; } - /* Display 2 columns on tablet */ + .nav-docs-section li { + width: 100%; + } +} + +/* 2 columns layout */ +@media + /*Phone, landscape screen orientation*/ + only screen and (min-device-width : 375px) and (max-device-width : 1024px) and (orientation : landscape), + /*Tablet, portrait screen orientation*/ + only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .nav-docs-section li { width: 50%; } } +/* 3 columns layout on tablet (landscape screen orientation) */ +@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { + .nav-docs-section li { + width: 33%; + } +} + .nav-blog li { margin-bottom: 5px; } @@ -1351,13 +1382,10 @@ div[data-twttr-id] iframe { } .survey-image { - position: absolute; - top: 10px; - height: 83px; - width: 120px; + float: left; + height: 128px; + width: 128px; background-image: url('../img/survey.png'); - background-size: 272px 198px; - background-position: -8px -8px; } .survey p { diff --git a/img/survey.png b/img/survey.png index 8baf2fa31b7..af025067da2 100644 Binary files a/img/survey.png and b/img/survey.png differ diff --git a/js/scripts.js b/js/scripts.js index 0932c31ff18..e59e8c1f4a6 100644 --- a/js/scripts.js +++ b/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; } } diff --git a/releases/0.27/css/react-native.css b/releases/0.27/css/react-native.css index c768d8370e9..7d506e34ec2 100644 --- a/releases/0.27/css/react-native.css +++ b/releases/0.27/css/react-native.css @@ -481,42 +481,53 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li border-bottom: 0; } -@media screen and (max-device-width: 960px) { +@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 * { @@ -555,18 +566,38 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li } } -@media screen and (min-device-width: 641px) and (max-device-width: 1024px) { +/** + * Multicolumn layout for phone (landscape only) & tablet (regardless its screen orientation)/ + */ +@media only screen and (min-device-width : 375px) and (max-device-width : 1024px) { .nav-docs-section ul { display: flex; flex-wrap: wrap; } - /* Display 2 columns on tablet */ + .nav-docs-section li { + width: 100%; + } +} + +/* 2 columns layout */ +@media + /*Phone, landscape screen orientation*/ + only screen and (min-device-width : 375px) and (max-device-width : 1024px) and (orientation : landscape), + /*Tablet, portrait screen orientation*/ + only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .nav-docs-section li { width: 50%; } } +/* 3 columns layout on tablet (landscape screen orientation) */ +@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { + .nav-docs-section li { + width: 33%; + } +} + .nav-blog li { margin-bottom: 5px; } @@ -1351,13 +1382,10 @@ div[data-twttr-id] iframe { } .survey-image { - position: absolute; - top: 10px; - height: 83px; - width: 120px; + float: left; + height: 128px; + width: 128px; background-image: url('../img/survey.png'); - background-size: 272px 198px; - background-position: -8px -8px; } .survey p { diff --git a/releases/0.27/img/survey.png b/releases/0.27/img/survey.png index 8baf2fa31b7..af025067da2 100644 Binary files a/releases/0.27/img/survey.png and b/releases/0.27/img/survey.png differ diff --git a/releases/0.27/js/scripts.js b/releases/0.27/js/scripts.js index 0932c31ff18..e59e8c1f4a6 100644 --- a/releases/0.27/js/scripts.js +++ b/releases/0.27/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; } } diff --git a/releases/0.27/versions.html b/releases/0.27/versions.html index addf50b5091..02530b189c1 100644 --- a/releases/0.27/versions.html +++ b/releases/0.27/versions.html @@ -1,4 +1,4 @@ -Documentation archive – React Native | A framework for building native apps using React

React Native Versions

React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

masterDocs
(current) 0.27DocsRelease Notes
0.26DocsRelease Notes
0.25DocsRelease Notes
0.24DocsRelease Notes
0.23DocsRelease Notes
0.22DocsRelease Notes
0.21DocsRelease Notes
0.20DocsRelease Notes
0.19DocsRelease Notes
0.18DocsRelease Notes

React Native Versions

React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

masterDocs
0.28-rcDocsRelease Notes
(current) 0.27DocsRelease Notes
0.26DocsRelease Notes
0.25DocsRelease Notes
0.24DocsRelease Notes
0.23DocsRelease Notes
0.22DocsRelease Notes
0.21DocsRelease Notes
0.20DocsRelease Notes
0.19DocsRelease Notes
0.18DocsRelease Notes

React Native Versions

React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

masterDocs
0.28-rcDocsRelease Notes
(current) 0.27DocsRelease Notes
0.26DocsRelease Notes
0.25DocsRelease Notes
0.24DocsRelease Notes
0.23DocsRelease Notes
0.22DocsRelease Notes
0.21DocsRelease Notes
0.20DocsRelease Notes
0.19DocsRelease Notes
0.18DocsRelease Notes

React Native Versions

React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

masterDocs
0.28-rcDocsRelease Notes
(current) 0.27DocsRelease Notes
0.26DocsRelease Notes
0.25DocsRelease Notes
0.24DocsRelease Notes
0.23DocsRelease Notes
0.22DocsRelease Notes
0.21DocsRelease Notes
0.20DocsRelease Notes
0.19DocsRelease Notes
0.18DocsRelease Notes
\ No newline at end of file