From 69360e80600f348450eb79ff75e24391c04de5f6 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 15 Jan 2021 15:41:39 +0000 Subject: [PATCH] Bug 27440: Improve structure and style of result toolbars in the OPAC This patch makes markup and CSS changes to areas of the OPAC classed with "selections-toolbar," an area of controls found at the top of some lists of titles: The cart, search results, search history, lists, and suggestions. To test, apply the patch and rebuild the staff client CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Perform a search in the OPAC. On the search results page, confirm that the various controls work correctly: - With OpacHighlightedWords enabled, hightlight and unhighlight links - Select all and clear all links - Selecting one or more checkboxes should enable the "Select titles to..." menu. - Test that adding items to the cart and lists works correctly. - Test that placing multiple holds work. - Test that tagging multiple items works. - From the search results page, add multiple items to the cart. - Open the cart and confirm that the the controls described above continue to work correctly. - Open the search history page, confirm that the toolbar controls work correctly for all four categories: Current session catalog searches; previous session catalog searches; current session authority searches; previous session authority searches. - On the purchase suggestions page, confirm that "select all" and "clear all" work, and that deleting multiple suggestions from the toolbar link works. - On the list contents page test the same controls: selection, multi-hold, tagging, and "Remove from list." Signed-off-by: Martin Renvoize --- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 87 +++++----- .../opac-tmpl/bootstrap/en/modules/opac-basket.tt | 19 +- .../opac-tmpl/bootstrap/en/modules/opac-results.tt | 192 +++++++++++---------- .../bootstrap/en/modules/opac-search-history.tt | 56 +++--- .../opac-tmpl/bootstrap/en/modules/opac-shelves.tt | 46 +++-- .../bootstrap/en/modules/opac-suggestions.tt | 25 +-- 6 files changed, 210 insertions(+), 215 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index a33ba13211..f0bf7ed4ea 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -427,25 +427,6 @@ th { color: #727272; } -#selections { - color: #727272; - font-weight: bold; -} - -#selections-toolbar { - background: #e2e8e8 none; - border-bottom: none; - margin-top: 3px; -} - -.selections { - font-weight: bold; -} - -.selections-toolbar.toolbar { - background: #e2e8e8 none; -} - .actions-menu { padding-top: 5px; } @@ -486,6 +467,8 @@ th { &.disabled, &[disabled] { color: #333; + filter: alpha(opacity=65); + opacity: 0.65; &:hover { i { @@ -889,7 +872,6 @@ div { display: inline; font-size: 100%; font-weight: bold; - margin-left: .5em; } select { @@ -901,19 +883,6 @@ div { } li { - // display: inline; - // list-style: none; - - // a { - // border-left: 1px solid #E8E8E8; - // } - - // &:first-child { - // a { - // border-left: 0; - // } - // } - &.dropdown-header { display: block; } @@ -930,22 +899,50 @@ div { } } -#selections-toolbar, +.selections { + color: #727272; + font-weight: bold; + + &::before { + color: #6c757d; + content: "|"; + display: inline-block; + font-weight: normal; + padding: 0 .5rem; + text-shadow: 1px 1px 0 #fff; + } +} + +.check_control { + &::before { + color: #6c757d; + content: "|"; + display: inline-block; + font-weight: normal; + padding: 0 .5rem; + text-shadow: 1px 1px 0 #fff; + } +} + .selections-toolbar { - background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% ); + background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%); + border-bottom: none; + margin-top: 3px; + display: flex; margin: 0; padding-left: 10px; padding-top: .5em; + > div:first-child::before { + content: ""; + padding: 0; + } + a, button, input { font-size: .9rem; } - - .btn-sm { - padding: 0.1rem 0.5rem; - } } .list-actions { @@ -1279,13 +1276,12 @@ nav { font-size: 90%; } -.highlight_controls { - float: left; - margin-top: 3px; -} +.links { + flex-grow: 1; -.links a { - font-weight: bold; + a { + font-weight: bold; + } } #tagslist { @@ -1659,6 +1655,7 @@ nav { } #addto { + display: inline-block; max-width: 10em; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt index 90f21e5235..a0f956882e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt @@ -48,12 +48,13 @@ [% END %] -
- Select all - Clear all - | +
+
+ Select all + Clear all +
- Select titles to: + Select titles to: Remove [% IF ( Koha.Preference( 'opacuserlogin' ) == 1 ) %] [% IF ( ( Koha.Preference( 'virtualshelves' ) == 1 ) && loggedinusername ) %] @@ -485,11 +486,11 @@ // Enable/disable controls if checkboxes are checked var checkedBoxes = $(".cb:checked"); if ( checkedBoxes.length ) { - $("#selections").html(_("With selected titles: ")); - $("#selections-toolbar .links a").removeClass("disabled"); + $(".selections").html(_("With selected titles: ")); + $(".selections-toolbar .links a").removeClass("disabled"); } else { - $("#selections").html(_("Select titles to: ")); - $("#selections-toolbar .links a").addClass("disabled"); + $(".selections").html(_("Select titles to: ")); + $(".selections-toolbar .links a").addClass("disabled"); } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt index 26d3db9f8a..446dd7dc5f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -205,40 +205,94 @@ [% END # /UNLESS tag %]
-
+
[% IF ( OpacHighlightedWords ) %]
Unhighlight Highlight
- | [% END %] - - - | - - [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %] - - [% END %] - +
+ + + Select all + + + Clear all + +
- [% IF ( TagsInputEnabled && loggedinusername ) %] - - - - - - [% END %] - -
+
+ [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) || loggedinusername ) %] + Select titles to: + [% END %] + [% IF Koha.Preference( 'opacbookbag' ) == 1 OR Koha.Preference('virtualshelves') %] + + + + + [% END # /IF opacbookbag || virtualshelves %] + + [% IF ( ( Koha.Preference( 'RequestOnOpac' ) == 1 ) && ( Koha.Preference( 'opacuserlogin' ) == 1 ) && DisplayMultiPlaceHold ) %] + + [% END %] + + [% IF ( TagsInputEnabled && loggedinusername ) %] + + + + [% END %] +
+ [% IF ( TagsInputEnabled && loggedinusername ) %] + + + [% END %] +
@@ -714,13 +768,13 @@ function enableCheckboxActions(){ // Enable/disable controls if checkboxes are checked var checkedBoxes = $(".cb:checked"); - var controls = $("#selections-toolbar .links a, #selections-toolbar .links input, #selections-toolbar .links select, #selections-toolbar .links label, #selections-toolbar .links button"); + var controls = $(".selections-toolbar .links a, .selections-toolbar .links input, .selections-toolbar .links select, .selections-toolbar .links label, .selections-toolbar .links button"); if ($(checkedBoxes).size()) { - $("#selections").html(_("With selected titles: ")); - $(controls).removeClass("disabled"); + $(".selections").html(_("With selected titles: ")); + $(controls).removeClass("disabled"); } else { - $("#selections").html(_("Select titles to: ")); - $(controls).addClass("disabled"); + $(".selections").html(_("Select titles to: ")); + $(controls).addClass("disabled"); } } @@ -771,50 +825,6 @@ e.preventDefault(); }); - var param1 = ""; - [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) || loggedinusername ) %] - param1 += ""+_("Select titles to: ")+""; - [% END %] - - [% IF Koha.Preference( 'opacbookbag' ) == 1 OR Koha.Preference('virtualshelves') %] - param1 += ""; - [% END # /IF opacbookbag || virtualshelves %] - $('.resort').change(function() { $('#bookbag_form').submit(); }); @@ -823,17 +833,6 @@ $('#bookbag_form').submit(); }); - $("span.clearall").html(""+_("Clear all")+"<\/a>"); - $("span.checkall").html(""+_("Select all")+"<\/a>"); - - [% IF Koha.Preference( 'opacbookbag' ) == 1 %] - $("span.addto").html(param1); - [% ELSE %] - [% IF ( ( Koha.Preference( 'virtualshelves' ) == 1 ) && loggedinusername ) %] - $("span.addto").html(param1); - [% END %] - [% END %] - [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %] [% IF Koha.Preference( 'virtualshelves' ) == 1 %] $("#addto").on("change",function(){ @@ -893,13 +892,10 @@ enableCheckboxActions(); }); - [% IF ( ( Koha.Preference( 'RequestOnOpac' ) == 1 ) && ( Koha.Preference( 'opacuserlogin' ) == 1 ) && DisplayMultiPlaceHold ) %] - $("#placehold").html(""); - $("#placehold").find("button.hold").click(function(){ - holdMultiple(); - return false; - }); - [% END %] + $(".hold").on("click", function(e){ + e.preventDefault(); + holdMultiple(); + }); [% IF ( query_desc ) %] [% IF ( OpacHighlightedWords ) %] @@ -910,8 +906,14 @@ q_array = q_array.splice(0,-1); } highlightOn(); - $("#highlight_toggle_on" ).hide().click(function() {highlightOn() ;}); - $("#highlight_toggle_off").show().click(function() {highlightOff();}); + $("#highlight_toggle_on" ).hide().click(function(e) { + e.preventDefault(); + highlightOn(); + }); + $("#highlight_toggle_off").show().click(function(e) { + e.preventDefault(); + highlightOff(); + }); [% END # /IF OpacHighlightedWords %] [% IF ( OverDriveEnabled ) %] var $overdrive_results = $( '
' + MSG_SEARCHING.format('OverDrive') + '
' ); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt index df8a53572d..e04b77139f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt @@ -58,15 +58,8 @@ [% IF ( current_biblio_searches ) %]

Current session

-
- Select all - Clear all - | - - Select searches to: - Delete - -
+ + [% INCLUDE 'toolbar_controls' %] @@ -102,15 +95,7 @@ [% IF ( previous_biblio_searches ) %]

Previous sessions

-
- Select all - Clear all - | - - Select searches to: - Delete - -
+ [% INCLUDE 'toolbar_controls' %]
@@ -155,15 +140,7 @@ [% IF ( current_authority_searches ) %]

Current session

-
- Select all - Clear all - | - - Select searches to: - Delete - -
+ [% INCLUDE 'toolbar_controls' %]
@@ -192,15 +169,7 @@ [% IF ( previous_authority_searches ) %]

Previous sessions

-
- Select all - Clear all - | - - Select searches to: - Delete - -
+ [% INCLUDE 'toolbar_controls' %]
@@ -239,6 +208,21 @@ [% INCLUDE 'opac-bottom.inc' %] + +[% BLOCK toolbar_controls %] + [% # Identical controls shown at the top of each table of search history %] +
+
+ Select all + Clear all +
+
+ Select searches to: + Delete +
+
+[% END %] + [% BLOCK jsinclude %] [% INCLUDE 'datatables.inc' %]