[ticket/12662] Enable responsive linkslist for IE8

Also fixed arrow color

PHPBB3-12662

phpBB/styles/prosilver/template/forum_fn.js

@@ -383,9 +383,6 @@ function parse_document(container)
 	if (oldBrowser) {
 		// Fix .linklist.bulletin lists
 		container.find('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin');
-
-		// Do not run functions below for old browsers
-		return;
 	}
 
 	/**
@@ -482,6 +479,158 @@ function parse_document(container)
 		$(window).resize(check);
 	});
 
+	/**
+	* Responsive link lists
+	*/
+	container.find('.linklist:not(.navlinks, [data-skip-responsive]), .postbody .post-buttons:not([data-skip-responsive])').each(function() {
+		var $this = $(this),
+			$body = $('body'),
+			filterSkip = '.breadcrumbs, [data-skip-responsive]',
+			filterLast = '.pagination, .icon-faq, .mark-read, .edit-icon, .quote-icon',
+			persist = $this.attr('id') == 'nav-main',
+			allLinks = $this.children(),
+			links = allLinks.not(filterSkip),
+			html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><div class="dropdown" style="display:none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
+			filterLastList = links.filter(filterLast);
+
+		if (!persist) {
+			if (links.is('.rightside'))
+			{
+				links.filter('.rightside:first').before(html);
+				$this.children('.responsive-menu').addClass('rightside');
+			}
+			else
+			{
+				$this.append(html);
+			}
+		}
+
+		var item = $this.children('.responsive-menu'),
+			menu = item.find('.dropdown-contents'),
+			lastWidth = false,
+			compact = false,
+			responsive = false,
+			copied = false;
+
+		function check() {
+			var width = $body.width();
+			if (responsive && width <= lastWidth) {
+				return;
+			}
+
+			// Reset responsive and compact layout
+			if (responsive) {
+				responsive = false;
+				$this.removeClass('responsive');
+				links.css('display', '');
+				if (!persist) item.css('display', 'none');
+			}
+
+			if (compact) {
+				compact = false;
+				$this.removeClass('compact');
+			}
+
+			// Find tallest element
+			var maxHeight = 0;
+			allLinks.each(function() {
+				if (!$(this).height()) return;
+				maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+			});
+
+			if (maxHeight < 1) {
+				return;
+			}
+
+			// Nothing to resize if block's height is not bigger than tallest element's height
+			if ($this.height() <= maxHeight) {
+				return;
+			}
+
+			// Enable compact layout, find tallest element, compare to height of whole block
+			compact = true;
+			$this.addClass('compact');
+
+			var compactMaxHeight = 0;
+			allLinks.each(function() {
+				if (!$(this).height()) return;
+				compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
+			});
+
+			if ($this.height() <= maxHeight) {
+				return;
+			}
+
+			// Compact layout did not resize block enough, switch to responsive layout
+			compact = false;
+			$this.removeClass('compact');
+			responsive = true;
+
+			if (!copied) {
+				var clone = links.clone(true);
+				clone.filter('.rightside').each(function() {
+					if (persist) $(this).addClass('clone');
+					menu.prepend(this);
+				});
+				
+				if (persist) {
+					menu.prepend(clone.not('.rightside').addClass('clone'));
+				} else {
+					menu.prepend(clone.not('.rightside'));
+				}
+
+				menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
+				menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
+
+				if ($this.hasClass('post-buttons')) {
+					$('.button', menu).removeClass('button icon-button');
+					$('.responsive-menu-link', item).addClass('button icon-button').prepend('<span></span>');
+				}
+				copied = true;
+			}
+			else {
+				menu.children().css('display', '');
+			}
+
+			item.css('display', '');
+			$this.addClass('responsive');
+
+			// Try to not hide filtered items #TODO: this does not work in FF and IE of some reason
+			if (filterLastList.length) {
+				links.not(filterLast).css('display', 'none');
+
+				maxHeight = 0;
+				filterLastList.each(function() {
+					if (!$(this).height()) return;
+					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+				});
+
+				if ($this.height() <= maxHeight) {
+					menu.children().filter(filterLast).css('display', 'none');
+					return;
+				}
+			}
+
+			// If even responsive isn't enough, use both responsive and compact at same time
+			compact = true;
+			$this.addClass('compact');
+
+			links.css('display', 'none');
+		}
+
+		if (!persist) phpbb.registerDropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
+
+		check();
+		$(window).resize(check);
+	});
+
+	/**
+	* Do not run functions below for old browsers	
+	*/
+	if (oldBrowser) {
+		return;
+	}
+
 	/**
 	* Adjust topiclist lists with check boxes
 	*/
@@ -666,151 +815,6 @@ function parse_document(container)
 		}
 	});
 
-	/**
-	* Responsive link lists
-	*/
-	container.find('.linklist:not(.navlinks, [data-skip-responsive]), .postbody .post-buttons:not([data-skip-responsive])').each(function() {
-		var $this = $(this),
-			$body = $('body'),
-			filterSkip = '.breadcrumbs, [data-skip-responsive]',
-			filterLast = '.pagination, .icon-acp, .icon-mcp, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon',
-			persist = $this.attr('id') == 'nav-main',
-			allLinks = $this.children(),
-			links = allLinks.not(filterSkip),
-			html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><div class="dropdown" style="display:none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
-			filterLastList = links.filter(filterLast);
-
-		if (!persist) {
-			if (links.is('.rightside'))
-			{
-				links.filter('.rightside:first').before(html);
-				$this.children('.responsive-menu').addClass('rightside');
-			}
-			else
-			{
-				$this.append(html);
-			}
-		}
-
-		var item = $this.children('.responsive-menu'),
-			menu = item.find('.dropdown-contents'),
-			lastWidth = false,
-			compact = false,
-			responsive = false,
-			copied = false;
-
-		function check() {
-			var width = $body.width();
-			if (responsive && width <= lastWidth) {
-				return;
-			}
-
-			// Reset responsive and compact layout
-			if (responsive) {
-				responsive = false;
-				$this.removeClass('responsive');
-				links.css('display', '');
-				if (!persist) item.css('display', 'none');
-			}
-
-			if (compact) {
-				compact = false;
-				$this.removeClass('compact');
-			}
-
-			// Find tallest element
-			var maxHeight = 0;
-			allLinks.each(function() {
-				if (!$(this).height()) return;
-				maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
-			});
-
-			if (maxHeight < 1) {
-				return;
-			}
-
-			// Nothing to resize if block's height is not bigger than tallest element's height
-			if ($this.height() <= maxHeight) {
-				return;
-			}
-
-			// Enable compact layout, find tallest element, compare to height of whole block
-			compact = true;
-			$this.addClass('compact');
-
-			var compactMaxHeight = 0;
-			allLinks.each(function() {
-				if (!$(this).height()) return;
-				compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
-			});
-
-			if ($this.height() <= maxHeight) {
-				return;
-			}
-
-			// Compact layout did not resize block enough, switch to responsive layout
-			compact = false;
-			$this.removeClass('compact');
-			responsive = true;
-
-			if (!copied) {
-				var clone = links.clone(true);
-				clone.filter('.rightside').each(function() {
-					if (persist) this.addClass('clone');
-					menu.prepend(this);
-				});
-				
-				if (persist) {
-					menu.prepend(clone.not('.rightside').addClass('clone'));
-				} else {
-					menu.prepend(clone.not('.rightside'));
-				}
-
-				menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
-				menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
-
-				if ($this.hasClass('post-buttons')) {
-					$('.button', menu).removeClass('button icon-button');
-					$('.responsive-menu-link', item).addClass('button icon-button').prepend('<span></span>');
-				}
-				copied = true;
-			}
-			else {
-				menu.children().css('display', '');
-			}
-
-			item.css('display', '');
-			$this.addClass('responsive');
-
-			// Try to not hide filtered items #TODO: this does not work!
-			if (filterLastList.length) {
-				links.not(filterLast).css('display', 'none');
-
-				maxHeight = 0;
-				filterLastList.each(function() {
-					if (!$(this).height()) return;
-					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
-				});
-
-				if ($this.height() <= maxHeight) {
-					menu.children().filter(filterLast).css('display', 'none');
-					return;
-				}
-			}
-
-			// If even responsive isn't enough, use both responsive and compact at same time
-			compact = true;
-			$this.addClass('compact');
-
-			links.css('display', 'none');
-		}
-
-		if (!persist) phpbb.registerDropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
-
-		check();
-		$(window).resize(check);
-	});
-
 	/**
 	* Responsive tabs
 	*/

phpBB/styles/prosilver/template/navbar_header.html

@@ -9,12 +9,6 @@
 				<div class="pointer"><div class="pointer-inner"></div></div>
 				<ul class="dropdown-contents">
 					<!-- EVENT overall_header_quick_links_before -->
-
-					<!-- <!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
-						<!-- IF S_DISPLAY_MEMBERLIST --><li class="small-icon icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
-						<!-- IF U_TEAM --><li class="small-icon icon-team"><a href="{U_TEAM}">{L_THE_TEAM}</a></li><!-- ENDIF -->
-					<!-- ENDIF --> -->
-
 					<li class="separator"></li>
 
 					<!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
@@ -47,7 +41,7 @@
 
 	<!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
 		<li id="username_logged_in" class="rightside dropdown-container<!-- IF CURRENT_USER_AVATAR --> no-bulletin<!-- ENDIF -->" data-skip-responsive="true">
-			<a href="{U_PROFILE}" class="header-avatar dropdown-trigger icon-dropdown"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF -->{CURRENT_USERNAME_CLEAN}</a>
+			<a href="{U_PROFILE}" class="header-avatar dropdown-trigger"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF -->{CURRENT_USERNAME_CLEAN}</a>
 			<div class="dropdown hidden">
 				<div class="pointer"><div class="pointer-inner"></div></div>
 				<ul class="dropdown-contents">

phpBB/styles/prosilver/theme/colours.css

@@ -369,11 +369,6 @@ a.arrow-right:hover {
 	color: #368AD2;
 }
 
-a.icon-dropdown:after {
-	background-image: url("./images/icon_dropdown.png");
-}
-
-
 /*
 --------------------------------------------------------------
 Colours and backgrounds for content.css

phpBB/styles/prosilver/theme/common.css

@@ -452,6 +452,14 @@ ul.linklist.bulletin li.no-bulletin:before {
 	width: auto;
 }
 
+.header-avatar span:after {
+	content: '\25BC';
+	display: inline-block;
+	float: right;
+	margin-left: 2px;
+	opacity: 0.7;
+}
+
 /* Dropdown menu
 ----------------------------------------*/
 .dropdown-container {
@@ -606,7 +614,7 @@ ul.linklist.bulletin li.no-bulletin:before {
 }
 
 .dropdown li.separator, ul.linklist .dropdown li.separator {
-	margin: 3px 0;
+	margin: 4px 0;
 	padding: 0;
 }
 

phpBB/styles/prosilver/theme/links.css

@@ -75,22 +75,6 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
 	width: 40px;
 }
 
-/* Dropdown links (inline) */
-a.icon-dropdown:after {
-	background-position: 0 0;
-	background-repeat: no-repeat;
-	content: '';
-	display: inline-block;
-	float: right;
-	height: 8px;
-	width: 11px;
-	margin: 9px 0 0 2px;
-}
-
-a.icon-dropdown:hover:after, .dropdown-visible a.icon-dropdown:after {
-	background-position: 0 -22px;
-}
-
 /* Links for forum/topic lists */
 a.forumtitle {
 	font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;

phpBB/styles/prosilver/theme/tweaks.css

@@ -69,5 +69,5 @@ dd.option {
 
 /* Fixes header-avatar aspect-ratio in IE8 */
 .header-avatar img {
-	height: 25px;
+	height: 20px;
 }