Merge pull request #1817 from cyberalien/ticket/11956

More responsive design adjustments

phpBB/assets/javascript/core.js

@@ -829,6 +829,132 @@ phpbb.applyCodeEditor = function(textarea) {
 	});
 };
 
+/**
+* List of classes that toggle dropdown menu,
+* list of classes that contain visible dropdown menu
+*
+* Add your own classes to strings with comma (probably you
+* will never need to do that)
+*/
+phpbb.dropdownHandles = '.dropdown-container.dropdown-visible .dropdown-toggle';
+phpbb.dropdownVisibleContainers = '.dropdown-container.dropdown-visible';
+
+/**
+* Dropdown toggle event handler
+* This handler is used by phpBB.registerDropdown() and other functions
+*/
+phpbb.toggleDropdown = function() {
+	var $this = $(this),
+		options = $this.data('dropdown-options'),
+		parent = options.parent,
+		visible = parent.hasClass('dropdown-visible');
+
+	if (!visible) {
+		// Hide other dropdown menus
+		$(phpbb.dropdownHandles).each(phpbb.toggleDropdown);
+
+		// Figure out direction of dropdown
+		var direction = options.direction,
+			verticalDirection = options.verticalDirection,
+			offset = $this.offset();
+
+		if (direction == 'auto') {
+			if (($(window).width() - $this.outerWidth(true)) / 2 > offset.left) {
+				direction = 'right';
+			}
+			else {
+				direction = 'left';
+			}
+		}
+		parent.toggleClass(options.leftClass, direction == 'left').toggleClass(options.rightClass, direction == 'right');
+
+		if (verticalDirection == 'auto') {
+			var height = $(window).height(),
+				top = offset.top - $(window).scrollTop();
+
+			if (top < height * 0.7) {
+				verticalDirection = 'down';
+			}
+			else {
+				verticalDirection = 'up';
+			}
+		}
+		parent.toggleClass(options.upClass, verticalDirection == 'up').toggleClass(options.downClass, verticalDirection == 'down');
+	}
+
+	options.dropdown.toggle();
+	parent.toggleClass(options.visibleClass, !visible).toggleClass('dropdown-visible', !visible);
+
+	// Check dimensions when showing dropdown
+	// !visible because variable shows state of dropdown before it was toggled
+	if (!visible) {
+		options.dropdown.find('.dropdown-contents').each(function() {
+			var $this = $(this),
+				windowWidth = $(window).width();
+
+			$this.css({
+				marginLeft: 0,
+				left: 0,
+				maxWidth: (windowWidth - 4) + 'px'
+			});
+
+			var offset = $this.offset().left,
+				width = $this.outerWidth(true);
+
+			if (offset < 2) {
+				$this.css('left', (2 - offset) + 'px');
+			}
+			else if ((offset + width + 2) > windowWidth) {
+				$this.css('margin-left', (windowWidth - offset - width - 2) + 'px');
+			}
+		});
+	}
+
+	// Prevent event propagation
+	if (arguments.length > 0) {
+		try {
+			var e = arguments[0];
+			e.preventDefault();
+			e.stopPropagation();
+		}
+		catch (error) { }
+	}
+	return false;
+};
+
+/**
+* Register dropdown menu
+* Shows/hides dropdown, decides which side to open to
+*
+* @param {jQuery} toggle Link that toggles dropdown.
+* @param {jQuery} dropdown Dropdown menu.
+* @param {Object} options List of options. Optional.
+*/
+phpbb.registerDropdown = function(toggle, dropdown, options)
+{
+	var ops = {
+			parent: toggle.parent(), // Parent item to add classes to
+			direction: 'auto', // Direction of dropdown menu. Possible values: auto, left, right
+			verticalDirection: 'auto', // Vertical direction. Possible values: auto, up, down
+			visibleClass: 'visible', // Class to add to parent item when dropdown is visible
+			leftClass: 'dropdown-left', // Class to add to parent item when dropdown opens to left side
+			rightClass: 'dropdown-right', // Class to add to parent item when dropdown opens to right side
+			upClass: 'dropdown-up', // Class to add to parent item when dropdown opens above menu item
+			downClass: 'dropdown-down' // Class to add to parent item when dropdown opens below menu item
+		};
+	if (options) {
+		ops = $.extend(ops, options);
+	}
+	ops.dropdown = dropdown;
+
+	ops.parent.addClass('dropdown-container');
+	toggle.addClass('dropdown-toggle');
+
+	toggle.data('dropdown-options', ops);
+
+	toggle.click(phpbb.toggleDropdown);
+};
+
 /**
 * Apply code editor to all textarea elements with data-bbcode attribute
 */
@@ -836,6 +962,14 @@ $(document).ready(function() {
 	$('textarea[data-bbcode]').each(function() {
 		phpbb.applyCodeEditor(this);
 	});
+
+	// Hide active dropdowns when click event happens outside
+	$('body').click(function(e) {
+		var parents = $(e.target).parents();
+		if (!parents.is(phpbb.dropdownVisibleContainers)) {
+			$(phpbb.dropdownHandles).each(phpbb.toggleDropdown);
+		}
+	});
 });
 
 })(jQuery); // Avoid conflicts with other libraries

phpBB/styles/prosilver/template/forum_fn.js

@@ -409,108 +409,6 @@ function insert_single_user(formId, user)
 	self.close();
 }
 
-function toggle_dropdown()
-{
-	var $this = $(this),
-		options = $this.data('dropdown-options'),
-		parent = options.parent,
-		visible = parent.hasClass('dropdown-visible');
-
-	if (!visible) {
-		// Hide other dropdown menus
-		$('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown);
-
-		// Figure out direction of dropdown
-		var direction = options.direction,
-			verticalDirection = options.verticalDirection,
-			offset = $this.offset();
-
-		if (direction == 'auto') {
-			if (($(window).width() - $this.outerWidth(true)) / 2 > offset.left) {
-				direction = 'right';
-			}
-			else {
-				direction = 'left';
-			}
-		}
-		parent.toggleClass(options.leftClass, direction == 'left').toggleClass(options.rightClass, direction == 'right');
-
-		if (verticalDirection == 'auto') {
-			var height = $(window).height(),
-				top = offset.top - $(window).scrollTop();
-
-			if (top < height * 0.7) {
-				verticalDirection = 'down';
-			}
-			else {
-				verticalDirection = 'up';
-			}
-		}
-		parent.toggleClass(options.upClass, verticalDirection == 'up').toggleClass(options.downClass, verticalDirection == 'down');
-	}
-
-	options.dropdown.toggle();
-	parent.toggleClass(options.visibleClass, !visible).toggleClass('dropdown-visible', !visible);
-
-	// Check dimensions when showing dropdown
-	// !visible because variable shows state of dropdown before it was toggled
-	if (!visible) {
-		options.dropdown.find('.dropdown-contents').each(function() {
-			var $this = $(this),
-				windowWidth = $(window).width();
-
-			$this.css({
-				marginLeft: 0,
-				left: 0,
-				maxWidth: (windowWidth - 4) + 'px'
-			});
-
-			var offset = $this.offset().left,
-				width = $this.outerWidth(true);
-
-			if (offset < 2) {
-				$this.css('left', (2 - offset) + 'px');
-			}
-			else if ((offset + width + 2) > windowWidth) {
-				$this.css('margin-left', (windowWidth - offset - width - 2) + 'px');
-			}
-		});
-	}
-}
-
-/**
-* Dropdown handler
-* Shows/hides dropdown, decides which side to open to
-*
-* @param [jQuery] toggle Link that toggles dropdown
-* @param [jQuery] dropdown Dropdown menu
-* @param [Object] [options] List of options
-*/
-function register_dropdown(toggle, dropdown, options)
-{
-	var ops = {
-			parent: toggle.parent(), // Parent item to add classes to
-			direction: 'auto', // Direction of dropdown menu. Possible values: auto, left, right
-			verticalDirection: 'auto', // Vertical direction. Possible values: auto, up, down
-			visibleClass: 'visible', // Class to add to parent item when dropdown is visible
-			leftClass: 'dropdown-left', // Class to add to parent item when dropdown opens to left side
-			rightClass: 'dropdown-right', // Class to add to parent item when dropdown opens to right side
-			upClass: 'dropdown-up', // Class to add to parent item when dropdown opens above menu item
-			downClass: 'dropdown-down' // Class to add to parent item when dropdown opens below menu item
-		};
-	if (options) {
-		ops = $.extend(ops, options);
-	}
-	ops.dropdown = dropdown;
-
-	ops.parent.addClass('dropdown-container');
-	toggle.addClass('dropdown-toggle');
-
-	toggle.data('dropdown-options', ops);
-
-	toggle.click(toggle_dropdown);
-}
-
 /**
 * Parse document block
 */
@@ -584,11 +482,6 @@ function parse_document(container)
 			lastWidth = false,
 			wrapped = false;
 
-		// Test height by setting nowrap
-		$this.css('white-space', 'nowrap');
-		maxHeight = $this.height() + 1;
-		$this.css('white-space', '');
-
 		// Set tooltips
 		$this.find('a').each(function() {
 			var $link = $(this);
@@ -601,6 +494,13 @@ function parse_document(container)
 				width = $body.width(),
 				link, i, j;
 
+			maxHeight = parseInt($this.css('line-height')) | 0;
+			links.each(function() {
+				if ($(this).height() > 0) {
+					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+				}
+			});
+
 			if (height <= maxHeight) {
 				if (!wrapped || lastWidth === false || lastWidth >= width) {
 					lastWidth = width;
@@ -798,7 +698,7 @@ function parse_document(container)
 					return;
 				}
 
-				if (text.length && text !== '-') {
+				if ((text.length && text !== '-') || cell.children().length) {
 					cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>');
 				}
 				else {
@@ -906,7 +806,11 @@ function parse_document(container)
 			responsive = true;
 
 			if (!copied) {
-				menu.append(links.clone(true));
+				var clone = links.clone(true);
+				clone.filter('.rightside').each(function() {
+					menu.prepend(this);
+				});
+				menu.prepend(clone.not('.rightside'));
 				menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
 				menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
 				copied = true;
@@ -937,7 +841,7 @@ function parse_document(container)
 			links.css('display', 'none');
 		}
 
-		register_dropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
+		phpbb.registerDropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
 
 		check();
 		$(window).resize(check);
@@ -979,7 +883,7 @@ function parse_document(container)
 			if (height <= maxHeight) {
 				responsive = false;
 				if (item.hasClass('dropdown-visible')) {
-					toggle_dropdown.call(item.find('a.responsive-tab-link').get(0));
+					phpbb.toggleDropdown.call(item.find('a.responsive-tab-link').get(0));
 				}
 				return;
 			}
@@ -1004,7 +908,7 @@ function parse_document(container)
 			menu.find('a').click(function() { check(true); });
 		}
 
-		register_dropdown(item.find('a.responsive-tab-link'), item.find('.dropdown'), {visibleClass: 'activetab'});
+		phpbb.registerDropdown(item.find('a.responsive-tab-link'), item.find('.dropdown'), {visibleClass: 'activetab'});
 
 		check(true);
 		$(window).resize(check);
@@ -1020,6 +924,31 @@ function parse_document(container)
 			$(this).addClass('responsive-hide');
 		}
 	});
+
+	/**
+	* Replace responsive text
+	*/
+	container.find('[data-responsive-text]').each(function() {
+		var $this = $(this),
+			fullText = $this.text(),
+			responsiveText = $this.attr('data-responsive-text'),
+			responsive = false;
+
+		function check() {
+			if ($(window).width() > 700) {
+				if (!responsive) return;
+				$this.text(fullText);
+				responsive = false;
+				return;
+			}
+			if (responsive) return;
+			$this.text(responsiveText);
+			responsive = true;
+		}
+
+		check();
+		$(window).resize(check);
+	});
 }
 
 /**
@@ -1035,15 +964,6 @@ function parse_document(container)
 			$('#' + this.getAttribute('data-focus')).focus();
 		});
 
-		// Hide active dropdowns when click event happens outside
-		$('#phpbb').click(function(e) {
-
-			var parents = $(e.target).parents();
-			if (!parents.is('.dropdown-container.dropdown-visible')) {
-				$('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown);
-			}
-		});
-
 		parse_document($('body'));
 	});
 })(jQuery);

phpBB/styles/prosilver/template/overall_header.html

@@ -156,14 +156,14 @@
 				<!-- ENDIF -->
 			<!-- ENDIF -->
 
-				<!-- EVENT overall_header_navigation_prepend -->
+				<!-- EVENT overall_header_navigation_append -->
 				<!-- IF not S_IS_BOT -->
 					<li class="icon-logout rightside no-bulletin"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
 					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register rightside no-bulletin"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
 					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members rightside no-bulletin"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
 				<!-- ENDIF -->
 				<li class="icon-faq rightside no-bulletin"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
-				<!-- EVENT overall_header_navigation_append -->
+				<!-- EVENT overall_header_navigation_prepend -->
 			</ul>
 
 			</div>

phpBB/styles/prosilver/theme/common.css

@@ -372,7 +372,7 @@ ul.linklist li.responsive-menu a.responsive-menu-link {
 	font-size: 16px;
 	position: relative;
 	width: 16px;
-	line-height: 16px;
+	line-height: 16.5px;
 	text-decoration: none;
 }
 
@@ -533,20 +533,22 @@ ul.linklist.bulletin li.no-bulletin:before {
 
 /* Responsive breadcrumbs
 ----------------------------------------*/
+.breadcrumbs .crumb {
+	word-wrap: normal;
+}
+
 .breadcrumbs .crumb a {
 	display: inline-block;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 	vertical-align: bottom;
+	overflow: hidden;
 }
 
 .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 a {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
 .breadcrumbs .crumb.wrapped-max a { max-width: 120px; }
 .breadcrumbs .crumb.wrapped-wide a { max-width: 100px; }
 .breadcrumbs .crumb.wrapped-medium a { max-width: 80px; }

phpBB/styles/prosilver/theme/responsive.css

@@ -17,7 +17,7 @@ body {
 }
 
 #wrap {
-	min-width: 320px;
+	min-width: 300px;
 	padding: 0;
 }
 
@@ -343,6 +343,19 @@ fieldset.quick-login label[for="autologin"] {
 	min-width: 50%;
 }
 
+@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
+{
+	select, .inputbox {
+		max-width: 260px;
+	}
+}
+
+@media only screen and (max-width: 320px), only screen and (max-device-width: 320px)
+{
+	select, .inputbox {
+		max-width: 240px;
+	}
+}
 
 /* User profile
 ----------------------------------------*/