[Bug 7669] New: Search Results Multiple Cover Image HTML & CSS
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Priority: P5 - low Change sponsored?: --- Bug ID: 7669 Assignee: oleonard@myacpl.org Summary: Search Results Multiple Cover Image HTML & CSS QA Contact: koha.sekjal@gmail.com Severity: enhancement Classification: Unclassified OS: All Reporter: ssammons@npelem.com Hardware: All Status: NEW Version: rel_3_6 Component: OPAC Product: Koha Created attachment 8065 --> http://bugs.koha-community.org/bugzilla3/attachment.cgi?id=8065&action=edit Patch of my changes to opac_results.tt and opac.css 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> As per my comments in bug 7594 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 setting in it over-ride user settings. So, it has to stay a 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; } You can also view an image here...http://ww.screencast.com/t/vPwtSYmZa4v I am attaching my patch -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |ASSIGNED Version|rel_3_6 |master Assignee|oleonard@myacpl.org |ssammons@npelem.com -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Liz Rea <wizzyrea@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff CC| |wizzyrea@gmail.com --- Comment #1 from Liz Rea <wizzyrea@gmail.com> --- Changing to needs Signoff. Shane, how best do we go about testing this? -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 --- Comment #2 from Shane Sammons <ssammons@npelem.com> --- If you use the OPAC CSS editing (Home › Administration › System Preferences > OPAC > OPACUserCSS ) section and use the .thumbnail class or the classes I added: .opac_thumb, .amazon_thumb, .google_thumb, .syndetics_thumb, .openlibrary_thumb, .bakertaylor_thumb (for thumbnails) .amazon_no, .google_no, .openlibrary_no, .bakertaylor_no (for no-image) Additionally to save time putting the following in the OPAC CSS editor will give you a setup similar to my screencast: /*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; } Hopefully that explains how to try it? -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Jared Camins-Esakov <jcamins@cpbibliography.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #8065|0 |1 is obsolete| | --- Comment #3 from Jared Camins-Esakov <jcamins@cpbibliography.com> --- Created attachment 8152 --> http://bugs.koha-community.org/bugzilla3/attachment.cgi?id=8152&action=edit Bug 7669: Add CSS classes to OPAC results thumbnails 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> -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Jared Camins-Esakov <jcamins@cpbibliography.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off CC| |jcamins@cpbibliography.com -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Ian Walls <koha.sekjal@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA --- Comment #4 from Ian Walls <koha.sekjal@gmail.com> --- Template only change to opac-results.tt and CSS. Resulting HTML looks much cleaner and easier to work with. Marking as Passed QA. -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Paul Poulain <paul.poulain@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Patch doesn't apply CC| |paul.poulain@biblibre.com --- Comment #5 from Paul Poulain <paul.poulain@biblibre.com> --- sorry but the patch doesn't apply anymore. The .css conflict is easy to solve, but the .tt isn't, so switching to "does not apply". Sorry -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Chris Cormack <chris@bigballofwax.co.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Chris Cormack <chris@bigballofwax.co.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #8152|0 |1 is obsolete| | --- Comment #6 from Chris Cormack <chris@bigballofwax.co.nz> --- Created attachment 14353 --> http://bugs.koha-community.org/bugzilla3/attachment.cgi?id=14353&action=edit Bug 7669: Add CSS classes to OPAC results thumbnails 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> -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Chris Cormack <chris@bigballofwax.co.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |chris@bigballofwax.co.nz --- Comment #7 from Chris Cormack <chris@bigballofwax.co.nz> --- Rebased the patch, it now applies, I have not tested it works, I made some changes to get it to apply so someone other than me needs to sign off. -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Failed QA --- Comment #8 from Owen Leonard <oleonard@myacpl.org> --- I can see that at the very least this patch breaks local cover images on the results page. Unfortunately the amount of changes in the patch make it difficult to debug. I think the relevant changes could be made in a new patch without touching so many lines. -- You are receiving this mail because: You are watching all bug changes.
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=7669 --- Comment #9 from Owen Leonard <oleonard@myacpl.org> --- The local cover images JavaScript tries to pull the biblionumber from the class of the #local-thumbnail <div>. Other classes have been added to that <div>, so the value is getting polluted. -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org