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 @@ -