| Index: trunk/mockups/mobile-sections/sections.js |
| — | — | @@ -104,11 +104,20 @@ |
| 105 | 105 | a.href = '#' + header.id; |
| 106 | 106 | a.onclick = function() { |
| 107 | 107 | wm_toggle_section(header.section); |
| | 108 | + magicToc.style.display = 'none'; |
| 108 | 109 | }; |
| 109 | 110 | li.appendChild(a); |
| 110 | 111 | ul.appendChild(li); |
| 111 | 112 | })(); |
| 112 | 113 | } |
| | 114 | + |
| | 115 | + var magicTocTrigger = document.createElement('div'); |
| | 116 | + magicTocTrigger.id = 'magic-toc-trigger'; |
| | 117 | + magicTocTrigger.onclick = function() { |
| | 118 | + magicToc.style.display = 'block'; |
| | 119 | + } |
| | 120 | + magicTocTrigger.textContent = 'Contents'; |
| | 121 | + magicToc.parentNode.insertBefore(magicTocTrigger, magicToc); |
| 113 | 122 | } |
| 114 | 123 | |
| 115 | 124 | createSection0(); |
| Index: trunk/mockups/mobile-sections/sections.css |
| — | — | @@ -9,9 +9,22 @@ |
| 10 | 10 | background: #eee; |
| 11 | 11 | border: solid 1px #bbb; |
| 12 | 12 | |
| 13 | | - box-shadow: inset 0 0 1em #aaa; |
| | 13 | + box-shadow: inset 0 0 1em #aaa; |
| | 14 | +} |
| 14 | 15 | |
| | 16 | +#magic-toc-trigger { |
| | 17 | + display: block; |
| | 18 | + position: fixed; |
| | 19 | + right: 0; |
| | 20 | + top: 0; |
| | 21 | + width: 80px; |
| | 22 | + height: 22px; |
| | 23 | + |
| | 24 | + text-align: center; |
| | 25 | + padding-top: 8px; |
| 15 | 26 | |
| | 27 | + background: #eee; |
| | 28 | + border: solid 1px #bbb; |
| 16 | 29 | } |
| 17 | 30 | |
| 18 | 31 | |
| — | — | @@ -24,7 +37,7 @@ |
| 25 | 38 | } |
| 26 | 39 | |
| 27 | 40 | #magic-toc { |
| 28 | | - display: block; |
| | 41 | + display: block !important; |
| 29 | 42 | position: fixed; |
| 30 | 43 | left: 0; |
| 31 | 44 | top: 0; |
| — | — | @@ -32,4 +45,7 @@ |
| 33 | 46 | width: 320px; |
| 34 | 47 | } |
| 35 | 48 | |
| | 49 | + #magic-toc-trigger { |
| | 50 | + display: none; |
| | 51 | + } |
| 36 | 52 | } |