| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 var mobileNav = false; | 5 var mobileNav = false; |
| 6 | 6 |
| 7 /** | 7 /** |
| 8 * For small screen mobile the navigation buttons are moved | 8 * For small screen mobile the navigation buttons are moved |
| 9 * below the advanced text. | 9 * below the advanced text. |
| 10 */ | 10 */ |
| 11 function onResize() { | 11 function onResize() { |
| 12 var helpOuterBox = document.querySelector('#details'); | 12 var helpOuterBox = document.querySelector('#details'); |
| 13 var mainContent = document.querySelector('#main-content'); | 13 var mainContent = document.querySelector('#main-content'); |
| 14 var mediaQuery = '(min-width: 240px) and (max-width: 420px) and ' + | 14 var mediaQuery = '(min-width: 240px) and (max-width: 420px) and ' + |
| 15 '(orientation: portrait), (max-width: 736px) and ' + | 15 '(max-height: 736px) and (orientation: portrait),' + |
| 16 '(max-height: 420px) and (orientation: landscape)'; | 16 '(max-width: 736px) and (max-height: 420px) and (orientation: landscape)'; |
| 17 var detailsHidden = helpOuterBox.classList.contains('hidden'); | 17 var detailsHidden = helpOuterBox.classList.contains('hidden'); |
| 18 var runnerContainer = document.querySelector('.runner-container'); | 18 var runnerContainer = document.querySelector('.runner-container'); |
| 19 | 19 |
| 20 // Check for change in nav status. | 20 // Check for change in nav status. |
| 21 if (mobileNav != window.matchMedia(mediaQuery).matches) { | 21 if (mobileNav != window.matchMedia(mediaQuery).matches) { |
| 22 mobileNav = !mobileNav; | 22 mobileNav = !mobileNav; |
| 23 | 23 |
| 24 // Handle showing the top content / details sections according to state. | 24 // Handle showing the top content / details sections according to state. |
| 25 if (mobileNav) { | 25 if (mobileNav) { |
| 26 mainContent.classList.toggle('hidden', !detailsHidden); | 26 mainContent.classList.toggle('hidden', !detailsHidden); |
| (...skipping 11 matching lines...) Expand all Loading... |
| 38 } | 38 } |
| 39 } | 39 } |
| 40 } | 40 } |
| 41 | 41 |
| 42 function setupMobileNav() { | 42 function setupMobileNav() { |
| 43 window.addEventListener('resize', onResize); | 43 window.addEventListener('resize', onResize); |
| 44 onResize(); | 44 onResize(); |
| 45 } | 45 } |
| 46 | 46 |
| 47 document.addEventListener('DOMContentLoaded', setupMobileNav); | 47 document.addEventListener('DOMContentLoaded', setupMobileNav); |
| OLD | NEW |