From 1638ff3cba881eb7bce2ffc29946db0644feaff2 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Tue, 22 Oct 2013 22:03:43 +0300
Subject: [PATCH] [ticket/11956] Arrow for responsive popup

PHPBB3-11956
---
 phpBB/styles/prosilver/template/forum_fn.js   | 15 +++++----
 .../prosilver/template/overall_header.html    |  2 +-
 phpBB/styles/prosilver/theme/colours.css      | 15 ++++++---
 phpBB/styles/prosilver/theme/common.css       | 32 +++++++++++++++----
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js
index 8cd4880914..2e0cf7bfea 100644
--- a/phpBB/styles/prosilver/template/forum_fn.js
+++ b/phpBB/styles/prosilver/template/forum_fn.js
@@ -729,7 +729,7 @@ function parse_document(container)
 			filterSkip = '.breadcrumbs, .skip-responsive',
 			filterLast = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon',
 			links = $this.children().not(filterSkip),
-			html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><ul class="responsive-popup" style="display:none;" /></li>',
+			html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><div class="popup-pointer" style="display: none;"><div class="popup-pointer-inner" /></div><ul class="responsive-popup" style="display:none;" /></li>',
 			filterLastList = links.filter(filterLast);
 
 		if (links.is('.rightside'))
@@ -744,6 +744,7 @@ function parse_document(container)
 		var toggle = $this.children('.responsive-menu'),
 			toggleLink = toggle.find('a.responsive-menu-link'),
 			menu = toggle.find('ul.responsive-popup'),
+			toggleItems = toggle.find('ul.responsive-popup, div.popup-pointer'),
 			lastWidth = false,
 			compact = false,
 			responsive = false,
@@ -782,7 +783,7 @@ function parse_document(container)
 			// Nothing to resize if block's height is not bigger than tallest element's height
 			if ($this.height() <= maxHeight) {
 				toggle.removeClass('visible');
-				menu.hide();
+				toggleItems.hide();
 				return;
 			}
 
@@ -798,7 +799,7 @@ function parse_document(container)
 
 			if ($this.height() <= maxHeight) {
 				toggle.removeClass('visible');
-				menu.hide();
+				toggleItems.hide();
 				return;
 			}
 
@@ -809,7 +810,7 @@ function parse_document(container)
 
 			if (!copied) {
 				if (menu.parents().is('.rightside')) {
-					menu.addClass('responsive-rightside');
+					toggle.addClass('responsive-rightside');
 				}
 				menu.append(links.clone(true));
 				menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
@@ -846,10 +847,10 @@ function parse_document(container)
 			if (!responsive) return;
 			if (!toggle.hasClass('visible')) {
 				// Hide other popups
-				$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
+				$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup, .popup-pointer').hide();
 			}
 			toggle.toggleClass('visible');
-			menu.toggle();
+			toggleItems.toggle();
 		});
 
 		check();
@@ -952,7 +953,7 @@ function parse_document(container)
 		$('#phpbb').click(function(e) {
 			var parents = $(e.target).parents();
 			if (!parents.is('.responsive-menu.visible')) {
-				$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
+				$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup, .popup-pointer').hide();
 			}
 			if (!parents.is('.responsive-tab')) {
 				$('.responsive-tabs').hide();
diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html
index 9a08c0f5ac..3ef264259f 100644
--- a/phpBB/styles/prosilver/template/overall_header.html
+++ b/phpBB/styles/prosilver/template/overall_header.html
@@ -103,7 +103,7 @@
 				<li class="icon-notification skip-responsive">
 					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
 					<div id="notification_list" class="notification_list">
-						<div class="pointer"><div class="pointer_inner"></div></div>
+						<div class="popup-pointer"><div class="popup-pointer-inner"></div></div>
 						<div class="header">
 							{L_NOTIFICATIONS}
 							<span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span>
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index a0db75d07f..327fc0681a 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -1126,11 +1126,11 @@ input.disabled {
 	background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
 }
 
-.notification_list .pointer {
+.popup-pointer {
 	border-bottom-color: #B9B9B9;
 }
 
-.notification_list .pointer_inner {
+.popup-pointer-inner {
 	border-bottom-color: #F1F8FF;
 }
 
@@ -1138,7 +1138,7 @@ ul.linklist li.responsive-menu a.responsive-menu-link:before {
 	border-color: #105289;
 }
 
-ul.linklist li.responsive-menu a.responsive-menu-link:hover:before {
+ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu.visible a.responsive-menu-link:before {
 	border-color: #D31141;
 }
 
@@ -1147,8 +1147,13 @@ ul.responsive-popup {
 	border-color: #b9b9b9;
 	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
 }
-.navbar ul.responsive-popup {
-	background-color: #CADCEB;
+
+.responsive-menu .popup-pointer {
+	border-bottom-color: #b9b9b9;
+}
+
+.responsive-menu .popup-pointer-inner {
+	border-bottom-color: #fff;
 }
 
 #tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index fc0fff8fea..3de4b023a8 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -361,12 +361,13 @@ ul.rightside {
 	text-align: right;
 }
 
-ul.linklist.responsive {
+ul.linklist li.responsive-menu {
 	position: relative;
 }
 
 ul.linklist li.responsive-menu a.responsive-menu-link {
 	display: inline-block;
+	margin: 0 5px;
 	font-size: 16px;
 	position: relative;
 	width: 16px;
@@ -420,18 +421,37 @@ ul.linklist.bulletin li.no-bulletin:before {
 ul.responsive-popup {
 	position: absolute;
 	left: 0;
-	top: 24px;
+	top: 22px;
 	z-index: 2;
 	border: 1px solid transparent;
 	border-radius: 5px;
 	padding: 5px;
 }
 
-ul.responsive-popup.responsive-rightside {
+.responsive-rightside ul.responsive-popup {
 	left: auto;
 	right: 0;
 }
 
+.responsive-menu .popup-pointer {
+	top: 22px;
+	z-index: 3;
+	left: 2px;
+}
+.responsive-menu ul.responsive-popup {
+	top: 32px;
+	left: -5px;
+}
+
+.responsive-menu.responsive-rightside .popup-pointer {
+	left: auto;
+	right: 2px;
+}
+.responsive-menu.responsive-rightside ul.responsive-popup {
+	left: auto;
+	right: -5px;
+}
+
 ul.responsive-popup li {
 	float: none;
 	margin: 0;
@@ -901,7 +921,7 @@ form > p.post-notice strong {
 	margin: 0;
 }
 
-.notification_list .pointer, .notification_list .pointer_inner {
+.popup-pointer, .popup-pointer-inner {
 	position: absolute;
 	width: 0;
 	height: 0;
@@ -913,13 +933,13 @@ form > p.post-notice strong {
 	display: block;
 }
 
-.notification_list .pointer {
+.popup-pointer {
 	right: auto;
 	left: 10px;
 	top: -11px;
 }
 
-.notification_list .pointer_inner {
+.popup-pointer-inner {
 	top: auto;
 	bottom: -11px;
 	left: -10px;