Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 25984: Add minimum height and width to shelf browser covers

Browse source 
This patch adds a class to the shelf browser cover image links and a
style for these links defining a minimum height and width. This allows
the browser's default tab focus outline to be visible.

This patch also adds a check for an enabled cover image service before
displaying the cover image links.

This patch introduces whitespace changes so diff accordingly.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Enable the OPACShelfBrowser system preference.
- Enable at least one cover image service (Amazon, Google, Coce, etc).
- Locate a title in the OPAC which has items attached.
- On the bibliographic detail page, click the "Browse shelf" link in the
  table of holdings to display the shelf browser.
- Use the tab key to move the focus to cover images in the shelf
  browser.
- Confirm that the focus outline moves through each cover link whether
  or not there is a cover image available.
- Diable all cover image services.
- Test the shelf browser again and confirm that it's not necessary to
  tap through an empty row.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Owen Leonard 2020-07-13 15:18:23 +00:00 committed by Jonathan Druart
parent d1a7112a90
commit e722dd1725
2 changed files with 48 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
View file

@ -2731,6 +2731,12 @@ button {
font-size: 110%;
font-weight: bold;
text-decoration: none;
&.shelfbrowser_cover {
min-height: 80px;
min-width: 80px;
display: inline-block;
}
}
#browser_previous {

82
koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
View file

@ -28,54 +28,56 @@
[% img_title = item.biblionumber %]
[% END %]
<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% item.itemnumber | uri %]#shelfbrowser">
[% IF ( OPACLocalCoverImages ) %]
<div title="[% img_title | html %]" class="[% item.biblionumber | html %] thumbnail-shelfbrowser" id="local-thumbnail-shelf-[% item.biblionumber | html %]"></div>
[% END %]
[% IF ( OPACAmazonCoverImages ) %]
[% IF ( item.browser_normalized_isbn ) %]
<img src="https://images-na.ssl-images-amazon.com/images/P/[% item.browser_normalized_isbn | html %].01._AA75_PU_PU-5_.jpg" alt="" />
[% ELSE %]
<span class="no-image">No cover image available</span>
[% IF ( OPACLocalCoverImages || OPACAmazonCoverImages || ( SyndeticsEnabled && SyndeticsCoverImages ) || GoogleJackets || BakerTaylorEnabled || ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) || ( Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') ) ) %]
<a class="shelfbrowser_cover" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber | uri %]&amp;shelfbrowse_itemnumber=[% item.itemnumber | uri %]#shelfbrowser">
[% IF ( OPACLocalCoverImages ) %]
<div title="[% img_title | html %]" class="[% item.biblionumber | html %] thumbnail-shelfbrowser" id="local-thumbnail-shelf-[% item.biblionumber | html %]"></div>
[% END %]
[% END %]
[% IF ( SyndeticsEnabled ) %]
[% IF ( SyndeticsCoverImages ) %]
[% IF ( content_identifier_exists ) %]
<img src="https://secure.syndetics.com/index.aspx?isbn=[% item.browser_normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %][% IF ( item.browser_normalized_upc ) %]&amp;upc=[% item.browser_normalized_upc | html %][% END %][% IF ( item.browser_normalized_oclc ) %]&amp;oclc=[% item.browser_normalized_oclc | html %][% END %]&amp;type=xw10" alt="" />
[% IF ( OPACAmazonCoverImages ) %]
[% IF ( item.browser_normalized_isbn ) %]
<img src="https://images-na.ssl-images-amazon.com/images/P/[% item.browser_normalized_isbn | html %].01._AA75_PU_PU-5_.jpg" alt="" />
[% ELSE %]
<span class="no-image">No cover image available</span>
[% END %]
[% END %]
[% END %]
[% IF ( GoogleJackets ) %]
[% IF ( item.browser_normalized_isbn ) %]
<div title="[% img_title | html %]" class="[% item.browser_normalized_isbn | html %]" id="gbs-thumbnail-preview[% loop.count | html %]"></div>
[% ELSE %]
<span class="no-image">No cover image available</span>
[% IF ( SyndeticsEnabled ) %]
[% IF ( SyndeticsCoverImages ) %]
[% IF ( content_identifier_exists ) %]
<img src="https://secure.syndetics.com/index.aspx?isbn=[% item.browser_normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %][% IF ( item.browser_normalized_upc ) %]&amp;upc=[% item.browser_normalized_upc | html %][% END %][% IF ( item.browser_normalized_oclc ) %]&amp;oclc=[% item.browser_normalized_oclc | html %][% END %]&amp;type=xw10" alt="" />
[% ELSE %]
<span class="no-image">No cover image available</span>
[% END %]
[% END %]
[% END %]
[% END %]
[% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]
[% coce_id = item.browser_normalized_ean || item.browser_normalized_isbn | html %]
<div title="[% img_title | html %]" class="[% coce_id | html %]" id="coce-thumbnail-preview-[% coce_id | html %]"></div>
[% END %]
[% IF ( BakerTaylorEnabled ) %]
[% bt_id = ( item.browser_normalized_upc || item.browser_normalized_isbn ) | html %]
[% IF ( bt_id ) %]
<img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" />
[% ELSE %]
<span class="no-image">No cover image available</span>
[% END %]
[% END %]
[% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
<span class="custom_cover_image">
<img alt="Cover image" src="[% item.biblio_object.custom_cover_image_url | url %]" />
</span>
[% END %]
</a>
[% IF ( GoogleJackets ) %]
[% IF ( item.browser_normalized_isbn ) %]
<div title="[% img_title | html %]" class="[% item.browser_normalized_isbn | html %]" id="gbs-thumbnail-preview[% loop.count | html %]"></div>
[% ELSE %]
<span class="no-image">No cover image available</span>
[% END %]
[% END %]
[% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]
[% coce_id = item.browser_normalized_ean || item.browser_normalized_isbn | html %]
<div title="[% img_title | html %]" class="[% coce_id | html %]" id="coce-thumbnail-preview-[% coce_id | html %]"></div>
[% END %]
[% IF ( BakerTaylorEnabled ) %]
[% bt_id = ( item.browser_normalized_upc || item.browser_normalized_isbn ) | html %]
[% IF ( bt_id ) %]
<img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" />
[% ELSE %]
<span class="no-image">No cover image available</span>
[% END %]
[% END %]
[% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
<span class="custom_cover_image">
<img alt="Cover image" src="[% item.biblio_object.custom_cover_image_url | url %]" />
</span>
[% END %]
</a>
[% END %]
</td>
[% END %]
<td class="nav-cell" rowspan="2">