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: 300px) and (max-width: 420px) and ' + | 14 var mediaQuery = '(min-width: 300px) and (max-width: 420px) and ' + |
15 '(orientation: portrait), (max-width: 736px) and ' + | 15 '(orientation: portrait), (max-width: 736px) and ' + |
16 '(max-height: 420px) and (orientation: landscape)'; | 16 '(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 | 19 |
19 // Check for change in nav status. | 20 // Check for change in nav status. |
20 if (mobileNav != window.matchMedia(mediaQuery).matches) { | 21 if (mobileNav != window.matchMedia(mediaQuery).matches) { |
21 mobileNav = !mobileNav; | 22 mobileNav = !mobileNav; |
22 | 23 |
23 // Handle showing the top content / details sections according to state. | 24 // Handle showing the top content / details sections according to state. |
24 if (mobileNav) { | 25 if (mobileNav) { |
25 mainContent.classList.toggle('hidden', !detailsHidden); | 26 mainContent.classList.toggle('hidden', !detailsHidden); |
26 helpOuterBox.classList.toggle('hidden', detailsHidden); | 27 helpOuterBox.classList.toggle('hidden', detailsHidden); |
| 28 if (runnerContainer) { |
| 29 runnerContainer.classList.toggle('hidden', !detailsHidden); |
| 30 } |
27 } else if (!detailsHidden) { | 31 } else if (!detailsHidden) { |
28 // Non mobile nav with visible details. | 32 // Non mobile nav with visible details. |
29 mainContent.classList.remove('hidden'); | 33 mainContent.classList.remove('hidden'); |
30 helpOuterBox.classList.remove('hidden'); | 34 helpOuterBox.classList.remove('hidden'); |
| 35 if (runnerContainer) { |
| 36 runnerContainer.classList.remove('hidden'); |
| 37 } |
31 } | 38 } |
32 } | 39 } |
33 } | 40 } |
34 | 41 |
35 function setupMobileNav() { | 42 function setupMobileNav() { |
36 window.addEventListener('resize', onResize); | 43 window.addEventListener('resize', onResize); |
37 onResize(); | 44 onResize(); |
38 } | 45 } |
39 | 46 |
40 document.addEventListener('DOMContentLoaded', setupMobileNav); | 47 document.addEventListener('DOMContentLoaded', setupMobileNav); |
OLD | NEW |