Mercurial > wikked
changeset 316:61902f36c789
Add a pushpin icon to better communicate that you can toggle the menu.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Wed, 08 Oct 2014 23:27:00 -0700 |
parents | e07eee5e101a |
children | 01221c791547 |
files | wikked/assets/css/wikked/nav.less wikked/assets/js/wikked/views.js wikked/assets/tpl/nav.html |
diffstat | 3 files changed, 26 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/wikked/assets/css/wikked/nav.less Wed Oct 08 23:22:44 2014 -0700 +++ b/wikked/assets/css/wikked/nav.less Wed Oct 08 23:27:00 2014 -0700 @@ -2,8 +2,8 @@ // Navigation menu @wiki-menu-width: 12em; @wiki-menu-width-ext: 36em; -@wiki-shortcut-height: 3.9em; -@wiki-shortcut-width: 3.0em; +@wiki-shortcut-height: 3.6em; +@wiki-shortcut-width: 4.1em; .wrapper { transition: padding 200ms ease-in-out 0s; @@ -24,17 +24,33 @@ text-decoration: none; } +#wiki-menu-pin { + height: @wiki-shortcut-height; + padding: 0 1.5em 0 @wiki-shortcut-width; + text-align: right; + color: @color-gray-medium; + cursor: pointer; + + &:hover { + color: @color-gray-light; + } + + span { + line-height: @wiki-shortcut-height; + } +} +#wiki-menu-pin + #wiki-menu { position: fixed !important; top: 0; bottom: 0; left: -@wiki-menu-width; width: @wiki-menu-width; - padding-top: @wiki-shortcut-height; border: none; z-index: 10; overflow-y: auto; - color: @color-gray-dark; + color: @color-gray-light; background-color: @color-gray-dark; transition: left 200ms ease-in-out 0s, width 200ms ease-in-out 0s, @@ -70,7 +86,8 @@ top: 0; left: 0; z-index: 11; - padding: 1.28em 1.5em; + padding: 1.3em 1.5em; + line-height: 1em; font-weight: bold; color: @body-bg; background: @color-gray-dark;
--- a/wikked/assets/js/wikked/views.js Wed Oct 08 23:22:44 2014 -0700 +++ b/wikked/assets/js/wikked/views.js Wed Oct 08 23:27:00 2014 -0700 @@ -197,6 +197,7 @@ }, events: { "click #wiki-menu-shortcut": "_onMenuShortcutClick", + "click #wiki-menu-pin": "_onMenuShortcutClick", "mouseenter #wiki-menu-shortcut": "_onMenuShortcutHover", "mouseleave #wiki-menu-shortcut": "_onMenuShortcutLeave", "mouseenter #wiki-menu": "_onMenuHover",
--- a/wikked/assets/tpl/nav.html Wed Oct 08 23:22:44 2014 -0700 +++ b/wikked/assets/tpl/nav.html Wed Oct 08 23:27:00 2014 -0700 @@ -2,6 +2,9 @@ <span>W</span> </a> <nav id="wiki-menu" role="navigation" class="pure-menu pure-menu-open{{#if showMenu}} wiki-menu-active{{/if}}"> + <div id="wiki-menu-pin" title="Pin/unpin the wiki menu."> + <span class="glyphicon glyphicon-pushpin"></span> + </div> <ul class=""> <li><a href="/"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="/#/create/"><span class="glyphicon glyphicon-file"></span> New Page</a></li>