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>