[ticket/11552] Responsive menu

PHPBB3-11552

phpBB/styles/prosilver/template/forum_fn.js

@@ -465,7 +465,7 @@ function insert_single_user(formId, user)
 		});
 
 		// Responsive breadcrumbs
-		$('.breadcrumbs').each(function() {
+		$('.breadcrumbs:not(.skip-responsive)').each(function() {
 			var $this = $(this),
 				$body = $('body'),
 				links = $this.find('.crumb'),
@@ -504,17 +504,23 @@ function insert_single_user(formId, user)
 				if (wrapped) {
 					$this.removeClass('wrapped').find('.crumb.wrapped').removeClass('wrapped ' + classes.join(' '));
 					wrapped = false;
-					if ($this.height() <= maxHeight) return;
+					if ($this.height() <= maxHeight) {
+						return;
+					}
 				}
 
 				wrapped = true;
 				$this.addClass('wrapped');
-				if ($this.height() <= maxHeight) return;
+				if ($this.height() <= maxHeight) {
+					return;
+				}
 
 				for (i = 0; i < classesLength; i ++) {
 					for (j = length; j >= 0; j --) {
 						links.eq(j).addClass('wrapped ' + classes[i]);
-						if ($this.height() <= maxHeight) return;
+						if ($this.height() <= maxHeight) {
+							return;
+						}
 					}
 				}
 			}
@@ -523,5 +529,71 @@ function insert_single_user(formId, user)
 			check();
 			$(window).resize(check);
 		});
+
+		// Responsive link lists
+		$('.linklist:not(.navlinks, .skip-responsive)').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				links = $this.children().not('.skip-responsive'),
+				toggle = $this.append('<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>').children('.responsive-menu'),
+				menu = toggle.find('.responsive-popup'),
+				lastWidth = false,
+				responsive = false,
+				copied = false;
+
+			function check() {
+				var width = $body.width();
+				if (responsive && width <= lastWidth) {
+					return;
+				}
+
+				if (responsive) {
+					responsive = false;
+					$this.removeClass('responsive');
+					links.css('display', '');
+					toggle.css('display', 'none');
+				}
+
+				var maxHeight = 0;
+				links.each(function() {
+					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+				});
+
+				if ($this.height() <= maxHeight) {
+					menu.hide();
+					return;
+				}
+				responsive = true;
+
+				if (!copied) {
+					if (menu.parents().is('.rightside')) {
+						menu.addClass('responsive-rightside');
+					}
+					menu.append(links.clone(true));
+					menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
+					copied = true;
+				}
+
+				links.css('display', 'none');
+				toggle.css('display', '');
+				$this.addClass('responsive');
+			}
+
+			toggle.click(function() {
+				if (!responsive) return;
+				menu.toggle();
+			});
+
+			check();
+			$(window).resize(check);
+		});
+
+		$('#phpbb').click(function(e) {
+			var target = $(e.target);
+
+			if (!target.parents().is('.responsive-menu')) {
+				$('.responsive-popup').hide();
+			}
+		});
 	});
 })(jQuery);

phpBB/styles/prosilver/template/overall_header.html

@@ -99,7 +99,7 @@
 			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
 			<ul class="linklist leftside bulletin">
 				<!-- IF S_NOTIFICATIONS_DISPLAY -->
-				<li class="icon-notification">
+				<li class="icon-notification skip-responsive">
 					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button">{L_NOTIFICATIONS} [<strong>{NOTIFICATIONS_COUNT}</strong>]</a>
 					<div id="notification_list" class="notification_list">
 						<div class="pointer"><div class="pointer_inner"></div></div>

phpBB/styles/prosilver/theme/colours.css

@@ -1126,3 +1126,20 @@ input.disabled {
 .notification_list .pointer_inner {
 	border-bottom-color: #F1F8FF;
 }
+
+ul.linklist li.responsive-menu a.responsive-menu-link:before {
+	border-color: #105289;
+}
+
+ul.linklist li.responsive-menu a.responsive-menu-link:hover:before {
+	border-color: #D31141;
+}
+
+ul.responsive-popup {
+	background: #fff;
+	border-color: #b9b9b9;
+	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
+}
+.navbar ul.responsive-popup {
+	background-color: #CADCEB;
+}

phpBB/styles/prosilver/theme/common.css

@@ -360,6 +360,30 @@ ul.rightside {
 	text-align: right;
 }
 
+ul.linklist.responsive {
+	position: relative;
+}
+
+ul.linklist li.responsive-menu a.responsive-menu-link {
+	display: inline-block;
+	font-size: 16px;
+	position: relative;
+	width: 16px;
+	line-height: 16px;
+	text-decoration: none;
+}
+
+ul.linklist li.responsive-menu a.responsive-menu-link:before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 7px;
+	height: .125em;
+	width: 14px;
+	border-bottom: 0.125em solid transparent;
+	border-top: 0.375em double transparent;
+}
+
 /* Bulletin icons for list items
 ----------------------------------------*/
 ul.linklist.bulletin li:before {
@@ -378,6 +402,51 @@ ul.linklist.bulletin li.no-bulletin:before {
 	display: none;
 }
 
+.icon-notification:before, ul.linklist.bulletin li.icon-notification:before, .icon-notification:after {
+	display: inline;
+	font: inherit;
+}
+
+.icon-notification:before, ul.linklist.bulletin li.icon-notification:before {
+	content: '[';
+	padding-right: 0;
+}
+
+.icon-notification:after {
+	content: ']';
+}
+
+.responsive-menu:before, .responsive-menu:after {
+	display: none !important;
+}
+
+/* Responsive popup
+----------------------------------------*/
+ul.responsive-popup {
+	position: absolute;
+	left: 0;
+	top: 24px;
+	z-index: 2;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	padding: 5px;
+}
+
+ul.responsive-popup.responsive-rightside {
+	left: auto;
+	right: 0;
+}
+
+ul.responsive-popup li {
+	float: none;
+	margin: 0;
+	white-space: nowrap;
+}
+
+ul.responsive-popup li:before, ul.responsive-popup li:after {
+	display: none !important;
+}
+
 /* Responsive breadcrumbs
 ----------------------------------------*/
 .breadcrumbs .crumb {