Mercurial > wikked

changeset 272:72c522ba2da6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Change to a vertical left-side menu.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 25 Sep 2014 10:55:42 -0700
parents cf313f55a3ab
children 8e45a4f7f265
files wikked/assets/css/wikked/main.less wikked/assets/css/wikked/nav.less wikked/assets/js/wikked/views.js wikked/assets/tpl/nav.html
diffstat 4 files changed, 114 insertions(+), 113 deletions(-) [+]
line wrap: on
line diff
--- a/wikked/assets/css/wikked/main.less	Thu Sep 25 10:54:55 2014 -0700
+++ b/wikked/assets/css/wikked/main.less	Thu Sep 25 10:55:42 2014 -0700
@@ -68,3 +68,20 @@
     }
 }
 
+// Allow free links and forms in menus.
+.pure-menu .pure-menu-link,
+.pure-menu .pure-menu-form {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+}
+
+@media (min-width: 48em) {
+    // Place right-aligned menu items to, well, to the right.
+    .pure-menu .pure-menu-horizontal-right {
+        float: right;
+    }
+    .pure-menu-horizontal:after {
+        clear: both;
+    }
+}
--- a/wikked/assets/css/wikked/nav.less	Thu Sep 25 10:54:55 2014 -0700
+++ b/wikked/assets/css/wikked/nav.less	Thu Sep 25 10:55:42 2014 -0700
@@ -1,74 +1,41 @@
-
-// Extending Pure's horizontal menu.
-
-// Allow free links and forms in menus.
-.pure-menu .pure-menu-link,
-.pure-menu .pure-menu-form {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-}
-
-// Make menu forms tighter.
-.pure-menu-form fieldset {
-    padding: 0;
-}
-
-@media (min-width: 48em) {
-    // Place right-aligned menu items to, well, to the right.
-    .pure-menu .pure-menu-horizontal-right {
-        float: right;
-    }
-    .pure-menu-horizontal:after {
-        clear: both;
-    }
-}
-
 
 // Navigation menu
-@wiki-menu-height: 4.5em;
-@wiki-shortcut-width: 4em;
-@wiki-shortcut-height: 3em;
+@wiki-menu-width: 12em;
+@wiki-menu-width-ext: 36em;
+@wiki-shortcut-height: 3.9em;
 
-body {
-    padding-top: @wiki-shortcut-height;
-    transition: padding 200ms ease-in-out 0s,
-                margin 200ms ease-in-out 0s;
+.wrapper {
+    transition: padding 200ms ease-in-out 0s;
+}
+.wrapper.wiki-menu-active {
+    padding-left: @wiki-menu-width !important;
+}
+.wrapper.wiki-menu-inactive {
+    padding-left: 0 !important;
 }
 
 .wiki-menu-a {
-    color: @color-gray-dark;
+    color: @color-gray-light;
 }
 .wiki-menu-a-hover {
     background: @color-green-light;
     text-decoration: none;
 }
 
-.wiki-menu-scrolling {
-    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
-}
-
-.wiki-menu-active {
-    top: 0 !important;
-}
-
-.wiki-menu-inactive {
-    top: -2*@wiki-menu-height !important;
-}
-
 #wiki-menu {
     position: fixed !important;
-    top: -2*@wiki-menu-height;
-    left: 0;
-    width: 100%;
+    top: 0;
+    bottom: 0;
+    left: -@wiki-menu-width;
+    width: @wiki-menu-width;
+    padding-top: @wiki-shortcut-height;
+    border: none;
     z-index: 10;
-    padding-left: @wiki-shortcut-width;
+    overflow-y: auto;
     color: @color-gray-dark;
-    background-color: @body-bg;
-    border-bottom: none;
-    transition: box-shadow 200ms ease-in-out 0s,
-                border-bottom 200ms ease-in-out 0s,
-                top 200ms ease-in-out 0s,
+    background-color: @color-gray-dark;
+    transition: left 200ms ease-in-out 0s,
+                width 200ms ease-in-out 0s,
                 !important;
     a {
         padding: 1em;
@@ -80,6 +47,19 @@
     a:hover, a:focus {
         .wiki-menu-a-hover();
     }
+
+    ul {
+        border-top: 1px solid @color-gray-medium;
+    }
+}
+#wiki-menu.wiki-menu-active {
+    left: 0 !important;
+}
+#wiki-menu.wiki-menu-inactive {
+    left: -@wiki-menu-width !important;
+}
+#wiki-menu.wiki-menu-ext {
+    width: @wiki-menu-width-ext !important;
 }
 
 #wiki-menu-shortcut {
@@ -98,26 +78,41 @@
 @media (min-width: 48em) {
     // Hide the shortcut and move the horizontal menu down.
     #wiki-menu {
-        top: 0;
+        //left: 0;
     }
-    body {
-        padding-top: @wiki-menu-height;
+    .wrapper {
+        //padding-left: @wiki-menu-width;
     }
 }
 
 // Search
-form#search button {
-    background: none;
-    padding: 0.5em;
-    &:hover { color: @link-hover-color; }
+.search-result-hover {
+    background: @color-gray-light;
+}
+
+b.match {
+    color: @color-orange;
+    background: @color-gray-light;
 }
+
+form#search {
+    width: 100%;
+    padding: 0.2em 1em;
+
+    button {
+        background: none;
+        padding: 0.5em;
+        &:hover { color: @link-hover-color; }
+    }
+}
+
 ul#search-preview {
     position: absolute;
     list-style: none;
     margin: 0;
     padding: 0;
     top: auto;
-    left: 0;
+    left: 1em;
     z-index: 12;
     visibility: visible;
     background: #FFF;
@@ -126,27 +121,31 @@
     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
 
     li {
-        border-bottom: 1px solid #EEE;
+        border-bottom: 1px solid @color-gray-light;
         margin: 0;
         padding: 0;
         width: 100%;
-
-        &:hover, &:focus {
-        }
     }
     a {
         margin: 0;
         padding: 0.5em;
         display: inline-block;
         width: 100%;
+        color: @color-gray-dark;
+
+        &:link, &:active, &:visited {
+            color: @color-gray-dark;
+        }
+        &:hover, &:focus {
+            color: @color-gray-dark;
+            .search-result-hover();
+        }
     }
 }
+
 ul.search-results {
     list-style: none;
 }
-b.match {
-    background: #ffeb84;
-}
 
 // Footer
 .footer-wrapper {
--- a/wikked/assets/js/wikked/views.js	Thu Sep 25 10:54:55 2014 -0700
+++ b/wikked/assets/js/wikked/views.js	Thu Sep 25 10:55:42 2014 -0700
@@ -186,12 +186,9 @@
             this.searchPreviewList.hide();
             this.activeResultIndex = -1;
 
-            // Add a pretty shadow on the menu when scrolling down.
-            $(window).scroll(this, this._onWindowScroll);
-
             this.wikiMenu = $('#wiki-menu');
-            this.isScrolled = ($(window).scrollTop() > 0);
-            this.isMenuActive = (this.wikiMenu.css('top') == '0px');
+            this.wrapperAndWikiMenu = $('.wrapper, #wiki-menu');
+            this.isMenuActive = (this.wikiMenu.css('left') == '0px');
             this.isMenuActiveLocked = false;
 
             return this;
@@ -209,42 +206,33 @@
             "focus #search-query": "_searchQueryFocused",
             "blur #search-query": "_searchQueryBlurred"
         },
-        _onWindowScroll: function(e) {
-            var scrollTop = $(window).scrollTop();
-            if (scrollTop > 0 && !e.data.isScrolled) {
-                e.data.wikiMenu.addClass('wiki-menu-scrolling');
-                e.data.isScrolled = true;
-            } else if (scrollTop === 0 && e.data.isScrolled) {
-                e.data.wikiMenu.removeClass('wiki-menu-scrolling');
-                e.data.isScrolled = false;
-            }
-        },
         _onMenuShortcutClick: function(e) {
             this.isMenuActive = !this.isMenuActive;
         },
         _onMenuShortcutHover: function(e) {
-            if (this.isMenuActive || this.isMenuActiveLocked)
-                return;
-            this.wikiMenu.toggleClass('wiki-menu-inactive', false);
-            this.wikiMenu.toggleClass('wiki-menu-active', true);
+            if (!this.isMenuActive && !this.isMenuActiveLocked)
+                this._toggleWikiMenu(true);
         },
         _onMenuShortcutLeave: function(e) {
-            if (this.isMenuActive || this.isMenuActiveLocked)
-                return;
-            this.wikiMenu.toggleClass('wiki-menu-active', false);
-            this.wikiMenu.toggleClass('wiki-menu-inactive', true);
+            if (!this.isMenuActive && !this.isMenuActiveLocked)
+                this._toggleWikiMenu(false);
         },
         _onMenuHover: function(e) {
-            if (this.isMenuActive || this.isMenuActiveLocked)
-                return;
-            this.wikiMenu.toggleClass('wiki-menu-inactive', false);
-            this.wikiMenu.toggleClass('wiki-menu-active', true);
+            if (!this.isMenuActive && !this.isMenuActiveLocked)
+                this._toggleWikiMenu(true);
         },
         _onMenuLeave: function(e) {
-            if (this.isMenuActive || this.isMenuActiveLocked)
-                return;
-            this.wikiMenu.toggleClass('wiki-menu-active', false);
-            this.wikiMenu.toggleClass('wiki-menu-inactive', true);
+            if (!this.isMenuActive && !this.isMenuActiveLocked)
+                this._toggleWikiMenu(false);
+        },
+        _toggleWikiMenu: function(onOff) {
+            if (onOff) {
+                this.wrapperAndWikiMenu.toggleClass('wiki-menu-inactive', false);
+                this.wrapperAndWikiMenu.toggleClass('wiki-menu-active', true);
+            } else {
+                this.wrapperAndWikiMenu.toggleClass('wiki-menu-active', false);
+                this.wrapperAndWikiMenu.toggleClass('wiki-menu-inactive', true);
+            }
         },
         _submitSearch: function(e) {
             e.preventDefault();
@@ -307,17 +295,19 @@
         },
         _updateActiveResult: function() {
             var entries = this.searchPreviewList.children();
-            entries.toggleClass('wiki-menu-a-hover', false);
+            entries.toggleClass('search-result-hover', false);
             if (this.activeResultIndex >= 0)
-                $(entries[this.activeResultIndex]).toggleClass('wiki-menu-a-hover', true);
+                $(entries[this.activeResultIndex]).toggleClass('search-result-hover', true);
         },
         _searchQueryFocused: function(e) {
             this.isMenuActiveLocked = true;
+            this.wikiMenu.toggleClass('wiki-menu-ext', true);
         },
         _searchQueryBlurred: function(e) {
             $(e.currentTarget).val('').trigger('input');
+            this.wikiMenu.toggleClass('wiki-menu-ext', false);
             this.isMenuActiveLocked = false;
-            if (!this.wikiMenu.is(':focus'))
+            if ($(document.activeElement).parents('#wiki-menu').length === 0)
                 this._onMenuLeave(e);
         }
     });
--- a/wikked/assets/tpl/nav.html	Thu Sep 25 10:54:55 2014 -0700
+++ b/wikked/assets/tpl/nav.html	Thu Sep 25 10:55:42 2014 -0700
@@ -1,12 +1,7 @@
 <a id="wiki-menu-shortcut" class="wiki-logo">
     <span>W</span>
 </a>
-<nav id="wiki-menu" role="navigation" class="pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
-    <!--form id="newpage" class="pure-form pure-menu-form">
-        <fieldset>
-            <button type="submit" class="pure-button">New Page</button>
-        </fieldset>
-    </form-->
+<nav id="wiki-menu" role="navigation" class="pure-menu pure-menu-open">
     <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>
@@ -16,12 +11,12 @@
     </ul>
     <form role="search" id="search" class="pure-form pure-menu-form">
         <fieldset>
-            <input type="text" name="q" id="search-query" class="form-control input-sm" placeholder="Search..." autocomplete="off"></input>
+            <button type="submit" class="pure-button"><span class="glyphicon glyphicon-search"></span></button>
+            <input type="text" name="q" id="search-query" class="pure-input-1" placeholder="Search..." autocomplete="off"></input>
             <ul id="search-preview"></ul>
-            <button type="submit" class="pure-button"><span class="glyphicon glyphicon-search"></span></button>
         </fieldset>
     </form>
-    <ul class="pure-menu-horizontal-right">
+    <ul class="">
         {{#if user}}
         <li><a href="{{url_profile}}"><span class="glyphicon glyphicon-cog"></span> {{user.username}}</a></li>
         <li><a href="{{url_logout}}"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>