From a704bdd1745f8a0c2ce5117e6ed97be2b5e79af6 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 9 Jun 2021 15:43:50 +0000 Subject: [PATCH] Bug 28537: Improve HTML generated by OverDrive integration This patch makes changes to the way HTML is generated when showing output from OverDrive integration: - Buttons have Bootstrap button classes - Layout of information is improved. - Handling of cover image thumbnails is improved, especially in cases where images were much larger than expected. - An OverDrive-specific CSS file is added. To test you must have valid credentials entered in system preferences for the OverDrive API. You should test using a patron who has holds and current checkouts in OverDrive. Apply the patch and log in to the OPAC. - On the "Your summary" page, open the "OverDrive Account" tab. - Log in to your OverDrive account. - The contents of the tab should display well, with item thumbnails showing in a column to the left, and item information showing to the right. - Controls should be styled with standard Bootstrap style. - Confirm that operations work correctly: Acessing titles, checking in, canceling holds, etc. - Perform a catalog search which will return results also found in your OverDrive collection. - Open the OverDrive results page. - The page should display correctly, especially thumbnails. - Confirm that operations work correctly: Checking out and placing holds. --- .../opac-tmpl/bootstrap/css/overdrive.css | 25 ++++++ .../en/modules/opac-overdrive-search.tt | 3 +- .../bootstrap/en/modules/opac-user.tt | 16 +--- koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js | 80 ++++++++++--------- 4 files changed, 73 insertions(+), 51 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/overdrive.css diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/overdrive.css b/koha-tmpl/opac-tmpl/bootstrap/css/overdrive.css new file mode 100644 index 0000000000..ef1abb5b6e --- /dev/null +++ b/koha-tmpl/opac-tmpl/bootstrap/css/overdrive.css @@ -0,0 +1,25 @@ +.overdrive-thumbnail { + max-width: 150px; +} +.overdrive-div { + margin-top: 1em; +} +.overdrive-item { + display: flex; +} +.overdrive-item > div { + padding: 1em; +} +.overdrive-item-status { + color: #727272; + font-size: 90%; + padding: .25rem .5rem +} +.overdrive-item-subtitle { + font-size: 85%; +} +.overdrive-item-author { + padding-bottom: .25em; + margin-bottom: .25em; + border-bottom: 1px solid #EEE; +} diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt index 5342badc09..02fc39f2f5 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt @@ -4,6 +4,7 @@ [% INCLUDE 'doc-head-open.inc' %] OverDrive search for '[% q | html %]' › [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog [% INCLUDE 'doc-head-close.inc' %] +[% Asset.css("css/overdrive.css") | $raw %] [% BLOCK cssinclude %] [% END %] @@ -157,7 +158,7 @@ results.push( '' ); if ( prod.images.thumbnail ) { results.push( '' ); - results.push( '' ); + results.push( '' ); results.push( '' ); } results.push( '' ); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt index 545a64d50d..2b61ed7ee7 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt @@ -15,20 +15,8 @@ [% INCLUDE 'doc-head-open.inc' %] Your library home › [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog [% INCLUDE 'doc-head-close.inc' %] -[% BLOCK cssinclude %] - [% FILTER collapse %] - - [% END %] -[% END %] +[% Asset.css("css/overdrive.css") | $raw %] +[% BLOCK cssinclude %][% END %] [% INCLUDE 'bodytag.inc' bodyid='opac-user' bodyclass='scrollto' %] [% INCLUDE 'masthead.inc' %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js b/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js index 865946c350..8912692235 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js @@ -70,7 +70,7 @@ KOHA.OverDriveCirculation = new function() { error_div.text(error); } - var login_link = $('') + var login_link = $('') .click(function(e) { e.preventDefault(); if( OD_password_required ) { $("#overdrive-login").modal('show'); } @@ -120,24 +120,30 @@ KOHA.OverDriveCirculation = new function() { return; } - var overdrive_link = $('') - .text( __( "OverDrive account page" ) ); - $(container).append(overdrive_link); + var button_toolbar = $("
").addClass("btn-toolbar").attr("role","toolbar"); - var logout_link = $('') - .click(function(e) { - e.preventDefault(); - $(container).empty().append(error_div); - logout(function(data) { - display_account(container, data); - }); - }).text( __("Log out of your OverDrive account") ); - $(container).append(logout_link); - $(container).append('
'); + var overdrive_link = $("
").addClass("btn-group mr-2").attr("role", "group") + .append( $('') + .text( __( "OverDrive account page" ) ) ); + button_toolbar.append(overdrive_link); + + var logout_link = $("
").addClass("btn-group mr-2").attr("role", "group") + .append( $('') + .click(function(e) { + e.preventDefault(); + $(container).empty().append(error_div); + logout(function(data) { + display_account(container, data); + }); + }).text( __("Log out of your OverDrive account") ) ); + + button_toolbar.append(logout_link); + + $(container).append( button_toolbar ); if (data.checkouts) { var checkouts_div = $('
').html('

' + __("Checkouts") + '

'); - var checkouts_list = $('
    '); + var checkouts_list = $('
    '); data.checkouts.items.forEach(function(item) { item_line(checkouts_list, item); }); @@ -147,7 +153,7 @@ KOHA.OverDriveCirculation = new function() { if (data.holds) { var holds_div = $('
    ').html('

    ' + __("Holds") + '

    '); - var holds_list = $('
      '); + var holds_list = $('
      '); data.holds.items.forEach(function(item) { item_line(holds_list, item); }); @@ -157,30 +163,32 @@ KOHA.OverDriveCirculation = new function() { } function item_line(ul_el, item) { - var line = $('
    • '); + var line = $('
      '); + var image_container = $('
      '); if (item.images) { var thumb_url = item.images.thumbnail; if (thumb_url) { - $('') + $('') .attr("src", thumb_url) - .appendTo(line); + .appendTo( image_container ); } } - $('
      ') - .text(item.title) - .appendTo(line); - $('
      ') - .html(item.subtitle) + image_container.appendTo( line ); + var item_details = $('
      ') + .append( + $('

      ') + .text(item.title) ) + .append( $('
      ') + .text(item.author) ) + .append( + $('
      ') + .html(item.subtitle) ) .appendTo(line); - $('
      ') - .text(item.author) - .appendTo(line); - var actions = $(''); + var actions = $('
      '); display_actions(actions, item.id); - $('
      ') - .append(actions) + item_details.append( $('
      ') + .append(actions) ) .appendTo(line); - $(ul_el).append(line); } @@ -278,7 +286,7 @@ KOHA.OverDriveCirculation = new function() { var item = item_is_checked_out(id); if (item) { var expires = new Date(item.expires); - $('') + $('
      ') .text( __( "Checked out until: " ) + " " + expires.toLocaleString()) .appendTo(el); $(el).append(" "); @@ -329,8 +337,8 @@ KOHA.OverDriveCirculation = new function() { item = item_is_on_hold(id); if (item) { - $('') - .text( __("On hold") ) + $('') + .text(__("On hold")) .appendTo(el); $(el).append(" "); } @@ -372,7 +380,7 @@ KOHA.OverDriveCirculation = new function() { } if (item) { - $(el).append( ajax_button( __("Cancel"), function() { + $(el).append( ajax_button( __("Cancel hold"), function() { if( confirm( __("Are you sure you want to cancel this hold?") ) ) { item_action({action: "remove-hold", id: id}, el, copies_available); } @@ -394,7 +402,7 @@ KOHA.OverDriveCirculation = new function() { function decorate_button(button, label) { $(button) - .addClass("btn btn-primary btn-mini") + .addClass("btn btn-primary btn-sm") .css("color","white") .text(label); } -- 2.20.1