From 46ae630e956a4ab53040a96b7c1bc24c06489da1 Mon Sep 17 00:00:00 2001
From: tworrall <tlw72@cornell.edu>
Date: Thu, 18 Jul 2013 16:56:56 -0400
Subject: [PATCH] VIVO-215: fix layout of search results page - the first
 search result was appearing up in the header as were the facets; standardize
 look of the download popup. Also ensure that longer headings that include
 types from the facet wrap to new line rather than overrun the search help
 link.

---
 webapp/web/css/individual/individual.css          |  5 -----
 webapp/web/css/search.css                         | 11 ++---------
 webapp/web/css/vitro.css                          | 15 ++++++++++++++-
 webapp/web/js/searchDownload.js                   | 10 +++++-----
 .../body/search/search-pagedResults.ftl           | 12 ++++--------
 5 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/webapp/web/css/individual/individual.css b/webapp/web/css/individual/individual.css
index f819213b8..2725db1c7 100644
--- a/webapp/web/css/individual/individual.css
+++ b/webapp/web/css/individual/individual.css
@@ -268,11 +268,6 @@ input#uriLink {
     width: 350px;
     font-size: .8em;
 }
-a.close {
-    float: right;
-    margin-right: .3em;
-    font-size: .8em;
-}
 .rdf-url {
     display: block;
     padding-top: 0.8em;
diff --git a/webapp/web/css/search.css b/webapp/web/css/search.css
index b3717888a..6f00b95e4 100644
--- a/webapp/web/css/search.css
+++ b/webapp/web/css/search.css
@@ -83,18 +83,11 @@ span#searchHelp {
     font-size:.825em;
     padding-right:32px
 }
-
-span#downloadResults {
-    float:left;
-    margin-top:10px;
-    font-size:.825em;
-    padding-left:10px
-}
-
 img#downloadIcon {
     cursor: pointer;
+    margin-left: 6px;
+    vertical-align: top;
 }
-
 .download-url {
 	padding: 5px 25px 5px;
 }
\ No newline at end of file
diff --git a/webapp/web/css/vitro.css b/webapp/web/css/vitro.css
index c2001d95b..b2570e013 100644
--- a/webapp/web/css/vitro.css
+++ b/webapp/web/css/vitro.css
@@ -140,9 +140,22 @@
 .searchTOC ul span {
 	float:right;
 	padding-right: 10px;
-	color:grey;
+	color:gray;
 	font-size:smaller;
 }
+.contentsBrowseGroup  {
+    clear:both;
+    padding-top: 5px;
+}
+.searchResultsHeader {
+    width: 675px;
+    float:left;
+}
+a.close {
+    float: right;
+    margin-right: .3em;
+    font-size: .8em;
+}
 
 /* ------------------------------------------------->  */
 /* DROP DOWN USER MENU  ---------------------------->  */
diff --git a/webapp/web/js/searchDownload.js b/webapp/web/js/searchDownload.js
index 1bcec1607..889bf9c2f 100644
--- a/webapp/web/js/searchDownload.js
+++ b/webapp/web/js/searchDownload.js
@@ -3,21 +3,21 @@
 $(document).ready(function(){
     // This function creates and styles the "qTip" tooltip that displays the resource uri and the rdf link when the user clicks the uri/rdf icon.
 	
-	$('span#downloadResults').children('img#downloadIcon').each(function()
+	$('img#downloadIcon').each(function()
     {
         $(this).qtip(
         {
             content: {
                 prerender: true, // We need this for the .click() event listener on 'a.close'
-                text:  '<div style="float:right; width:150px">'
+                text:  '<div style="float:right; width:150px;border-left: 1px solid #A6B1B0; padding: 3px 0 0 20px">'
 	            	+'<p><label for="amount" style="font-size:14px;">Maximum Records:</label>'
 	            	+'<input disabled type="text" id="amount" style="margin-left:35px; border: 0; color: #f6931f; font-weight: bold; width:45px" /></p>'
 	            	+'<div id="slider-vertical" style="margin-left:60px; margin-top: -20px; height: 100px; background-color:white"></div>'
-	            	+'</div>'
-                	+'<div style="float:left; width:300px"><h5>Download the results from this search</h5> '
+	            	+'<br /><a class="close" href="#">close</a></div>'
+                	+'<div style="float:left; width:280px"><h5>Download the results from this search</h5> '
                 	+'<h5 class ="download-url"><a id=xmlDownload href="' + urlsBase + '/search?' + queryText +'&amp;xml=1&amp;hitsPerPage=500">download results in XML format</a></h5>'
                 	+'<h5 class ="download-url"><a id=csvDownload href="' + urlsBase + '/search?' + queryText +'&amp;csv=1&amp;hitsPerPage=500">download results in CSV format</a></h5>'
-                	+'<br /><a class="close" href="#">close</a></div>'
+                	+'</div>'
 
             },
             position: {
diff --git a/webapp/web/templates/freemarker/body/search/search-pagedResults.ftl b/webapp/web/templates/freemarker/body/search/search-pagedResults.ftl
index a0946ed23..aa3cdf39c 100644
--- a/webapp/web/templates/freemarker/body/search/search-pagedResults.ftl
+++ b/webapp/web/templates/freemarker/body/search/search-pagedResults.ftl
@@ -2,10 +2,7 @@
 
 <#-- Template for displaying paged search results -->
 
-
-
-
-<h2 style="float:left">
+<h2 class="searchResultsHeader">
 <#escape x as x?html>
     ${i18n().search_results_for} '${querytext}'
     <#if classGroupName?has_content>${i18n().limited_to_type} '${classGroupName}'</#if>
@@ -22,11 +19,10 @@
 	
 	var urlsBase = '${urls.base}';
 </script>
-</h2>
 
-<span id="downloadResults" title="Download Results">
-	<img id="downloadIcon" src="images/download-icon.png" alt="Download Results"  />
-</span>
+	<img id="downloadIcon" src="images/download-icon.png" alt="Download Results" title="Download Results" />
+<#-- <span id="downloadResults" style="float:left"></span>  -->
+</h2>
 
 <span id="searchHelp"><a href="${urls.base}/searchHelp" title="${i18n().search_help}">${i18n().not_expected_results}</a></span>
 <div class="contentsBrowseGroup">