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 '(max-height: 736px) and (min-height: 401px) and ' + | 15 '(min-height: 401px), ' + |
16 '(orientation: portrait), (max-width: 736px) and ' + | 16 '(max-height: 736px) and (min-height: 240px) and ' + |
17 '(max-height: 420px) and (min-height: 240px) and ' + | 17 '(min-width: 421px)'; |
18 '(min-width: 421px) and (orientation: landscape)'; | |
19 | 18 |
20 var detailsHidden = helpOuterBox.classList.contains('hidden'); | 19 var detailsHidden = helpOuterBox.classList.contains('hidden'); |
21 var runnerContainer = document.querySelector('.runner-container'); | 20 var runnerContainer = document.querySelector('.runner-container'); |
22 | 21 |
23 // Check for change in nav status. | 22 // Check for change in nav status. |
24 if (mobileNav != window.matchMedia(mediaQuery).matches) { | 23 if (mobileNav != window.matchMedia(mediaQuery).matches) { |
25 mobileNav = !mobileNav; | 24 mobileNav = !mobileNav; |
26 | 25 |
27 // Handle showing the top content / details sections according to state. | 26 // Handle showing the top content / details sections according to state. |
28 if (mobileNav) { | 27 if (mobileNav) { |
(...skipping 12 matching lines...) Expand all Loading... |
41 } | 40 } |
42 } | 41 } |
43 } | 42 } |
44 | 43 |
45 function setupMobileNav() { | 44 function setupMobileNav() { |
46 window.addEventListener('resize', onResize); | 45 window.addEventListener('resize', onResize); |
47 onResize(); | 46 onResize(); |
48 } | 47 } |
49 | 48 |
50 document.addEventListener('DOMContentLoaded', setupMobileNav); | 49 document.addEventListener('DOMContentLoaded', setupMobileNav); |
OLD | NEW |