Attachment 8152 Details for Bug 7669 – Bug 7669: Add CSS classes to OPAC results thumbnails

[patch] Bug 7669: Add CSS classes to OPAC results thumbnails

Bug-7669-Add-CSS-classes-to-OPAC-results-thumbnail.patch (text/plain), 8.33 KB, created by Jared Camins-Esakov on 2012-03-10 22:49:27 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Jared Camins-Esakov

Created: 2012-03-10 22:49:27 UTC

Size: 8.33 KB

patch

obsolete

>From c57d4a26c66d203c07b94b97c8e75d3019bed801 Mon Sep 17 00:00:00 2001
>From: Shane <shane.sammons@gmail.com>
>Date: Wed, 7 Mar 2012 17:21:06 -0500
>Subject: [PATCH] Bug 7669: Add CSS classes to OPAC results thumbnails
>Content-Type: text/plain; charset="UTF-8"
>
>Looks at the code for the images in the template I notices some were raw
>images, some were encased in <div> tags, and no-images were in <spans>. I added
>classes to the elements to make then more easily modified by the end user
>through the OPAC CSS options.
>
>Also, all images and no-images now have float:left (this was in the .thumbnail
>class). I combines the thumbnail elements into the .no-image{} class. It does
>not have div.no-image like the still active span.no-image, because that is an
>element specific class and thus any settings in it override user settings. So,
>it has to stay simply .no-image.
>
>Images "<img>" now have a class thumbnail_image. This was in keeping with
>consistent and unique element classes. thumbnail is used by all the <div>
>elements.
>
>Here are the new classes I have added, that are vendor/company specific:
>/* New Classes for Thumbnail Images */
>.thumbnail_image { /* specific class for the actual <img> tag */
>}
>
>/* specific classes for thumbnails */
>.opac_thumb, .amazon_thumb, .google_thumb, .syndetics_thumb,
>.openlibrary_thumb, .bakertaylor_thumb{
>}
>
>/* specific classes for no-image */
>.amazon_no, .google_no, .openlibrary_no, .bakertaylor_no{
>}
>
>Example Code to see why:
>/*examples how a specific class works*/
>div.amazon_no{ /*Amazon no image [seem broken in code]*/
>border: 1px solid #FFA500; /*amazon is ornage*/
>}
>.google_thumb, .google_no{/*Google no image*/
>border-top: 2px solid #F00;
>border-right: 2px solid #080;
>border-bottom: 2px solid #FF0;
>border-left: 2px solid #00F;
>padding: 2px;
>}
>.openlibrary_no{
>background: url(http://openlibrary.org/images/logo_IA-sm.png) right center no-repeat;
>color: #00F;
>text-align: left;
>}
>
>Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
>---
> koha-tmpl/opac-tmpl/prog/en/css/opac.css           |   18 ++++++++-
> .../opac-tmpl/prog/en/modules/opac-results.tt      |   41 ++++++++++++++------
> 2 files changed, 45 insertions(+), 14 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
>index 3e4fb00..3f5d36c 100644
>--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
>+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
>@@ -1960,7 +1960,7 @@ table#items th {
> .results_summary img {
> 	margin : 0 5px;
>  }
>-span.no-image {
>+span.no-image{
> 	background-color : #FFF;
> 	border: 1px solid #979797;
> 	color : #AAA;
>@@ -2258,6 +2258,7 @@ a.localimage img {
> 	margin : 0 .5em;
> 	padding : .3em;
> }
>+
> p.patronimage {
> 	border:1px solid #EEE;
> 	border-bottom-color:#000;
>@@ -2268,4 +2269,17 @@ p.patronimage {
> p.patronimage.edit {
> 	border-color:#E8E8E8;
> 	margin: 1em 1em 1em 0;
>-}
>\ No newline at end of file
>+}
>+
>+.no-image{/*make it like the thumbnail class*/
>+	float : left;
>+	margin : 0pt 5px 5px 0pt;
>+	background-color : #FFF;
>+	border: 1px solid #979797;
>+	color : #AAA;
>+	display:block;
>+	font-size : 86%;
>+	font-weight : bold;
>+	text-align : center;
>+	width : 75px;
>+}
>diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt
>index 26a97a4..ffff5df 100644
>--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt
>+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt
>@@ -532,18 +532,35 @@ $(document).ready(function(){
> 				</span>
> 				</td><td>
> 					<a class="p1" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% SEARCH_RESULT.biblionumber %]">
>-            [% IF ( OPACLocalCoverImages ) %]<span title="[% SEARCH_RESULT.biblionumber |url %]" class="[% SEARCH_RESULT.biblionumber %]" id="local-thumbnail[% loop.count %]"></span>[% END %]
>-                    [% IF ( OPACAmazonEnabled ) %][% IF ( OPACAmazonCoverImages ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<img src="http://images.amazon.com/images/P/[% SEARCH_RESULT.normalized_isbn %].01.TZZZZZZZ.jpg" alt="" class="thumbnail" />[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %][% END %]
>-
>-					[% IF ( SyndeticsEnabled ) %][% IF ( SyndeticsCoverImages ) %][% IF ( using_https ) %]
>-                <img src="https://secure.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail" />
>-                [% ELSE %]
>-                <img src="http://www.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail" />[% END %][% END %][% END %]
>-
>-                [% IF ( GoogleJackets ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<div style="block" title="[% SEARCH_RESULT.biblionumber |url %]" class="[% SEARCH_RESULT.normalized_isbn %]" id="gbs-thumbnail[% loop.count %]"></div>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %]
>-		[% IF OpenLibraryCovers %][% IF SEARCH_RESULT.normalized_isbn %]<div style="block" title="[% SEARCH_RESULT.biblionumber %]" class="[% SEARCH_RESULT.normalized_isbn %]" id="openlibrary-thumbnail[% loop.count %]"></div>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %]
>-                </a>
>-                [% IF ( BakerTaylorEnabled ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<a href="https://[% BakerTaylorBookstoreURL |html %][% SEARCH_RESULT.normalized_isbn %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL |html %][% SEARCH_RESULT.normalized_isbn %]" /></a>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %]
>+		[% IF ( OPACLocalCoverImages ) %]
>+					<div title="[% SEARCH_RESULT.biblionumber |url %]" class="thumbnail opac_thumb [% SEARCH_RESULT.biblionumber %]" id="local-thumbnail[% loop.count %]"></div>
>+				[% END %]
>+				[% IF ( OPACAmazonEnabled ) %][% IF ( OPACAmazonCoverImages ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]
>+					<div class="thumbnail amazon_thumb"><img src="http://images.amazon.com/images/P/[% SEARCH_RESULT.normalized_isbn %].01.TZZZZZZZ.jpg" alt="" class="thumbnail_image" /></div>
>+				[% ELSE %]
>+					<div class="no-image amazon_no">No cover image available</div>
>+				[% END %][% END %][% END %]
>+				[% IF ( SyndeticsEnabled ) %][% IF ( SyndeticsCoverImages ) %][% IF ( using_https ) %]
>+					<div class="thumbnail syndetics_thumb"><img src="https://secure.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail_image" />
>+				[% ELSE %]
>+					<div class="thumbnail syndetics_thumb"><img src="http://www.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %]&amp;type=xw10&amp;upc=[% SEARCH_RESULT.normalized_upc %]&amp;oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail_image" />
>+				[% END %][% END %][% END %]
>+				[% IF ( GoogleJackets ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]
>+					<div title="[% SEARCH_RESULT.biblionumber |url %]" class="thumbnail google_thumb [% SEARCH_RESULT.normalized_isbn %]" id="gbs-thumbnail[% loop.count %]"></div>
>+				[% ELSE %]
>+					<div class="no-image google_no">No cover image available</div>
>+				[% END %][% END %]
>+				[% IF OpenLibraryCovers %][% IF SEARCH_RESULT.normalized_isbn %]
>+					<div title="[% SEARCH_RESULT.biblionumber %]" class="thumbnail openlibrary_thumb [% SEARCH_RESULT.normalized_isbn %]" id="openlibrary-thumbnail[% loop.count %]"></div>
>+				[% ELSE %]
>+					<div class="no-image openlibrary_no">No cover image available</div>
>+				[% END %][% END %]
>+					</a>
>+				[% IF ( BakerTaylorEnabled ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]
>+					<div class="thumbnail bakertaylor_thumb"><a href="https://[% BakerTaylorBookstoreURL |html %][% SEARCH_RESULT.normalized_isbn %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL |html %][% SEARCH_RESULT.normalized_isbn %]" /></a></div>
>+				[% ELSE %]
>+					<div class="no-image bakertaylor_no">No cover image available</div>
>+				[% END %][% END %]
> 				</td>
>                 </tr>
>                 [% END %]
>-- 
>1.7.2.5

Actions: View | Diff | Splinter Review

Attachments on bug 7669: 8065 | 8152 | 14353