From da42e098e09e8d0733a5a0ec8465272a4e0ecf5c Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 9 Mar 2009 14:51:25 -0500
Subject: [PATCH] Resubmitting: tweaks to search results page, including using
 amazonisbn to pull cover image and inline display of itemtype images to
 improve display.

The previous method for displaying itemtype images relied on setting a background-image for a list item. This method didn't take into account the possibility of varying sizes for images, resulting in overlap with some images. This patch also includes some changes to improve readability of holdings information.

Signed-off-by: Galen Charlton <galen.charlton@liblime.com>
---
 .../prog/en/css/staff-global.css              | 22 +++++++++++++++++++
 .../prog/en/modules/catalogue/results.tmpl    | 22 +++++++++----------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index e8fe878e75..c2d9a78c0f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -1280,7 +1280,29 @@ overflow :  hidden;
 }
 
 #searchresults ul li {
+	font-size : 90%;
 	list-style : url(../../img/item-bullet.gif);
+	padding : .2em 0;
+}
+
+#searchresults span.status {
+	clear : left;
+	color : #900;
+	display : block;
+}
+
+#searchresults span.unavailable {
+	clear : left;
+	display : block;
+}
+
+#searchresults .availability strong {
+	display : block;
+}
+
+#searchresults ul li img {
+	float : left;
+	margin : 3px 5px 3px -5px;
 }
 
 #searchresults table td {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tmpl b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tmpl
index 3609e26a55..1ae2430461 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tmpl
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tmpl
@@ -245,7 +245,7 @@ $(window).load(function() {
                             <!-- TMPL_IF NAME="AmazonContent" -->
                                 <td>
                                     <a class="p1" href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" ESCAPE="URL" -->">
-                                        <img src="<!-- TMPL_IF NAME="isbn" -->http://images.amazon.com/images/P/<!-- TMPL_VAR name="isbn" -->.01.TZZZZZZZ.jpg<!-- TMPL_ELSE -->http://g-images.amazon.com/images/G/01/x-site/icons/no-img-sm.gif<!-- /TMPL_IF -->" alt="image" class="thumbnail" />
+                                        <img src="<!-- TMPL_IF NAME="isbn" -->http://images.amazon.com/images/P/<!-- TMPL_VAR name="amazonisbn" -->.01.TZZZZZZZ.jpg<!-- TMPL_ELSE -->http://g-images.amazon.com/images/G/01/x-site/icons/no-img-sm.gif<!-- /TMPL_IF -->" alt="image" class="thumbnail" />
                                     </a></td>                           
                             <!-- /TMPL_IF -->
                             <td>
@@ -274,7 +274,7 @@ $(window).load(function() {
                                     <p>
                                     <!-- TMPL_UNLESS NAME="item-level_itypes" -->
                                     <!-- TMPL_UNLESS NAME="noItemTypeImages" --><!-- TMPL_IF name="imageurl" -->
-                                    <img src="<!-- TMPL_VAR name="imageurl" -->" title="<!-- TMPL_VAR name="description" -->" style="float: left; margin: .1em;" alt="img" />
+                                    <img src="<!-- TMPL_VAR name="imageurl" -->" title="<!-- TMPL_VAR name="description" -->" style="float: left; margin: .1em;" alt="" />
                                     <!-- /TMPL_IF --><!-- /TMPL_UNLESS -->
                                     <!-- /TMPL_UNLESS -->
                                     <!-- TMPL_VAR name="summary" --></p>
@@ -282,7 +282,7 @@ $(window).load(function() {
                                     <p>
                                     <!-- TMPL_UNLESS NAME="item-level_itypes" -->
                                     <!-- TMPL_UNLESS NAME="noItemTypeImages" --><!-- TMPL_IF name="imageurl" -->
-                                    <img src="<!-- TMPL_VAR name="imageurl" -->" title="<!-- TMPL_VAR name="description" -->" style="float: left; margin: .1em;" alt="img" />
+                                    <img src="<!-- TMPL_VAR name="imageurl" -->" title="<!-- TMPL_VAR name="description" -->" style="float: left; margin: .1em;" alt="" />
                                     <!-- /TMPL_IF --><!-- /TMPL_UNLESS -->
                                     <!-- /TMPL_UNLESS -->
 
@@ -322,31 +322,29 @@ $(window).load(function() {
                                 </td>
 
                                 <td><div class="availability">
-                                    <!-- TMPL_IF NAME="items_count" --><div><!-- TMPL_VAR NAME="items_count" -->
-                                    <!-- TMPL_IF NAME="itemsplural" -->items<!-- TMPL_ELSE -->item<!-- /TMPL_IF --></div>
+                                    <!-- TMPL_IF NAME="items_count" --><strong><!-- TMPL_VAR NAME="items_count" -->
+                                    <!-- TMPL_IF NAME="itemsplural" -->items<!-- TMPL_ELSE -->item<!-- /TMPL_IF --><!-- TMPL_IF NAME="available_items_loop" -->, <!-- TMPL_IF NAME="availablecount" --><!-- TMPL_VAR NAME="availablecount" --> available:<!-- /TMPL_IF --><!-- TMPL_ELSE -->, None available<!-- /TMPL_IF --></strong>
 
                                     <!-- TMPL_IF NAME="available_items_loop" -->
                                     <!-- TMPL_IF NAME="availablecount" --><!-- TMPL_VAR NAME="availablecount" --><!-- /TMPL_IF --> available:
                                     <ul>
                                     <!-- TMPL_LOOP NAME="available_items_loop" -->
                                         
-                                        <!-- TMPL_IF NAME="noItemTypeImages" --><li><!-- TMPL_ELSE --><!-- TMPL_IF NAME="item-level_itypes" --><!-- TMPL_IF name="imageurl" --><li style=" list-style: none; list-style-type: none;  background-image: url(<!-- TMPL_VAR name="imageurl" -->); background-repeat: no-repeat; background-position: 0 50%; padding: 3px 0 3px 30px; margin: .4em 0; " title="<!-- TMPL_VAR name="description" -->"><!-- TMPL_ELSE --><li><!-- /TMPL_IF --><!-- TMPL_ELSE --><li><!-- /TMPL_IF --><!-- /TMPL_IF -->
+                                        <!-- TMPL_IF NAME="noItemTypeImages" --><li><!-- TMPL_ELSE --><!-- TMPL_IF NAME="item-level_itypes" --><!-- TMPL_IF name="imageurl" --><li style="list-style: none; list-style-type: none;"><img src="<!-- TMPL_VAR name="imageurl" -->" title="<!-- TMPL_VAR name="description" -->" /><!-- TMPL_ELSE --><li><!-- /TMPL_IF --><!-- TMPL_ELSE --><li><!-- /TMPL_IF --><!-- /TMPL_IF -->
                                         <!-- TMPL_IF NAME="branchname" --><!-- TMPL_VAR NAME="branchname" --><!-- /TMPL_IF -->
                                         <!-- TMPL_IF NAME="location" --><!-- TMPL_VAR NAME="location" --><!-- /TMPL_IF -->
                                         <!-- TMPL_IF NAME="itemcallnumber" -->[<a href="/cgi-bin/koha/catalogue/search.pl?q=callnum:<!-- TMPL_VAR NAME="itemcallnumber" ESCAPE="URL" -->"><!-- TMPL_VAR NAME="itemcallnumber" --></a>]<!-- /TMPL_IF -->
                                         (<!-- TMPL_VAR NAME="count" -->)</li>
                                     <!-- /TMPL_LOOP --></ul>
-                                    <!-- TMPL_ELSE -->
-                                    <span class="unavailable">No items available</span>
                                     <!-- /TMPL_IF -->
 
                                    <!-- TMPL_IF NAME="onloan_items_loop" -->
-                                   <!-- TMPL_IF NAME="onloancount" --><!-- TMPL_VAR NAME="onloancount" --><!-- /TMPL_IF --> on loan:
+                                   <span class="status"><!-- TMPL_IF NAME="onloancount" --><!-- TMPL_VAR NAME="onloancount" --><!-- /TMPL_IF --> on loan:</span>
                                     <ul>
                                     <!-- TMPL_LOOP NAME="onloan_items_loop" -->
                                        <!-- TMPL_IF NAME="noItemTypeImages" --><li><!-- TMPL_ELSE --><!-- TMPL_IF NAME="item-level_itypes" -->
                                         <!-- TMPL_IF name="imageurl" -->
-                                        <li style=" list-style: none; list-style-type: none;  background-image: url(<!-- TMPL_VAR name=imageurl -->); background-repeat: no-repeat; background-position: 0 50%; padding: 3px 0 3px 30px; margin: .4em 0;" title="<!-- TMPL_VAR name="description" -->">
+                                        <li style="list-style: none; list-style-type: none;"><img src="<!-- TMPL_VAR name="imageurl" -->" title="<!-- TMPL_VAR name="description" -->" />
                                         <!-- TMPL_ELSE --><li><!-- /TMPL_IF -->
                                         <!-- TMPL_ELSE --><li><!-- /TMPL_IF --><!-- /TMPL_IF -->                                        
 
@@ -358,12 +356,12 @@ $(window).load(function() {
                                     <!-- /TMPL_IF -->
 
                                     <!-- TMPL_IF NAME="other_items_loop" -->
-                                    <!-- TMPL_IF NAME="othercount" --><!-- TMPL_VAR NAME="othercount" --><!-- /TMPL_IF --> unavailable:
+                                    <span class="unavailable"><!-- TMPL_IF NAME="othercount" --><!-- TMPL_VAR NAME="othercount" --><!-- /TMPL_IF --> unavailable:</span>
                                     <ul>
                                     <!-- TMPL_LOOP NAME="other_items_loop" -->
                                         <!-- TMPL_IF NAME="noItemTypeImages" --><li><!-- TMPL_ELSE --><!-- TMPL_IF NAME="item-level_itypes" -->
                                         <!-- TMPL_IF name="imageurl" -->
-                                        <li style="list-style: none; list-style-type: none; background-image: url(<!-- TMPL_VAR name="imageurl" -->); background-repeat: no-repeat; background-position: 0 50%; padding: 3px 0 3px 30px; margin: .4em 0;" title="<!-- TMPL_VAR name="description" -->">
+                                        <li style="list-style: none; list-style-type: none;"><img src="<!-- TMPL_VAR name="imageurl" -->" title="<!-- TMPL_VAR name="description" -->" />
                                         <!-- TMPL_ELSE --><li><!-- /TMPL_IF -->
                                         <!-- TMPL_ELSE --><li><!-- /TMPL_IF --><!-- /TMPL_IF -->
 
-- 
2.20.1