| Index: trunk/mockups/glaucus-quick/glaucus.css |
| — | — | @@ -88,11 +88,21 @@ |
| 89 | 89 | } |
| 90 | 90 | |
| 91 | 91 | |
| | 92 | +/* Menu pane contains the popup menus, and takes background click events to clear */ |
| | 93 | +#menu-pane { |
| | 94 | + position: fixed; |
| | 95 | + top: 45px; |
| | 96 | + bottom: 0; |
| | 97 | + right: 0; |
| | 98 | + left: 0; |
| | 99 | + padding: 0; |
| | 100 | +} |
| | 101 | + |
| 92 | 102 | .menu { |
| 93 | 103 | display: none; |
| 94 | 104 | |
| 95 | 105 | position: absolute; |
| 96 | | - top: 45px; |
| | 106 | + top: 0px; |
| 97 | 107 | |
| 98 | 108 | background: black; |
| 99 | 109 | color: white; |
| — | — | @@ -117,4 +127,12 @@ |
| 118 | 128 | #you-menu { |
| 119 | 129 | left: 64px; |
| 120 | 130 | } |
| | 131 | +#contribute-menu { |
| | 132 | + left: 160px; |
| | 133 | +} |
| 121 | 134 | |
| | 135 | +#search-menu { |
| | 136 | + left: 212px; |
| | 137 | +} |
| | 138 | + |
| | 139 | + |
| Index: trunk/mockups/glaucus-quick/index.html |
| — | — | @@ -52,28 +52,36 @@ |
| 53 | 53 | <div id="content"> |
| 54 | 54 | </div> |
| 55 | 55 | |
| 56 | | - <ul class="menu" id="wiki-menu"> |
| 57 | | - <li id="menu-main-page"><a>Main Page</a> |
| 58 | | - <li id="menu-featured-content"><a>Featured Content</a> |
| 59 | | - <li id="menu-recent-changes"><a>Recent Changes</a> |
| 60 | | - <li id="menu-random-article"><a>Random Article</a> |
| 61 | | - </ul> |
| | 56 | + <div id="menu-pane"> |
| | 57 | + <ul class="menu" id="wiki-menu"> |
| | 58 | + <li id="menu-main-page"><a>Main Page</a> |
| | 59 | + <li id="menu-featured-content"><a>Featured Content</a> |
| | 60 | + <li id="menu-recent-changes"><a>Recent Changes</a> |
| | 61 | + <li id="menu-random-article"><a>Random Article</a> |
| | 62 | + </ul> |
| 62 | 63 | |
| 63 | | - <ul class="menu" id="article-menu"> |
| 64 | | - <li id="menu-history"><a>History</a> |
| 65 | | - <li id="menu-discussion"><a>Discussion</a> |
| 66 | | - <li id="menu-whatlinkshere"><a>What Links Here</a> |
| 67 | | - </ul> |
| | 64 | + <ul class="menu" id="article-menu"> |
| | 65 | + <li id="menu-history"><a>History</a> |
| | 66 | + <li id="menu-discussion"><a>Discussion</a> |
| | 67 | + <li id="menu-whatlinkshere"><a>What Links Here</a> |
| | 68 | + </ul> |
| 68 | 69 | |
| 69 | | - <ul class="menu" id="you-menu"> |
| 70 | | - <li id="menu-self"><a>Jorm (WMF)</a> |
| 71 | | - <li id="menu-your-notifications"><a>Your notifications</a> |
| 72 | | - <li id="menu-your-talk"><a>Your Talk Page</a> |
| 73 | | - <li id="menu-your-watchlist"><a>Your Watchlist</a> |
| 74 | | - <li id="menu-your-contribs"><a>Your Contributions</a> |
| 75 | | - <li id="menu-your-preferences"><a>Your Preferences</a> |
| 76 | | - <li><br> |
| 77 | | - <li id="menu-log-out"><a>Log Out</a> |
| 78 | | - </ul> |
| | 70 | + <ul class="menu" id="you-menu"> |
| | 71 | + <li id="menu-self"><a>Jorm (WMF)</a> |
| | 72 | + <li id="menu-your-notifications"><a>Your notifications</a> |
| | 73 | + <li id="menu-your-talk"><a>Your Talk Page</a> |
| | 74 | + <li id="menu-your-watchlist"><a>Your Watchlist</a> |
| | 75 | + <li id="menu-your-contribs"><a>Your Contributions</a> |
| | 76 | + <li id="menu-your-preferences"><a>Your Preferences</a> |
| | 77 | + <li><br> |
| | 78 | + <li id="menu-log-out"><a>Log Out</a> |
| | 79 | + </ul> |
| 79 | 80 | |
| | 81 | + <ul class="menu" id="contribute-menu"> |
| | 82 | + <li><a>Stub</a> |
| | 83 | + </ul> |
| | 84 | + <ul class="menu" id="search-menu"> |
| | 85 | + <li><a>Stub</a> |
| | 86 | + </ul> |
| | 87 | + </div> |
| 80 | 88 | |
| Index: trunk/mockups/glaucus-quick/app.js |
| — | — | @@ -1,22 +1,32 @@ |
| 2 | 2 | $(function() { |
| 3 | | - |
| | 3 | + |
| | 4 | + function hideMenus() { |
| | 5 | + var $active = $('.toolbar button.active'); |
| | 6 | + if ($active.length) { |
| | 7 | + $active.removeClass('active'); |
| | 8 | + $('.menu').hide(); |
| | 9 | + } |
| | 10 | + } |
| 4 | 11 | function setupMenu(button, menu) { |
| 5 | 12 | $(button).bind('click touchstart', function(e) { |
| 6 | 13 | e.preventDefault(); |
| | 14 | + |
| | 15 | + hideMenus(); |
| 7 | 16 | |
| 8 | | - var $active = $('.toolbar button.active'); |
| 9 | | - if ($active.length) { |
| 10 | | - $active.removeClass('active'); |
| 11 | | - $('.menu').hide(); |
| 12 | | - } else { |
| 13 | | - $(button).addClass('active'); |
| 14 | | - $(menu).show(); |
| 15 | | - } |
| | 17 | + $(button).addClass('active'); |
| | 18 | + $('#menu-pane').show(); |
| | 19 | + $(menu).show(); |
| 16 | 20 | }); |
| 17 | 21 | } |
| 18 | 22 | |
| | 23 | + $('#menu-pane').bind('click touchstart', function(e) { |
| | 24 | + hideMenus(); |
| | 25 | + $('#menu-pane').hide(); |
| | 26 | + }); |
| 19 | 27 | setupMenu('#menu-wiki', '#wiki-menu'); |
| 20 | 28 | setupMenu('#menu-article', '#article-menu'); |
| 21 | 29 | setupMenu('#menu-you', '#you-menu'); |
| | 30 | + setupMenu('#menu-contribute', '#contribute-menu'); |
| | 31 | + setupMenu('#menu-search', '#search-menu'); |
| 22 | 32 | |
| 23 | 33 | }); |