@@ -, +, @@
- 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.
- 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
--- a/koha-tmpl/opac-tmpl/bootstrap/css/overdrive.css
+++ a/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;
+}
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
+++ a/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( ' | ' );
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ a/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' %]
--- a/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js
+++ a/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);
- $('