From 5e67c41629c2234820b9355b06a9846d7698e313 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Tue, 22 Oct 2013 11:16:25 +0300
Subject: [PATCH] [ticket/11956] Better responsive breadcrumbs

PHPBB3-11956
---
 phpBB/styles/prosilver/template/forum_fn.js | 20 ++++++++++----------
 phpBB/styles/prosilver/theme/common.css     | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js
index cb8ee2f9df..8cd4880914 100644
--- a/phpBB/styles/prosilver/template/forum_fn.js
+++ b/phpBB/styles/prosilver/template/forum_fn.js
@@ -471,12 +471,12 @@ function parse_document(container)
 	/**
 	* Makes breadcrumbs responsive
 	*/
-	container.find('.breadcrumbs:not(.skip-responsive, .linklist.leftside .breadcrumbs)').each(function() {
+	container.find('.breadcrumbs:not(.skip-responsive)').each(function() {
 		var $this = $(this),
 			$body = $('body'),
 			links = $this.find('.crumb'),
 			length = links.length,
-			classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'],
+			classes = ['wrapped-max', 'wrapped-wide', 'wrapped-medium', 'wrapped-small', 'wrapped-tiny'],
 			classesLength = classes.length,
 			maxHeight = 0,
 			lastWidth = false,
@@ -726,11 +726,11 @@ function parse_document(container)
 	container.find('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() {
 		var $this = $(this),
 			$body = $('body'),
-			links = $this.children().not('.skip-responsive'),
+			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>',
-			// List of items that should be hidden last
-			filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon',
-			filtered = links.filter(filterString);
+			filterLastList = links.filter(filterLast);
 
 		if (links.is('.rightside'))
 		{
@@ -824,17 +824,17 @@ function parse_document(container)
 			$this.addClass('responsive');
 
 			// Try to not hide filtered items
-			if (filtered.length) {
-				links.not(filterString).css('display', 'none');
+			if (filterLastList.length) {
+				links.not(filterLast).css('display', 'none');
 
 				maxHeight = 0;
-				filtered.each(function() {
+				filterLastList.each(function() {
 					if (!$(this).height()) return;
 					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
 				});
 
 				if ($this.height() <= maxHeight) {
-					menu.children().filter(filterString).css('display', 'none');
+					menu.children().filter(filterLast).css('display', 'none');
 					return;
 				}
 			}
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 19077bbc86..fc0fff8fea 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -449,23 +449,25 @@ ul.responsive-popup li:before, ul.responsive-popup li:after {
 
 /* Responsive breadcrumbs
 ----------------------------------------*/
-.breadcrumbs .crumb {
+.breadcrumbs .crumb a {
 	display: inline-block;
 	vertical-align: bottom;
 }
 
-.breadcrumbs.wrapped .crumb {
-	letter-spacing: -.5px;
-}
+.breadcrumbs.wrapped .crumb a { letter-spacing: -.3px; }
+.breadcrumbs.wrapped .crumb.wrapped-medium a { letter-spacing: -.4px; }
+.breadcrumbs.wrapped .crumb.wrapped-tiny a { letter-spacing: -.5px; }
 
-.breadcrumbs .crumb.wrapped {
+.breadcrumbs .crumb.wrapped a {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.breadcrumbs .crumb.wrapped-wide { max-width: 120px; }
-.breadcrumbs .crumb.wrapped-medium { max-width: 80px; }
-.breadcrumbs .crumb.wrapped-small { max-width: 30px; }
+.breadcrumbs .crumb.wrapped-max a { max-width: 120px; }
+.breadcrumbs .crumb.wrapped-wide a { max-width: 100px; }
+.breadcrumbs .crumb.wrapped-medium a { max-width: 80px; }
+.breadcrumbs .crumb.wrapped-small a { max-width: 60px; }
+.breadcrumbs .crumb.wrapped-tiny a { max-width: 40px; }
 
 /* Table styles
 ----------------------------------------*/