[Koha-patches] [PATCH] Change to layout of opac-detail to accommodate wide holdings tables.
Owen Leonard
oleonard at myacpl.org
Fri Nov 7 20:38:21 CET 2008
Wide holdings tables were causing the layout to break for many users. The problem was often exacerbated by a long right-hand column when similar items are being displayed. This patch eliminates the left-hand column (OpacNav) for this page. The set of tabs that includes the holdings table now spans the width of the page. Similar items (now 'Related') are in their own tab. Finally, the 'Search for this title in...' block has been transformed into a link ('More searches') which triggers a menu.
---
koha-tmpl/opac-tmpl/prog/en/css/opac.css | 75 ++++++---
.../opac-tmpl/prog/en/modules/opac-detail.tmpl | 178 +++++++++++---------
koha-tmpl/opac-tmpl/prog/images/menu-arrow.gif | Bin 0 -> 54 bytes
3 files changed, 151 insertions(+), 102 deletions(-)
create mode 100644 koha-tmpl/opac-tmpl/prog/images/menu-arrow.gif
diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index 4f9006b..28f5584 100644
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -422,6 +422,26 @@ a .term {
background-image:url(../../images/print.gif);
}
+#action a#furthersearches {
+ background-image:url(../../images/menu-arrow.gif);
+ border-top : 1px solid #F3F3F3;
+ border-right: 1px solid #F3F3F3;
+ border-left : 1px solid #F3F3F3;
+ border-bottom : 1px solid #F3F3F3;
+ background-position : right center;
+ background-repeat : no-repeat;
+ margin-left : 5px;
+ padding : 2px 26px 2px 10px;
+ text-decoration : none;
+}
+
+#action a#furthersearches:hover {
+ border-top : 1px solid #FFF;
+ border-left : 1px solid #FFF;
+ border-right : 1px solid #979797;
+ border-bottom : 1px solid #979797;
+}
+
#toolbar a.brief {
background-image: url(../../images/brief.gif);
}
@@ -1327,7 +1347,9 @@ div#menu li.active a:hover {
padding: 2px 2px 1px 2px;
}
-#export,#further,#similars, .detailtagcell {
+#export,
+#further,
+.detailtagcell {
margin-top : .5em;
background-color : #F3F3F3;
border : 1px solid #E8E8E8;
@@ -1357,28 +1379,6 @@ div#menu li.active a:hover {
list-style-image : url("../../images/further-bullet.gif");
}
-#similars {
- background-color : #FFF;
- text-align : center;
- font-size : 95%;
- padding : 0 3px 3px 3px;
-}
-
-#similars ul {
- margin : 0;
- padding : 0;
-}
-
-#similars li {
- list-style : none;
- margin : 0;
- padding : 0;
-}
-
-#similars li a {
- display : block;
-}
-
#amazonreviews h4 {
font-size : 90%;
margin : 0;
@@ -1737,7 +1737,34 @@ table#items th {
#action {
margin-top: 0;
}
-.results_summary img {
+#similars h4 {
+ text-align : left;
+}
+#similars table,
+#similars td {
+ border : 0;
+ margin : 0;
+}
+#similars td {
+ width : 13em;
+}
+#similars a {
+ display : block;
+ font-weight : normal;
+}
+#furtherm a,
+#furtherm a:link,
+#furtherm a:visited {
+ color : #006699;
+}
+#furtherm h4 {
+ font-size : 106%;
+ margin : .1em .5em;
+}
+#furtherm .bd {
+ background-color : #F3F3F3;
+ border:1px solid #DDD;
+}.results_summary img {
margin : 0 5px;
}
span.no-image {
diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tmpl b/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tmpl
index e81afb5..a84f3ec 100644
--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tmpl
+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tmpl
@@ -22,11 +22,29 @@
widgets : ['zebra'],
sortList: [[0,0]]
});
+ // $("#action").append("<li><a id=\"moresearches\" href=\"#\">More searches</a></li>");
<!-- TMPL_IF NAME="GoogleJackets" -->KOHA.Google.GetCoverFromIsbn();<!-- /TMPL_IF -->
<!-- TMPL_IF NAME="TagsEnabled" -->$(".tagbutton").click(KOHA.Tags.add_tag_button);<!-- /TMPL_IF -->
});
+
+// Build lists menu
+YAHOO.util.Event.onContentReady("furtherm", function () {
+ $("#furtherm").css("display","block").css("visibility","hidden");
+
+ var furthersearchesMenu = new YAHOO.widget.Menu("furtherm");
+ furthersearchesMenu.render();
+ furthersearchesMenu.cfg.setProperty("context", ["furthersearches", "tr", "br"]);
+ furthersearchesMenu.subscribe("beforeShow",positionfurthersearchesMenu);
+ furthersearchesMenu.subscribe("show", furthersearchesMenu.focus);
+ function positionfurthersearchesMenu() {
+ furthersearchesMenu.align("tr", "br");
+ }
+ YAHOO.util.Event.addListener("furthersearches", "click", furthersearchesMenu.show, null, furthersearchesMenu);
+ YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionfurthersearchesMenu);
+ });
+
//]]>
</script>
<style type="text/css">
@@ -42,7 +60,7 @@
</head>
<body>
-<!-- TMPL_IF NAME="OpacNav" --><div id="doc3" class="yui-t1"><!-- TMPL_ELSE --><div id="doc3" class="yui-t7"><!-- /TMPL_IF -->
+<div id="doc3" class="yui-t7">
<div id="bd">
<!--TMPL_INCLUDE NAME="masthead.inc" -->
@@ -221,6 +239,68 @@
<!-- /TMPL_IF -->
</div>
+</div>
+</div>
+
+<div class="yui-u">
+<div class="container">
+<ul id="action">
+
+<!-- TMPL_UNLESS NAME="norequests" -->
+ <!-- TMPL_UNLESS name="bi_notforloan" -->
+ <!-- TMPL_IF NAME="opacuserlogin" --><!-- TMPL_IF NAME="RequestOnOpac" -->
+ <li><a class="reserve" href="/cgi-bin/koha/opac-reserve.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->">
+ Place Hold
+ </a></li>
+ <!-- /TMPL_IF --><!-- /TMPL_IF -->
+ <!-- /TMPL_UNLESS -->
+<!-- /TMPL_UNLESS -->
+ <li><a class="print" href="/cgi-bin/koha/opac-detailprint.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->" onclick="Dopop('opac-detailprint.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->'); return false;">
+ Print
+ </a></li>
+<!-- TMPL_IF name="virtualshelves" -->
+ <!-- TMPL_IF NAME="opacuserlogin" --><!-- TMPL_IF NAME="loggedinusername" -->
+ <li><a class="addtoshelf" href="/cgi-bin/koha/opac-addbybiblionumber.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->" onclick="Dopop('opac-addbybiblionumber.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->'); return false;">
+ Save to Your Lists
+ </a></li>
+ <!-- /TMPL_IF --><!-- /TMPL_IF -->
+<!-- /TMPL_IF -->
+ <!-- TMPL_IF NAME="opacbookbag" --><li><a class="addtocart" href="#" onclick="addRecord('<!-- TMPL_VAR NAME="biblionumber" -->'); return false;">
+ Add to Your Cart
+ </a></li><!-- /TMPL_IF -->
+ <li><a href="#" id="furthersearches">More searches</a></li>
+</ul>
+
+<div id="furtherm" class="yuimenu" style="display: none">
+<div class="bd">
+<h4>Search for this title in:</h4>
+<ul class="first-of-type">
+<li class="yuimenuitem"><!-- TMPL_IF NAME="OPACURLOpenInNewWindow" --><a class="yuimenuitemlabel" href="http://worldcat.org/search?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->" target="_blank">Other Libraries (WorldCat)</a><!-- TMPL_ELSE --><a class="yuimenuitemlabel" href="http://worldcat.org/search?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->">Other Libraries (WorldCat)</a><!-- /TMPL_IF --></li>
+<li class="yuimenuitem"><!-- TMPL_IF NAME="OPACURLOpenInNewWindow" --><a class="yuimenuitemlabel" href="http://www.scholar.google.com/scholar?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->" target="_blank">Other Databases (Google Scholar)</a><!-- TMPL_ELSE --><a class="yuimenuitemlabel" href="http://www.scholar.google.com/scholar?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->">Other Databases (Google Scholar)</a><!-- /TMPL_IF --></li>
+<li class="yuimenuitem"><!-- TMPL_IF NAME="OPACURLOpenInNewWindow" --><a class="yuimenuitemlabel" href="http://www.bookfinder.com/search/?author=<!-- TMPL_VAR NAME="author" -->&title=<!-- TMPL_VAR NAME="title" -->&st=xl&ac=qr" target="_blank">Online Stores (Bookfinder.com)</a><!-- TMPL_ELSE --><a class="yuimenuitemlabel" href="http://www.bookfinder.com/search/?author=<!-- TMPL_VAR NAME="author" -->&title=<!-- TMPL_VAR NAME="title" -->&st=xl&ac=qr">Online Stores (Bookfinder.com)</a><!-- /TMPL_IF --></li>
+</ul>
+</div>
+</div>
+
+ <div id="export" class="detailtagcell">
+ <form method="get" action="/cgi-bin/koha/opac-export.pl">
+ <label for="format">Save Record:</label>
+ <select name="format" id="format">
+ <option value="">-- Choose Format --</option>
+ <option value="mods">MODS (XML)</option>
+ <option value="dc">Dublin Core (XML)</option>
+ <option value="marcxml">MARCXML</option>
+ <option value="marc8">MARC (non-Unicode/MARC-8)</option>
+ <option value="utf8">MARC (Unicode/UTF-8)</option> </select><input type="hidden" name="op" value="export" /><input type="hidden" name="bib" value="<!-- TMPL_VAR NAME="biblionumber" -->" />
+<input type="submit" name="save" value="Go" /></form>
+ </div>
+
+</div>
+</div>
+</div>
+
+<!-- Holdings, etc. -->
+<div class="yui-g">
<div id="bibliodescriptions" class="toptabs">
<ul>
@@ -233,6 +313,8 @@
</li><!-- /TMPL_IF -->
<!-- TMPL_IF NAME="reviewson" --><li><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->#comments">Comments</a></li><!-- /TMPL_IF -->
+<!-- TMPL_IF NAME="AmazonContent" --><!-- TMPL_IF NAME="OPACAmazonSimilarItems" --><!-- TMPL_IF NAME="AMAZON_SIMILAR_PRODUCTS" --><li><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->#similars">Related</a></li><!-- /TMPL_IF --><!-- /TMPL_IF --><!-- /TMPL_IF -->
+
<!-- TMPL_IF NAME="OPACFRBRizeEditions" --><!-- TMPL_IF NAME="XISBNS" --><li><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->#editions">Editions</a></li><!-- /TMPL_IF --><!-- /TMPL_IF -->
<!-- TMPL_IF NAME="AmazonContent" --><li><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->#amazonreviews">Amazon Reviews</a></li><!-- /TMPL_IF -->
@@ -472,7 +554,7 @@
<!-- TMPL_IF NAME="OPACFRBRizeEditions" --><!-- TMPL_IF NAME="XISBNS" --><div id="editions">
-<h2>Other Editions of this Work</h2>
+<h4>Other Editions of this Work</h4>
<table>
<!-- TMPL_LOOP NAME="XISBNS" -->
<tr><!-- TMPL_IF NAME="AmazonContent" --><td><img src="http://images.amazon.com/images/P/<!-- TMPL_VAR NAME="amazonisbn" -->.01._AA75_PU_PU-5_.jpg" alt="" /></td><!-- /TMPL_IF --><td><!-- TMPL_VAR NAME="description" --></td><td><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->"><!-- TMPL_VAR NAME="title" escape="html" --></a><!-- TMPL_IF NAME="author" --> by <!-- TMPL_VAR NAME="author" ESCAPE="HTML" --><!-- /TMPL_IF --><!-- TMPL_IF NAME="copyrightdate" --> ©<!-- TMPL_VAR NAME="copyrightdate" --><!-- /TMPL_IF --><!-- TMPL_IF name="publishercode" -->
@@ -489,6 +571,22 @@
<!-- /TMPL_LOOP -->
</table>
</div><!-- /TMPL_IF --><!-- /TMPL_IF -->
+
+<!-- TMPL_IF NAME="AmazonContent" --><!-- TMPL_IF NAME="OPACAmazonSimilarItems" --><!-- TMPL_IF NAME="AMAZON_SIMILAR_PRODUCTS" -->
+<!-- Amazon Similar items -->
+<div id="similars">
+<h4>Related Titles</h4>
+<table><tr>
+<!-- TMPL_LOOP NAME="AMAZON_SIMILAR_PRODUCTS" -->
+<!-- TMPL_LOOP NAME="similar_biblionumbers" -->
+<td><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->"><img alt="" src="http://images.amazon.com/images/P/<!-- TMPL_VAR NAME="ASIN"-->.01._SS50_.jpg" /></a> <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->"><!-- TMPL_VAR NAME="title" ESCAPE="HTML" --></a> </td>
+<!-- /TMPL_LOOP -->
+<!-- /TMPL_LOOP -->
+</tr></table>
+</div><!-- /TMPL_IF -->
+<!-- /TMPL_IF --><!-- /TMPL_IF -->
+
+
<!-- TMPL_IF NAME="AmazonContent" -->
<!-- Amazon Reviews -->
<div id="amazonreviews">
@@ -514,84 +612,8 @@
</div>
</div>
-</div>
-
-<div class="yui-u">
-<div class="container">
-<ul id="action">
-<!-- TMPL_UNLESS NAME="norequests" -->
- <!-- TMPL_UNLESS name="bi_notforloan" -->
- <!-- TMPL_IF NAME="opacuserlogin" --><!-- TMPL_IF NAME="RequestOnOpac" -->
- <li><a class="reserve" href="/cgi-bin/koha/opac-reserve.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->">
- Place Hold
- </a></li>
- <!-- /TMPL_IF --><!-- /TMPL_IF -->
- <!-- /TMPL_UNLESS -->
-<!-- /TMPL_UNLESS -->
- <li><a class="print" href="/cgi-bin/koha/opac-detailprint.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->" onclick="Dopop('opac-detailprint.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->'); return false;">
- Print
- </a></li>
-<!-- TMPL_IF name="virtualshelves" -->
- <!-- TMPL_IF NAME="opacuserlogin" --><!-- TMPL_IF NAME="loggedinusername" -->
- <li><a class="addtoshelf" href="/cgi-bin/koha/opac-addbybiblionumber.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->" onclick="Dopop('opac-addbybiblionumber.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->'); return false;">
- Save to Your Lists
- </a></li>
- <!-- /TMPL_IF --><!-- /TMPL_IF -->
-<!-- /TMPL_IF -->
- <!-- TMPL_IF NAME="opacbookbag" --><li><a class="addtocart" href="#" onclick="addRecord('<!-- TMPL_VAR NAME="biblionumber" -->'); return false;">
- Add to Your Cart
- </a></li><!-- /TMPL_IF -->
-</ul>
-
-<!-- TMPL_IF NAME="AmazonContent" --><!-- TMPL_IF NAME="OPACAmazonSimilarItems" --><!-- TMPL_IF NAME="AMAZON_SIMILAR_PRODUCTS" -->
-<div id="similars">
-<h4>Similar Items</h4>
-<ul>
-<!-- TMPL_LOOP NAME="AMAZON_SIMILAR_PRODUCTS" -->
-<!-- TMPL_LOOP NAME="similar_biblionumbers" -->
-<li><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->"><img alt="" src="http://images.amazon.com/images/P/<!-- TMPL_VAR NAME="ASIN"-->.01._SS50_.jpg" /></a> <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=<!-- TMPL_VAR NAME="biblionumber" -->"><!-- TMPL_VAR NAME="title" ESCAPE="HTML" --></a> </li>
-<!-- /TMPL_LOOP -->
-<!-- /TMPL_LOOP -->
-</ul>
-</div><!-- /TMPL_IF -->
-<!-- /TMPL_IF --><!-- /TMPL_IF -->
-
-<div id="further">
-<h4>Search for this title in:</h4>
-<ul>
-<li><!-- TMPL_IF NAME="OPACURLOpenInNewWindow" --><a href="http://worldcat.org/search?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->" target="_blank">Other Libraries (WorldCat)</a><!-- TMPL_ELSE --><a href="http://worldcat.org/search?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->">Other Libraries (WorldCat)</a><!-- /TMPL_IF --></li>
-<li><!-- TMPL_IF NAME="OPACURLOpenInNewWindow" --><a href="http://www.scholar.google.com/scholar?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->" target="_blank">Other Databases (Google Scholar)</a><!-- TMPL_ELSE --><a href="http://www.scholar.google.com/scholar?q=<!-- TMPL_VAR NAME="title" ESCAPE="url" -->">Other Databases (Google Scholar)</a><!-- /TMPL_IF --></li>
-<li><!-- TMPL_IF NAME="OPACURLOpenInNewWindow" --><a href="http://www.bookfinder.com/search/?author=<!-- TMPL_VAR NAME="author" -->&title=<!-- TMPL_VAR NAME="title" -->&st=xl&ac=qr" target="_blank">Online Stores (Bookfinder.com)</a><!-- TMPL_ELSE --><a href="http://www.bookfinder.com/search/?author=<!-- TMPL_VAR NAME="author" -->&title=<!-- TMPL_VAR NAME="title" -->&st=xl&ac=qr">Online Stores (Bookfinder.com)</a><!-- /TMPL_IF --></li>
-</ul>
-</div>
-
- <div id="export" class="detailtagcell">
- <form method="get" action="/cgi-bin/koha/opac-export.pl">
- <label for="format">Save Record:</label>
- <select name="format" id="format">
- <option value="">-- Choose Format --</option>
- <option value="mods">MODS (XML)</option>
- <option value="dc">Dublin Core (XML)</option>
- <option value="marcxml">MARCXML</option>
- <option value="marc8">MARC (non-Unicode/MARC-8)</option>
- <option value="utf8">MARC (Unicode/UTF-8)</option> </select><input type="hidden" name="op" value="export" /><input type="hidden" name="bib" value="<!-- TMPL_VAR NAME="biblionumber" -->" />
-<input type="submit" name="save" value="Go" /></form>
- </div>
-
-</div>
</div>
</div>
-
-
-</div>
-</div>
-<!-- TMPL_IF NAME="OpacNav" -->
- <div class="yui-b">
- <div class="container">
- <!--TMPL_INCLUDE NAME="navigation.inc" -->
- </div>
- </div>
-<!-- /TMPL_IF -->
</div>
<!-- TMPL_INCLUDE NAME="opac-bottom.inc" -->
diff --git a/koha-tmpl/opac-tmpl/prog/images/menu-arrow.gif b/koha-tmpl/opac-tmpl/prog/images/menu-arrow.gif
new file mode 100644
index 0000000000000000000000000000000000000000..62cf717e7adbe801d45fdc7ef7789ce94b60c7f4
GIT binary patch
literal 54
zcmZ?wbhEHb<YQoCXkcV8PMi7v|9{1wEQ|~cj0`#qKmd|qVB&3&U0JoGeqN8zwaQRN
G25SIvy$$mK
literal 0
HcmV?d00001
--
1.5.5.GIT
More information about the Koha-patches
mailing list