button for expanding/collapsing top menu, fixes #8

- introduce `$top-menu-collapse` flag and `$top-menu-collapse-breakpoint` variable
- add TopMenuCollapse.js script
- new base64 encoded images: arrow-up and arrow-down (white colored)

README.md

@@ -56,6 +56,10 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+Latest (master):
+
+* Fixed #8: Setting `$top-menu-collapse` to `true` will enable script allowing to toggle if top menu should be collapsed (no wrapping) or expanded (wrapped, with auto height)
+
 v1.5.0 (2015-04-15):
 
 * Fixed #5: Added default style for colored issue links.

src/javascripts/modules/TopMenuCollapse.js

@@ -0,0 +1,100 @@
+var PurpleMine = PurpleMine || {};
+
+PurpleMine.TopMenuCollapse = (function()
+{
+    "use strict";
+
+    var self; // Make it work for browsers without Function.prototype.bind
+    var translations = {
+        en: {
+            toggler: "Expand/collapse top menu"
+        },
+        pl: {
+            toggler: "Zwiń/rozwiń górne menu"
+        }
+    };
+
+    function TopMenuCollapse()
+    {
+        self = this;
+
+        this.topMenuCollapsed = true;
+        this.$toggler         = null;
+        this.$topMenu         = $("#top-menu");
+        this.lang             = document.documentElement.lang;
+
+        if (typeof translations[this.lang] === "undefined")
+        {
+            this.lang = "en";
+        }
+
+        this._ = translations[this.lang];
+
+        if ("none" !== this.$topMenu.css("maxHeight"))
+        {
+            if (window.localStorage)
+            {
+                this.topMenuCollapsed =
+                    null === localStorage.getItem("PurpleMine:topMenuExpanded");
+            }
+
+            this.buildToggleButton();
+
+            if (false === this.topMenuCollapsed)
+            {
+                this.expandTopMenu(true);
+            }
+        }
+    }
+
+    TopMenuCollapse.prototype.buildToggleButton = function()
+    {
+        var togglerClass = "top-menu-toggler",
+            togglerHtml;
+
+        togglerHtml = "<a href=\"javascript:;\" class=\"" + togglerClass +
+                        "\" title=\"" + this._.toggler + "\"></a>";
+        this.$toggler = $(togglerHtml);
+
+        this.$topMenu.prepend(this.$toggler);
+        this.$toggler.on("click", this.toggleTopMenu);
+    };
+
+    TopMenuCollapse.prototype.toggleTopMenu = function()
+    {
+        if (self.topMenuCollapsed)
+        {
+            self.expandTopMenu();
+        }
+        else
+        {
+            self.collapseTopMenu();
+        }
+    };
+
+    TopMenuCollapse.prototype.expandTopMenu = function()
+    {
+        this.$topMenu.addClass("expanded");
+        this.$toggler.addClass("expanded");
+        this.topMenuCollapsed = false;
+
+        if (window.localStorage)
+        {
+            localStorage.setItem("PurpleMine:topMenuExpanded", "x");
+        }
+    };
+
+    TopMenuCollapse.prototype.collapseTopMenu = function()
+    {
+        this.$topMenu.removeClass("expanded");
+        this.$toggler.removeClass("expanded");
+        this.topMenuCollapsed = true;
+
+        if (window.localStorage)
+        {
+            localStorage.removeItem("PurpleMine:topMenuExpanded");
+        }
+    };
+
+    return TopMenuCollapse;
+}());

src/javascripts/theme.js

@@ -5,4 +5,5 @@ $(function()
 
     new PurpleMine.SidebarToggler();
     new PurpleMine.HistoryTabs();
+    new PurpleMine.TopMenuCollapse();
 });

src/sass/_variables.scss

@@ -17,6 +17,7 @@ $use-font-awesome:              true !default;
 $issue-subject-large:           true !default;
 $enable-sidebar-toggler:        true !default;
 $wiki-page-more-vertical-space: true !default;
+$top-menu-collapse:             false !default;
 
 
 //== Colors
@@ -72,8 +73,9 @@ $font-family-base:              $font-family-sans-serif !default;
 $font-size-base:                14px !default;
 $font-size-large:               1.285em !default;
 $font-size-large-px:            18px !default;
-$font-size-small:               .86em !default;
+$font-size-small-unitless:      .86 !default;
-$font-size-small-px:            12px !default;
+$font-size-small:               $font-size-small-unitless * 1em !default;
+$font-size-small-px:            floor($font-size-small-unitless * $font-size-base) !default;
 
 $font-size-h1:                  2.25em !default;
 $font-size-h2:                  1.75em !default;
@@ -466,6 +468,8 @@ $screen-xs-max:                 ($screen-sm-min - 1) !default;
 $screen-sm-max:                 ($screen-md-min - 1) !default;
 $screen-md-max:                 ($screen-lg-min - 1) !default;
 
+$top-menu-collapse-breakpoint:  $screen-lg-min !default;
+
 
 //== Content widths
 //

src/sass/application.scss

@@ -11,7 +11,6 @@
 @import "components/forms";
 @import "components/tabs";
 @import "components/pagination";
-@import "components/top";
 @import "components/content";
 @import "components/gravatar";
 @import "components/list";
@@ -27,6 +26,7 @@
 @import "components/elements";
 @import "components/jquery-ui";
 @import "components/icons";
+@import "components/top";
 @import "components/jstoolbar";
 @import "components/flash";
 @import "components/image-base64";

src/sass/components/_image-base64.scss

@@ -7,14 +7,22 @@
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
 }
 
-%image-arrow-left {
+%image-arrow-up {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgF1mUUUMBtml7EIAAAAjSURBVAjXYyAAWGEMRyhdJAih2QyhDCZBhAhcDVwXwhziAACuywJHmKAVPgAAAABJRU5ErkJggg==);
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR4Xu2SMQqAMAxFVUxOID2FQ+9R3cRjesX4A5lCoaUFB2nhkeQPLxQyi8jU8xbwYwGBC1CrIIFda4sgKq6vFgS/1eZQI2BwZ/5NlnNJcIAtt8ny04ermx/l4zsYgheccgigTIfmMAAAAABJRU5ErkJggg==);
 }
 
 %image-arrow-right {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACXRSTlMAgF1mUUUMBwa6cf6pAAAAIklEQVQI12PADwJgDBEYQ1ADxhBOgDIEFdBF1GG6EOYQCQC/wwKE7b2bNAAAAABJRU5ErkJggg==);
 }
 
+%image-arrow-down {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACXRSTlMAgFIFbBZWMTBl3YBFAAAALElEQVQI12MgDTAJCgoKgRjMjoKCzmChQEHBADCDQ1AcqkpRAcowM2AgEQAAvM4CiwrixCQAAAAASUVORK5CYII=);
+}
+
+%image-arrow-left {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgF1mUUUMBtml7EIAAAAjSURBVAjXYyAAWGEMRyhdJAih2QyhDCZBhAhcDVwXwhziAACuywJHmKAVPgAAAABJRU5ErkJggg==);
+}
+
 %image-calendar {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAIVBMVEUAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVUMftYpAAAACnRSTlMArIDn/dahwzIKIC4f+wAAADxJREFUCNdjYEhJACEGBk8HEGIQXrDYeMFiAYZVK1YB0QKGVSAApBcwMQgwMSDohaKChqKCxItXgc0pAADUBx5bh1ZBCgAAAABJRU5ErkJggg==);
 }

src/sass/components/_top.scss

@@ -9,6 +9,85 @@
     font-size: $font-size-small;
     @extend %clearfix;
 
+    @if $top-menu-collapse {
+        $toggler-position-v:    $padding-small-vertical + 1px;
+        $toggler-position-h:    $padding-small-vertical - 1px;
+
+        max-height: floor($font-size-base * $font-size-small-unitless * $line-height-base) + $padding-small-vertical;
+        padding-bottom: 0;
+        overflow: hidden;
+
+        &.expanded {
+            max-height: none;
+        }
+
+        a {
+            display: inline-block;
+            margin-bottom: $padding-small-vertical;
+            white-space: nowrap;
+        }
+
+        .top-menu-toggler {
+            display: block;
+            position: absolute;
+            top: $toggler-position-v;
+            left: $toggler-position-h;
+            @include user-select(none);
+
+            @if $use-font-awesome {
+                font-size: 14px;
+
+                &:before {
+                    content: $fa-var-caret-square-o-down;
+                }
+            } @else {
+                @extend %image-arrow-down;
+            }
+
+            @if $use-font-awesome {
+                @extend %fa-icon;
+                color: mix($top-menu-link, $top-menu-bg, 33%);
+                line-height: 1;
+
+                &:before {
+                    margin-right: 0;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    color: mix($top-menu-link-hover, $top-menu-bg, 50%);
+                }
+            } @else {
+                width: 15px;
+                height: 15px;
+                border-radius: $border-radius-base;
+                background-repeat: no-repeat;
+                background-position: center center;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: lighten($top-menu-bg, 15%);
+                }
+            }
+
+            &.expanded {
+                @if $use-font-awesome {
+                    &:before {
+                        content: $fa-var-caret-square-o-up;
+                    }
+                } @else {
+                    @extend %image-arrow-up;
+                }
+            }
+
+            @media screen and (min-width: $top-menu-collapse-breakpoint) {
+                display: none;
+            }
+        }
+    }
+
     ul {
         margin: 0;
         padding: 0;
@@ -32,6 +111,7 @@
     }
 
     #loggedas {
+        margin-left: 1em;
         float: right;
     }
 }