Attachment 125000 Details for Bug 28537 – Bug 28537: Improve HTML generated by OverDrive integration

[patch] Bug 28537: Improve HTML generated by OverDrive integration

Bug-28537-Improve-HTML-generated-by-OverDrive-inte.patch (text/plain), 11.11 KB, created by Owen Leonard on 2021-09-17 15:40:53 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2021-09-17 15:40:53 UTC

Size: 11.11 KB

patch

obsolete

>From cf529f5ed7d99541634cad8ea474902c40fb9c41 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>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         |  1 +
> koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js | 80 ++++++++++---------
> 4 files changed, 72 insertions(+), 37 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' %]
> <title>OverDrive search for '[% q | html %]' &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
> [% INCLUDE 'doc-head-close.inc' %]
>+[% Asset.css("css/overdrive.css") | $raw %]
> [% BLOCK cssinclude %]
> [% END %]
> </head>
>@@ -157,7 +158,7 @@
>                     results.push( '<td>' );
>                     if ( prod.images.thumbnail ) {
>                         results.push( '<a href="', prod.contentDetails[0].href, '">' );
>-                        results.push( '<img class="thumbnail" src="', prod.images.thumbnail.href, '" />' );
>+                        results.push( '<img class="overdrive-thumbnail thumbnail" src="', prod.images.thumbnail.href, '" />' );
>                         results.push( '</a>' );
>                     }
>                     results.push( '</td>' );
>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 7c92ba2f9e..b57692dd1b 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>@@ -14,6 +14,7 @@
> [% INCLUDE 'doc-head-open.inc' %]
> <title>Your library home &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
> [% INCLUDE 'doc-head-close.inc' %]
>+[% Asset.css("css/overdrive.css") | $raw %]
> [% BLOCK cssinclude %][% END %]
> </head>
> [% INCLUDE 'bodytag.inc' bodyid='opac-user' bodyclass='scrollto' %]
>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 = $('<a href="#">')
>+    var login_link = $('<a class="btn btn-primary" href="#">')
>         .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 = $('<a href="https://www.overdrive.com/account/" target="overdrive-account" class="overdrive-link" style="float:right">')
>-            .text( __( "OverDrive account page" ) );
>-        $(container).append(overdrive_link);
>+        var button_toolbar = $("<div/>").addClass("btn-toolbar").attr("role","toolbar");
> 
>-        var logout_link = $('<a href="#logout" class="overdrive-logout" style="float:left">')
>-            .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('<br style="clear:both;"/>');
>+        var overdrive_link = $("<div/>").addClass("btn-group mr-2").attr("role", "group")
>+            .append( $('<a href="https://www.overdrive.com/account/" target="overdrive-account" class="btn btn-sm btn-primary overdrive-link">')
>+                .text( __( "OverDrive account page" ) ) );
>+        button_toolbar.append(overdrive_link);
>+
>+        var logout_link = $("<div/>").addClass("btn-group mr-2").attr("role", "group")
>+            .append( $('<a href="#logout" class="btn btn-sm btn-primary overdrive-logout">')
>+                .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 = $('<div class="overdrive-div">').html('<h3>' + __("Checkouts") + '</h3>');
>-            var checkouts_list = $('<ul class="overdrive-list">');
>+            var checkouts_list = $('<div class="overdrive-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 = $('<div class="overdrive-div">').html('<h3>' + __("Holds") + '</h3>');
>-            var holds_list = $('<ul class="overdrive-list">');
>+            var holds_list = $('<div class="overdrive-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 = $('<li class="overdrive-item">');
>+        var line = $('<div class="overdrive-item">');
>+        var image_container = $('<div class="overdrive-item-thumbnail">');
>         if (item.images) {
>             var thumb_url = item.images.thumbnail;
>             if (thumb_url) {
>-                $('<img class="overdrive-item-thumbnail">')
>+                $('<img class="overdrive-thumbnail">')
>                     .attr("src", thumb_url)
>-                    .appendTo(line);
>+                    .appendTo( image_container );
>             }
>         }
>-        $('<div class="overdrive-item-title">')
>-            .text(item.title)
>-            .appendTo(line);
>-        $('<div class="overdrive-item-subtitle">')
>-            .html(item.subtitle)
>+        image_container.appendTo( line );
>+        var item_details = $('<div class="overdrive-item-details">')
>+            .append(
>+                $('<h4 class="overdrive-item-title">')
>+                    .text(item.title) )
>+            .append( $('<div class="overdrive-item-author">')
>+                .text(item.author) )
>+            .append(
>+                $('<div class="overdrive-item-subtitle">')
>+                    .html(item.subtitle) )
>             .appendTo(line);
>-        $('<div class="overdrive-item-author">')
>-            .text(item.author)
>-            .appendTo(line);
>-        var actions = $('<span class="actions">');
>+        var actions = $('<div class="actions">');
>         display_actions(actions, item.id);
>-        $('<div id="action_'+item.id+'" class="actions-menu">')
>-            .append(actions)
>+        item_details.append( $('<div id="action_' + item.id + '" class="actions-menu">')
>+            .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);
>-                $('<span class="overdrive-item-status">')
>+                $('<div class="overdrive-item-status">')
>                     .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) {
>-                $('<span class="overdrive-status">')
>-                    .text( __("On hold") )
>+                $('<span class="overdrive-item-status">')
>+                    .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

Actions: View | Diff | Splinter Review

Attachments on bug 28537: 121748 | 125000 | 125001 | 126324 | 126325 | 126969 | 126970