From 761cd667445d3dab79e451a945c69936c99198db Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinklemail@gmail.com>
Date: Sun, 4 May 2014 22:10:33 +0200
Subject: [PATCH] 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
---
 skins/vector/components/navigation.less | 33 ++++++++++++++++---------
 skins/vector/variables.less             | 12 +++------
 skins/vector/vector.js                  |  5 ++++
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/skins/vector/components/navigation.less b/skins/vector/components/navigation.less
index 24e9843f29..8b384acf1e 100644
--- 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 438fbcf173..41cb1dab9d 100644
--- 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 0bc114a4bf..d8ac3c8144 100644
--- 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
 	 */
-- 
2.20.1