Vector: Restore collapsibleNav design improvements

Follows-up db13c65 and c3d544412, which removed the
collapsibleNav module. However it also undid various design
changes that really should not have been part of the
collapsibleNav module but were significant, I've restored those.

Basically, this merges the old collapsibleNav.less into
navigation.less. I won't list all chnages, but here's a few:

* Increase spacing between heading and side of portal (via margin and
  padding on the portal, not on the heading itself).
  The headings were almost against the browser edge.

* Change color of heading slightly (#4d4d4d instead of #444).

* Move separator line from below each heading to between sidebar
  sections.

* Change spacing between list items from 0.5 on the bottom to
  0.25em on top and bottom (effectively the same, except aligns
  the first and last item better in relation to the heading and
  the separator line).

* (js-only enhancement) Mark first section with class "first",
  and remove the separator line, heading and offset from that one.

Also:

* Clean up 'h3' padding/margin situation.
  They were inheriting 0.3em of bottom margin from the global
  'h3' selector for content. This was a bit of a fragile
  dependency and was just a coincidence. Reset the margin against
  the global selector and added it to the local padding instead.
  No visual change.

* Remove unused less variables.

Change-Id: I979179a82c1de9b1b7d66310ebd5daf8e6aa1802

diff --git a/skins/vector/components/navigation.less b/skins/vector/components/navigation.less
index 24e9843..8b384ac 100644 (file)
--- a/skins/vector/components/navigation.less
+++ b/skins/vector/components/navigation.less
@@ -86,37 +86,37 @@ div#mw-panel {
        left: 0;
 
        div.portal {
-               padding-bottom: 1.5em;
+               margin: 0 0.6em 0 0.7em;
+               padding: 0.25em 0;
                direction: ltr;
+               background-position: top left;
+               background-repeat: no-repeat;
+               .background-image('images/portal-break.png');
 
                h3 {
+                       font-size: @menu-main-heading-font-size;
+                       color: @menu-main-heading-color;
                        font-weight: normal;
-                       color: #444;
+                       margin: 0;
                        padding: @menu-main-heading-padding;
                        cursor: default;
                        border: none;
-                       font-size: @menu-main-heading-font-size;
                }
 
                div.body {
-                       padding-top: 0.5em;
                        margin: @menu-main-body-margin;
-
-                       .background-image('images/portal-break.png');
-                       background-repeat: no-repeat;
-                       background-position: top left;
+                       padding-top: 0;
 
                        ul {
                                list-style-type: none;
                                list-style-image: none;
-                               padding: @menu-main-body-padding;
                                margin: 0;
+                               padding: @menu-main-body-padding;
 
                                li {
                                        line-height: 1.125em;
-                                       padding: 0;
-                                       padding-bottom: 0.5em;
                                        margin: 0;
+                                       padding: 0.25em 0;
                                        font-size: @menu-main-body-font-size;
                                        word-wrap: break-word;
 
@@ -129,5 +129,16 @@ div#mw-panel {
                                }
                        }
                }
+
+               &.first {
+                       background-image: none;
+                       margin-top: 0;
+                       h3 {
+                               display: none;
+                       }
+                       div.body {
+                               margin-left: 0.5em;
+                       }
+               }
        }
 }

diff --git a/skins/vector/variables.less b/skins/vector/variables.less
index 438fbcf..41cb1da 100644 (file)
--- a/skins/vector/variables.less
+++ b/skins/vector/variables.less
@@ -22,22 +22,18 @@
 
 // Main menu
 @menu-main-font-size: inherit;
+
 @menu-main-heading-font-size: 0.75em;
-@menu-main-heading-padding: 0 1.75em 0.25em 0.25em;
+@menu-main-heading-padding: 0.25em 0 0.25em 0.25em;
+@menu-main-heading-color: #4d4d4d;
 
 @menu-main-body-font-size: 0.75em;
 @menu-main-body-link-color: #0645ad;
 @menu-main-body-link-visited-color: #0b0080;
 @menu-main-body-margin: 0 0 0 1.25em;
 @menu-main-body-padding: 0;
+
 @menu-main-logo-left: 0.5em;
 
 // Personal menu
 @menu-personal-font-size: 0.75em;
-
-// Collapsible nav
-@collapsible-nav-heading-color: #4d4d4d;
-@collapsible-nav-heading-collapsed-color: #0645ad;
-
-@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
-@collapsible-nav-body-margin: 0 0 0 1.25em;

diff --git a/skins/vector/vector.js b/skins/vector/vector.js
index 0bc114a..d8ac3c8 100644 (file)
--- a/skins/vector/vector.js
+++ b/skins/vector/vector.js
@@ -25,6 +25,11 @@ jQuery( function ( $ ) {
                        .attr( 'tabindex', '-1' );
        } );
 
+       /**
+        * Sidebar
+        */
+       $( '#mw-panel > .portal:first' ).addClass( 'first' );
+
        /**
         * Collapsible tabs for Vector
         */