XW-3525 | Stick Banner Notifications to Global Nav

extensions/wikia/AssetsManager/config.php

@@ -3232,7 +3232,6 @@
 	'skin' => [ 'oasis' ],
 	'assets' => [
 		'//extensions/wikia/CommunityHeader/styles/index.scss',
-		'//extensions/wikia/CommunityHeader/styles/banner-notifications-hack.scss',
 	],
 ];
 
@@ -3241,7 +3240,6 @@
 	'skin' => [ 'oasis' ],
 	'assets' => [
 		'//extensions/wikia/CommunityHeader/scripts/tracking.js',
-		'//extensions/wikia/CommunityHeader/scripts/banner-notifications-hack.js',
 		'//extensions/wikia/CommunityHeader/scripts/local-navigation-preview.js',
 	],
 ];

extensions/wikia/BannerNotifications/css/BannerNotifications.scss

@@ -107,7 +107,6 @@
 	margin: 0 auto;
 	transition: top 200ms linear;
 	width: 958px;
-	z-index: $zTop + 1;
 
 	&.float {
 		left: 50%;
@@ -116,3 +115,7 @@
 	}
 }
 
+.banner-notifications-placeholder {
+	position: relative;
+	z-index: $zTop;
+}

extensions/wikia/BannerNotifications/js/BannerNotifications.js

@@ -23,9 +23,12 @@
 		},
 		classes = Object.keys(types).join(' '),
 		closeImageSource = window.stylepath + '/oasis/images/icon_close.png',
-		$pageContainer,
+		$container,
 		$header,
 		modal,
+		fadeTime = 400,
+		wrapperClass = 'banner-notifications-wrapper',
+		wrapperSelector = '.' + wrapperClass,
 		template = '<div class="banner-notification">' +
 			'<button class="close wikia-chiclet-button"><img></button>' +
 			'<div class="msg">{{{content}}}</div>' +
@@ -171,29 +174,37 @@
 	 */
 	function init() {
 		$header = $('#globalNavigation');
+		$container = getContainer();
 
-		if (window.skin === 'monobook') {
-			$pageContainer = $('#content');
-		} else {
-			$pageContainer = $('.WikiaPageContentWrapper');
+		if (window.skin !== 'monobook') {
 			require(['wikia.onScroll'], function (onScroll) {
 				onScroll.bind(handleScrolling);
 			});
 		}
 
-		// SUS-726: hide notifications if VisualEditor is loaded and show them again once it's closed
+		updatePlaceholderHeight();
+
+		// SUS-729: hide notifications if VisualEditor is loaded and show them again once it's closed
 		if (mw.config.get('wgVisualEditor') && mw.config.get('wgIsArticle')) {
 			mw.hook('ve.activationComplete').add(function() {
-				$('.banner-notification').fadeOut(400);
+				$('.banner-notification').fadeOut(fadeTime);
+				updatePlaceholderHeight();
 			});
 
-			mw.hook('ve.cancelButton').add(function() {
-				$('.banner-notification').fadeIn(400);
+			mw.hook('ve.deactivate').add(function() {
+				$('.banner-notification').fadeIn(fadeTime);
+				updatePlaceholderHeight();
 			});
 		}
 		createBackendNotifications();
 	}
 
+	function updatePlaceholderHeight() {
+		if (window.skin !== 'monobook') {
+			$container.height($container.find(wrapperSelector).height());
+		}
+	}
+
 	/**
 	 * Create instances of BannerNotification based on HTML
 	 * passed from the server on page load.
@@ -211,15 +222,15 @@
 	 */
 	function handleScrolling() {
 		var containerTop,
-			notificationWrapper = $pageContainer.children('.banner-notifications-wrapper'),
+			notificationWrapper = $container.children(wrapperSelector),
 			headerBottom;
 
-		if (!$pageContainer.length || !notificationWrapper.length) {
+		if (!$container.length || !notificationWrapper.length) {
 			return;
 		}
 
 		// get the position of the wrapper element relative to the top of the viewport
-		containerTop = $pageContainer.get(0).getBoundingClientRect().top;
+		containerTop = $container.get(0).getBoundingClientRect().top;
 		headerBottom = $header.length > 0 ? $header.get(0).getBoundingClientRect().bottom : 0;
 
 		if (containerTop < headerBottom) {
@@ -237,18 +248,18 @@
 	}
 
 	/**
-	 * Obtains element wrapping contents of the page
+	 * Obtains element wrapping notifications
 	 * @returns {jQuery}
 	 */
-	function getPageContainer() {
-		if ($pageContainer.length) {
-			return $pageContainer;
+	function getContainer() {
+		if ($container && $container.length) {
+			return $container;
 		} else if (window.skin === 'monobook') {
-			$pageContainer = $('#content');
+			$container = $('#content');
 		} else {
-			$pageContainer = $('.WikiaPageContentWrapper');
+			$container = $('.banner-notifications-placeholder');
 		}
-		return $pageContainer;
+		return $container;
 	}
 
 	/**
@@ -273,15 +284,17 @@
 	 */
 	function addToDOM($element, $parentElement) {
 		// allow notification wrapper element to be passed by extension
-		var $parent = $parentElement || (isModalShown() ? modal : getPageContainer()),
-			$bannerNotificationsWrapper = $parent.find('.banner-notifications-wrapper');
+		var $parent = $parentElement || (isModalShown() ? modal : getContainer()),
+			$bannerNotificationsWrapper = $parent.find(wrapperSelector);
+
 		if (!$bannerNotificationsWrapper.length) {
-			$bannerNotificationsWrapper = $('<div></div>').addClass('banner-notifications-wrapper');
+			$bannerNotificationsWrapper = $('<div></div>').addClass(wrapperClass);
 			$parent.prepend($bannerNotificationsWrapper);
 		}
+
 		$bannerNotificationsWrapper.prepend($element);
 
-		$element.fadeIn('slow');
+		$element.fadeIn(fadeTime, updatePlaceholderHeight);
 	}
 
 	/**
@@ -318,7 +331,7 @@
 				'height': 0,
 				'padding': 0,
 				'opacity': 0
-			}, 400, function () {
+			}, fadeTime, function () {
 				callback($element);
 			});
 		}
@@ -330,13 +343,17 @@
 	 */
 	function removeFromDOM($element) {
 		var $parent = $element.parent();
-		if ($parent.hasClass('.banner-notifications-wrapper') &&
-			$parent.children().length === 1) {
 
+		if (
+			$parent.hasClass(wrapperSelector) &&
+			$parent.children().length === 1
+		) {
 			$parent.remove();
 		} else {
 			$element.remove();
 		}
+
+		updatePlaceholderHeight();
 	}
 
 	// run when DOM is loaded

skins/oasis/css/core/breakpoints-layout.scss

@@ -1,3 +1,4 @@
+@import 'skins/oasis/css/core/layout';
 @import 'skins/shared/mixins/calc';
 @import 'breakpoints-variables';
 //todo remove styling by ID after cleanup after removal of responsive layout
@@ -214,27 +215,35 @@
 	}
 
 	.banner-notifications-wrapper {
-		width: auto;
+		@media #{$breakpoint-small-only} {
+			width: $page-width-small - 2 * $content-border-width;
 
-		&.float {
-			@media #{$breakpoint-small-only} {
+			&.float {
 				margin-left: $page-width-small / -2;
-				width: $page-width-small;
 			}
+		}
 
-			@media #{$breakpoint-small-plus} {
+		@media #{$breakpoint-small-plus} {
+			width: $page-width-small-plus;
+
+			&.float {
 				margin-left: $page-width-small-plus / -2;
-				width: $page-width-small-plus;
 			}
+		}
 
-			@media #{$breakpoint-medium-only} {
+		@media #{$breakpoint-medium-only} {
+			width: $page-width-medium;
+
+			&.float {
 				margin-left: $page-width-medium / -2;
-				width: $page-width-medium;
 			}
+		}
+
+		@media #{$breakpoint-large-up} {
+			width: $page-width-large;
 
-			@media #{$breakpoint-large-up} {
+			&.float {
 				margin-left: $page-width-large / -2;
-				width: $page-width-large;
 			}
 		}
 	}