[ticket/11552] Responsive CP tabs

PHPBB3-11552

phpBB/styles/prosilver/template/forum_fn.js

@@ -516,7 +516,7 @@ function insert_single_user(formId, user)
 				}
 
 				for (i = 0; i < classesLength; i ++) {
-					for (j = length; j >= 0; j --) {
+					for (j = length; j > 0; j --) {
 						links.eq(j).addClass('wrapped ' + classes[i]);
 						if ($this.height() <= maxHeight) {
 							return;
@@ -547,7 +547,8 @@ function insert_single_user(formId, user)
 			}
 
 			var toggle = $this.children('.responsive-menu'),
-				menu = toggle.find('.responsive-popup'),
+				toggleLink = toggle.find('a.responsive-menu-link'),
+				menu = toggle.find('ul.responsive-popup'),
 				lastWidth = false,
 				responsive = false,
 				copied = false;
@@ -591,7 +592,7 @@ function insert_single_user(formId, user)
 				$this.addClass('responsive');
 			}
 
-			toggle.click(function() {
+			toggleLink.click(function() {
 				if (!responsive) return;
 				if (!toggle.hasClass('visible')) {
 					// Hide other popups
@@ -610,5 +611,68 @@ function insert_single_user(formId, user)
 				$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
 			}
 		});
+
+		// Responsive tabs
+		$('#tabs').not('.skip-responsive').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				ul = $this.children(),
+				tabs = ul.children().not('.skip-responsive'),
+				links = tabs.children('a'),
+				toggle = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><ul class="responsive-tabs" style="display:none;" /></li>').find('li.responsive-tab'),
+				toggleLink = toggle.find('a.responsive-tab-link'),
+				menu = toggle.find('ul.responsive-tabs'),
+				maxHeight = 0,
+				lastWidth = false,
+				responsive = false;
+
+			links.each(function() {
+				maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+			})
+
+			function check() {
+				var width = $body.width(),
+					height = $this.height();
+
+				if (arguments.length == 0 && (!responsive || width <= lastWidth) && height <= maxHeight) {
+					return;
+				}
+
+				tabs.show();
+				toggle.hide();
+
+				lastWidth = width;
+				height = $this.height();
+				if (height <= maxHeight) {
+					responsive = false;
+					return;
+				}
+
+				responsive = true;
+				toggle.show();
+				menu.hide().html('');
+
+				var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'),
+					total = availableTabs.length,
+					i, tab;
+
+				for (i = total; i > 0; i --) {
+					tab = availableTabs.eq(i);
+					menu.prepend(tab.clone(true));
+					tab.hide();
+					if ($this.height() <= maxHeight) {
+						return;
+					}
+				}
+			}
+
+			toggleLink.click(function() {
+				if (!responsive) return;
+				menu.toggle();
+			});
+
+			check(true);
+			$(window).resize(check);
+		});
 	});
 })(jQuery);

phpBB/styles/prosilver/theme/colours.css

@@ -857,6 +857,16 @@ ul.cplist {
 	color: #333333;
 }
 
+/* Responsive tabs
+----------------------------------------*/
+.responsive-tab .responsive-tab-link span:before {
+	border-color: #536482;
+}
+
+.responsive-tab .responsive-tab-link:hover span:before {
+	border-color: #BC2A4D;
+}
+
 /* UCP navigation menu
 ----------------------------------------*/
 
@@ -1143,3 +1153,9 @@ ul.responsive-popup {
 .navbar ul.responsive-popup {
 	background-color: #CADCEB;
 }
+
+#tabs ul.responsive-tabs {
+	background: #CADCEB;
+	border-color: #c0c9d5;
+	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
+}

phpBB/styles/prosilver/theme/common.css

@@ -600,7 +600,7 @@ dl.details dd {
 	text-overflow: ellipsis;
 }
 
-.clearfix, #tabs, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
+.clearfix, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
 	height: 1%;
 	overflow: hidden;
 }

phpBB/styles/prosilver/theme/cp.css

@@ -118,7 +118,7 @@ ul.cplist {
 #tabs {
 	line-height: normal;
 	margin: 20px 0 -1px 7px;
-	min-width: 570px;
+	*overflow: hidden;
 }
 
 #tabs ul {
@@ -127,6 +127,12 @@ ul.cplist {
 	list-style: none;
 }
 
+#tabs ul:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
 #tabs li {
 	display: inline;
 	margin: 0;
@@ -210,6 +216,57 @@ ul.cplist {
 	text-decoration: none;
 }
 
+/* Responsive tabs
+----------------------------------------*/
+.responsive-tab .responsive-tab-link span {
+	display: inline-block;
+	font-size: 16px;
+	position: relative;
+	width: 16px;
+	line-height: 14px;
+	text-decoration: none;
+}
+
+.responsive-tab .responsive-tab-link span:before {
+	content: '';
+	position: absolute;
+	left: 5px;
+	top: 8px;
+	height: .125em;
+	width: 14px;
+	border-bottom: 0.125em solid transparent;
+	border-top: 0.375em double transparent;
+}
+
+#tabs ul {
+	position: relative;
+}
+
+#tabs ul.responsive-tabs {
+	position: absolute;
+	right: 0;
+	top: 26px;
+	z-index: 2;
+	border: 1px solid transparent;
+	border-radius: 5px;
+}
+
+#tabs .responsive-tabs li {
+	display: block !important;
+}
+
+#tabs .responsive-tabs a, #tabs .responsive-tabs a span {
+	background: transparent;
+	float: none;
+	margin: 0;
+	padding: 0;
+	text-align: right;
+}
+
+#tabs .responsive-tabs a span {
+	padding: 5px;
+}
+
 /* UCP navigation menu
 ----------------------------------------*/
 /* Container for sub-navigation list */