[ticket/11552] Responsive breadcrumbs

PHPBB3-11552

phpBB/styles/prosilver/template/forum_fn.js

@@ -441,5 +441,56 @@ function insert_single_user(formId, user)
 			// Fix .linkslist.bulletin lists
 			$('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin');
 		}
+
+		// Responsive breadcrumbs
+		$('.breadcrumbs').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				links = $this.find('a'),
+				length = links.length,
+				classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'],
+				classesLength = classes.length,
+				maxHeight = 0,
+				lastWidth = false,
+				wrapped = false;
+
+			// Test height by setting nowrap
+			$this.css('white-space', 'nowrap');
+			maxHeight = $this.height() + 1;
+			$this.css('white-space', '');
+
+			// Funciton that checks breadcrumbs
+			function check() {
+				var height = $this.height(),
+					width = $body.width(),
+					link, i, j;
+
+				if (height <= maxHeight) {
+					if (!wrapped || lastWidth === false || lastWidth >= width) {
+						lastWidth = width;
+						return;
+					}
+				}
+				lastWidth = width;
+
+				if (wrapped) {
+					$this.find('a.wrapped').removeClass('wrapped ' + classes.join(' '));
+					wrapped = false;
+					if ($this.height() <= maxHeight) return;
+				}
+
+				wrapped = true;
+				for (i = 0; i < classesLength; i ++) {
+					for (j = length; j >= 0; j --) {
+						links.eq(j).addClass('wrapped ' + classes[i]);
+						if ($this.height() <= maxHeight) return;
+					}
+				}
+			}
+
+			// Run function and set event
+			check();
+			$(window).resize(check);
+		});
 	});
 })(jQuery);

phpBB/styles/prosilver/template/overall_header.html

@@ -84,7 +84,7 @@
 
 			<ul class="linklist navlinks">
 				<!-- DEFINE $MICRODATA = ' itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""' -->
-				<li class="icon-home"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>&#8249;</strong> <!-- ENDIF -->
+				<li class="icon-home breadcrumbs"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>&#8249;</strong> <!-- ENDIF -->
 					<a href="{U_INDEX}" accesskey="h"{$MICRODATA}>{L_INDEX}</a> 
 					<!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}"{$MICRODATA}>{navlinks.FORUM_NAME}</a><!-- END navlinks -->
 					<!-- EVENT overall_header_breadcrumb_append -->

phpBB/styles/prosilver/theme/common.css

@@ -378,6 +378,22 @@ ul.linklist.bulletin li.no-bulletin:before {
 	display: none;
 }
 
+/* Responsive breadcrumbs
+----------------------------------------*/
+.breadcrumbs a {
+	display: inline-block;
+}
+
+.breadcrumbs a.wrapped {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: bottom;
+}
+.breadcrumbs a.wrapped-wide { max-width: 120px; }
+.breadcrumbs a.wrapped-medium { max-width: 80px; }
+.breadcrumbs a.wrapped-small { max-width: 30px; }
+
 /* Table styles
 ----------------------------------------*/
 table.table1 {
@@ -835,4 +851,3 @@ form > p.post-notice strong {
 .notification_list p.notifications_time {
 	font-size: 11px;
 }
-

phpBB/styles/prosilver/theme/responsive.css

@@ -46,4 +46,3 @@ body {
 #site-description p, #search-box {
 	display: none;
 }
-