From a23d4526fde963c8a079a85997c7d2f018e13ec4 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Fri, 18 Oct 2013 22:32:46 +0300
Subject: [PATCH] [ticket/11552] Compact mode for notifications and pm links

This will hide part of buttons for notifications and pm links
in header before switching to responsive mode

PHPBB3-11552
---
 phpBB/styles/prosilver/template/forum_fn.js   | 28 +++++++++++++++++++
 .../prosilver/template/overall_header.html    |  4 +--
 phpBB/styles/prosilver/theme/common.css       |  9 ++++++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js
index b10cbff031..f96cc39c17 100644
--- a/phpBB/styles/prosilver/template/forum_fn.js
+++ b/phpBB/styles/prosilver/template/forum_fn.js
@@ -553,6 +553,7 @@ function insert_single_user(formId, user)
 				toggleLink = toggle.find('a.responsive-menu-link'),
 				menu = toggle.find('ul.responsive-popup'),
 				lastWidth = false,
+				compact = false,
 				responsive = false,
 				copied = false;
 
@@ -562,6 +563,7 @@ function insert_single_user(formId, user)
 					return;
 				}
 
+				// Reset responsive and compact layout
 				if (responsive) {
 					responsive = false;
 					$this.removeClass('responsive');
@@ -569,16 +571,42 @@ function insert_single_user(formId, user)
 					toggle.css('display', 'none');
 				}
 
+				if (compact) {
+					compact = false;
+					$this.removeClass('compact');
+				}
+
+				// Find tallest element
 				var maxHeight = 0;
 				links.each(function() {
 					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
 				});
 
+				// Nothing to resize if block's height is not bigger than tallest element's height
+				if ($this.height() <= maxHeight) {
+					toggle.removeClass('visible');
+					menu.hide();
+					return;
+				}
+
+				// Enable compact layout, find tallest element, compare to height of whole block
+				compact = true;
+				$this.addClass('compact');
+
+				var compactMaxHeight = 0;
+				links.each(function() {
+					compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
+				});
+
 				if ($this.height() <= maxHeight) {
 					toggle.removeClass('visible');
 					menu.hide();
 					return;
 				}
+
+				// Compact layout did not resize block enough, switch to responsive layout
+				compact = false;
+				$this.removeClass('compact');
 				responsive = true;
 
 				if (!copied) {
diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html
index c481dbe18b..5426b36294 100644
--- a/phpBB/styles/prosilver/template/overall_header.html
+++ b/phpBB/styles/prosilver/template/overall_header.html
@@ -101,7 +101,7 @@
 			<ul class="linklist leftside bulletin">
 				<!-- IF S_NOTIFICATIONS_DISPLAY -->
 				<li class="icon-notification skip-responsive">
-					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button">{L_NOTIFICATIONS} [<strong>{NOTIFICATIONS_COUNT}</strong>]</a>
+					<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="header">
@@ -140,7 +140,7 @@
 				<!-- ENDIF -->
 				<!-- IF S_DISPLAY_PM -->
 					<li class="icon-pm">
-						<a href="{U_PRIVATEMSGS}">{L_PRIVATE_MESSAGES} [<strong>{PRIVATE_MESSAGE_COUNT}</strong>]</a>
+						<a href="{U_PRIVATEMSGS}"><span>{L_PRIVATE_MESSAGES} [</span><strong>{PRIVATE_MESSAGE_COUNT}</strong><span>]</span></a>
 					</li>
 				<!-- ENDIF -->
 				<li class="icon-ucp">
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index ee613f0d0c..67e052b70c 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -915,3 +915,12 @@ form > p.post-notice strong {
 .notification_list p.notifications_time {
 	font-size: 11px;
 }
+
+.compact .icon-notification > a > span, .compact .icon-pm > a > span {
+	display: none;
+}
+
+.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
+	padding-left: 2px;
+}
+