[Koha-patches] [PATCH] Change to layout of opac-detail. 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 elimina

Ryan Higgins ryan.higgins at liblime.com
Sat Nov 1 19:44:13 CET 2008


A couple of comments on this patch:

  * I like the More searches pop-up menu.  Is there some visual means of
distinguishing
    this sort of popup menu from a link to a new page ?  I'm much more
likely as a user
    to click on something that I know doesn't take me to a new page and lose
my current context.

  * This doesn't remove the opac-nav for me.  Does it require another patch
to do so ?
     I also don't like the idea of having the opac-nav disappear in some
pages.  I'm a big
     fan of the 'habitability' tenet.  While I can't see the effect that you
describe in the commit
     message on my test, I wonder if we can add a 'collapse' button to the
opac-nav div.  In most
     pages, it would be fully visible by default, but in cases like this, it
would be hidden ( leaving a
     clickable 'show' link at the top ).  the opac-nav would thus always be
collapsable (sliding off to
     the left ).  This would allow the behavior to be consistent throughout
and open up the detail
     page for the needed space.


Ryan


On Fri, Oct 31, 2008 at 2:52 PM, Owen Leonard <oleonard at myacpl.org> wrote:

> ---
>  koha-tmpl/opac-tmpl/prog/en/css/opac.css           |   58 ++++---
>  .../opac-tmpl/prog/en/modules/opac-detail.tmpl     |  169
> ++++++++++++--------
>  2 files changed, 134 insertions(+), 93 deletions(-)
>
> diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
> b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
> index 381c453..c232f71 100644
> --- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
> +++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
> @@ -422,6 +422,10 @@ a .term {
>        background-image:url(../../images/print.gif);
>  }
>
> +#action a#furthersearches {
> +       background-image:url(../../images/search.gif);
> +}
> +
>  #toolbar a.brief {
>        background-image: url(../../images/brief.gif);
>  }
> @@ -1327,7 +1331,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 +1363,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;
> @@ -1732,4 +1716,32 @@ table#items th {
>  }
>  #action {
>        margin-top: 0;
> +}
> +#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;
>  }
> \ No newline at end of file
> 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 e2709f2..76d5b45 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">
> @@ -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" -->&amp;title=<!-- TMPL_VAR NAME="title"
> -->&amp;st=xl&amp;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"
> -->&amp;title=<!-- TMPL_VAR NAME="title" -->&amp;st=xl&amp;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" -->
> &copy;<!-- 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,75 +612,6 @@
>
>  </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"
> -->&amp;title=<!-- TMPL_VAR NAME="title" -->&amp;st=xl&amp;ac=qr"
> target="_blank">Online Stores (Bookfinder.com)</a><!-- TMPL_ELSE --><a
> href="http://www.bookfinder.com/search/?author=<!-- TMPL_VAR NAME="author"
> -->&amp;title=<!-- TMPL_VAR NAME="title" -->&amp;st=xl&amp;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>
> --
> 1.5.5.GIT
>
> _______________________________________________
> Koha-patches mailing list
> Koha-patches at lists.koha.org
> http://lists.koha.org/mailman/listinfo/koha-patches
>



-- 
Ryan Higgins

LibLime  *  Open-Source Solutions for Libraries
Featuring KohaZOOM ILS
888-564-2457  x704
-------------- next part --------------
An HTML attachment was scrubbed...
URL: </pipermail/koha-patches/attachments/20081101/f3d079ae/attachment-0002.htm>


More information about the Koha-patches mailing list