Use full page for search results

Author: wilzbach

css/ddox.css

@@ -53,25 +53,36 @@ a.inherited:after { content: url(../images/ddox/inherited.png); padding-left: 3p
 
 #symbolSearch { width: 112pt; }
 
+#symbolSearchResultsContainer {
+	width: 80%;
+	margin: 0 auto;
+	padding: 0.3em;
+	display: none;
+}
+
 #symbolSearchResults {
-	background: #F5F5F5;
-	border: 1px solid #CCC;
 	font-size: small;
 	list-style: none;
-	margin: 0;
 	margin-top: 5px;
-	padding: 0.3em;
-	position: absolute;
-	right: -1px;
-	top: 100%;
-	width: 100%;
-	z-index: 1000;
+	-moz-column-gap: 20px;
+	-webkit-column-gap: 20px;
+	column-gap: 20px;
+	-moz-column-width: 17.5em;
+	-webkit-column-width: 17.5em;
+	column-width: 17.5em;
+	list-style-type: none;
+	font-size: 1.2em;
+}
+
+#symbolSearchCloseButton {
+	float: right;
+	font-size: 1.5em;
 }
 
 #symbolSearchResults li {
 	background-repeat: no-repeat;
 	background-position: left center;
-	padding-left: 18px;
+	padding: 15px;
 }
 
 #top #symbolSearchResults li a {

dpl-docs/views/layout.dt

@@ -136,8 +136,9 @@ html(lang='en-US')
                   button(type='submit')
                     i.fa.fa-search
                     span go
-              include ddox.inc.symbol-search.results
 
+    #symbolSearchResultsContainer
+      include ddox.inc.symbol-search.results
     .container
       .subnav-helper
       .subnav

js/ddox.js

@@ -1,3 +1,13 @@
+function getParameterByName(name, url) {
+		if (!url) url = window.location.href;
+		name = name.replace(/[\[\]]/g, "\\$&");
+		var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+				results = regex.exec(url);
+		if (!results) return '';
+		if (!results[2]) return '';
+		return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
 function setupDdox()
 {
 	$(".tree-view").children(".package").click(toggleTree);
@@ -6,6 +16,12 @@ function setupDdox()
 
 	updateSearchBox();
 	$('#sitesearch').change(updateSearchBox);
+
+	var searchParam = getParameterByName("q");
+	if (searchParam.length > 0) {
+		$("#symbolSearch").val(searchParam)
+		performSymbolSearch(40);
+	}
 }
 
 function updateSearchBox()
@@ -30,17 +46,24 @@ function toggleTree()
 var searchCounter = 0;
 var lastSearchString = "";
 
+var closeButton = undefined;
+
 function performSymbolSearch(maxlen)
 {
 	if (maxlen === 'undefined') maxlen = 26;
 
 	var searchstring = $("#symbolSearch").val().toLowerCase();
 
+	if (searchstring.length === 0) {
+		$('.container').show();
+		return;
+	}
+
 	if (searchstring == lastSearchString) return;
 	lastSearchString = searchstring;
 
 	var scnt = ++searchCounter;
-	$('#symbolSearchResults').hide();
+	$('#symbolSearchResultsContainer').hide();
 	$('#symbolSearchResults').empty();
 
 	var terms = $.trim(searchstring).split(/\s+/);
@@ -97,6 +120,15 @@ function performSymbolSearch(maxlen)
 
 	results.sort(compare);
 
+	if (closeButton === undefined) {
+		closeButton = $("<div id='symbolSearchCloseButton'><i class='fa fa-times big-icon'></i></div>");
+		closeButton.on("click", function() {
+			$('#symbolSearchResultsContainer').hide();
+			$('.container').show();
+		});
+		$('#symbolSearchResultsContainer').prepend(closeButton);
+	}
+
 	for (i = 0; i < results.length && i < 100; i++) {
 			var sym = results[i];
 
@@ -127,14 +159,16 @@ function performSymbolSearch(maxlen)
 	}
 
 	$('#symbolSearchResults').show();
+	$('#symbolSearchResultsContainer').show();
+	$('.container').hide();
 }
 
 $(function(){
-  $("#search-box form").on("submit", function(e) {
-    var searchResults = $('#symbolSearchResults').children();
-    if (searchResults.length > 0) {
-      window.location = searchResults.first().find("a").attr("href");
-      e.preventDefault();
-    }
-  });
+	$("#search-box form").on("submit", function(e) {
+		var searchResults = $('#symbolSearchResults').children();
+		if (searchResults.length > 0) {
+			window.location = searchResults.first().find("a").attr("href");
+			e.preventDefault();
+		}
+	});
 });