* More fixes to the search popup. Should behave better in mobile mode…

… *and* desktop mode, too... What an annoying piece of code, still. (script.js, sections.css)
Wedge · Oct 5, 2014 · 9f4c805 · 9f4c805
1 parent 261d5a3
commit 9f4c805
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 39 deletions.
diff --git a/core/javascript/script.js b/core/javascript/script.js
@@ -658,43 +658,47 @@ $(window).load(function ()
 	}
 
 	// Show a pop-up with more options when focusing the quick search box.
-	var opened, $pop = $('<div class="mimenu right">').appendTo($('#search_form').addClass('mime'));
-	$('#search_form .search').focus(function ()
-	{
-		if (opened)
-			return;
-		$(this).toggleClass('open');
-		$pop.load(weUrl('action=search' + (window.we_topic ? ';topic=' + we_topic : '') + (window.we_board ? ';board=' + we_board : '')), function () {
+	var
+		loaded,
+		$pop = $('<div class="mimenu right">').appendTo('#search_form'),
+		$that = $('#search_form .search'),
+		animate_search = function (open) {
+			var start = $pop.parent().offset().top, end = start + $pop.parent().height();
 			$pop.css({
-				top: 0,
-				right: Math.min($pop.offset().left, 0)
-			}).hide().animate({
+				top: open ? start : end,
+				// Calculate the optimal width for the box.
+				right: $('body').width() - Math.max($pop.width() - 15, $pop.parent().offset().left + $pop.parent().width())
+			}).toggle(!open).animate({
 				opacity: 'toggle',
-				top: '100%'
-			}).find('select').sb();
-		});
-		opened = true;
-		$(document).on('click.sf', function (e) {
-			if ($(e.target).closest('#search_form').length)
-				return;
-			opened = false;
-			$(document).off('.sf');
-			$('#search_form .search').toggleClass('open');
-			$pop.css('top', '100%').animate({
-				opacity: 'toggle',
-				top: '0%'
+				top: open ? end : start
 			});
-		}).on('keyup.sf', function (e) {
-			// keydown target holds previous element, keyup holds next one. Found this by myself, eheh.
-			if (e.altKey || e.ctrlKey || e.keyCode != 9 || $(e.target).closest('#search_form').length)
-				return;
-			opened = false;
-			$(document).off('.sf');
-			$pop.css('top', '100%').animate({
-				opacity: 'toggle',
-				top: '0%'
+		};
+
+	$that.focus(function ()
+	{
+		if ($that.hasClass('open'))
+			return;
+		$that.addClass('open');
+		if (!loaded)
+			$pop.load(weUrl('action=search' + (window.we_topic ? ';topic=' + we_topic : '') + (window.we_board ? ';board=' + we_board : '')), function () {
+				loaded = true;
+				$pop.find('select').sb();
+				if ($that.hasClass('open'))
+					animate_search(true);
+			});
+		else
+			animate_search(true);
+		$(document)
+			.off('.sf')
+			.on('click.sf keyup.sf', function (e) {
+				// Close popup if clicking or tabbing out of it.
+				// keydown target holds current element, keyup holds next one. Found this by myself, eheh.
+				if ((e.keyCode && (e.keyCode != 9 || e.altKey || e.ctrlKey)) || $(e.target).closest('#search_form').length)
+					return;
+				$that.removeClass('open');
+				$(document).off('.sf');
+				animate_search(false);
 			});
-		});
 	});
 });
 

diff --git a/core/skins/sections.css b/core/skins/sections.css
@@ -1306,20 +1306,18 @@ div.top_row dd
 	white-space: normal
 	dt, dd
 		max-width: @is ("ie[9-],firefox[4-],chrome[19-],safari[6-]", "calc(100% - 1em)", 100%)
-		width: 100%
-		clear: both
-	dt
 		width: auto
+		clear: both
+		text-align: left
 	#advanced_search
 		border, padding: 0
 		font-size: .9em
 	.sbox
 		display: block
-	input[type=number]
-		width: 60px
 	.mimenu
 		left: auto
 		min-width: @ifnull($responsive_search_min_width, 300px)
+		max-width: 100%
 
 /* Styles for the search results page.
 ------------------------------------------------- */
@@ -1559,7 +1557,7 @@ body.waiting *
 
 			dt, dd
 				clear: both
-				width: auto
+				width: 100%
 			dd
 				padding-left: 12px