From a6117a187df2d03bf6d7b4557ce3fe2e7fe8f2b6 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 25 Oct 2019 18:41:34 +0000 Subject: [PATCH] Bug 23903: Replace OPAC icons with Font Awesome This patch replaces CSS-based background image icons with Font Awesome icons. This will eliminate the use of sprite.png altogether. To test, apply the patch and regenerate the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). Because JavaScript events are often triggered by class, the changes made in this patch require testing of JavaScript-driven behavior as well as visual confirmation of the changes. Enable OPAC features to expose them for testing: Login, Holds, Article requests, Tags, Cart, Search term highlighting. - Perform a search in the OPAC - In the header at the top of the search results, check the 'Unhighlight/Highlight' link. - Select some search results and verify that the multi-item controls are enabled: Add to cart/Lists; Place hold; Tag. Check that these controls work correctly. - Verify that the following links look correct and work correctly: 'Place hold,' 'Request article,' 'Log in to add tags,' 'Add to cart.' - Log in to the OPAC and return to the search results page. Check the 'Add tag' and 'Save to lists' links. - View the lists page - Test the 'Edit' and 'Delete' controls. - View the contents of a list. Test the following: - Controls at the top of the table of results ('New list,' 'Download list,' 'Send list,' 'Print list,' 'Edit list,' and 'Delete list'). - Multi-selection operations: 'Place hold,' 'Tag,' and 'Remove from list.' - Controls for each item on the list: 'Place hold,' 'Add tag,' 'Save to another list,' 'Remove from this list,' and 'Add to cart.' - View the bibliographic detail page for any search result - In the right-hand sidebar menu, verify that these controls look correct and work correctly: 'Place hold,' 'Print,' 'Request article,' 'Save to your lists,' 'Add to your cart,' 'Unhighlight,' 'Send to device,' 'Save record,' and 'More searches.' - Test the shelf browser by clicking 'Browse shelf' under the call number for any of the holdings. - Test the 'Next' and 'Previous' controls. - Check the tabs for switching between 'Normal,' 'MARC,' and 'ISBD' views and verify that they look correct on each of those pages. - Add some items to the Cart and open the Cart - Test the cart controls at the top: 'More details/Brief display,' 'Send,' 'Download,' 'Empty and close,' 'Hide window,' 'Print.' - Test the multiple-selection controls: 'Remove,' 'Add to list,' 'Place hold,' and 'Tag.' - Log in to the OPAC as a user who has items checked out which can be renewed. On the 'Your summary' page, on the 'Checked out' tab, test the 'Renew selected' and 'Renew all' links. Signed-off-by: Liz Rea Signed-off-by: Martin Renvoize --- .../opac-tmpl/bootstrap/css/src/opac.scss | 617 +++++------------- .../bootstrap/en/includes/opac-bottom.inc | 2 +- .../en/includes/opac-detail-sidebar.inc | 28 +- .../bootstrap/en/includes/shelfbrowser.inc | 8 +- .../bootstrap/en/modules/opac-ISBDdetail.tt | 4 +- .../bootstrap/en/modules/opac-MARCdetail.tt | 8 +- .../bootstrap/en/modules/opac-basket.tt | 26 +- .../bootstrap/en/modules/opac-detail.tt | 11 +- .../bootstrap/en/modules/opac-results.tt | 36 +- .../bootstrap/en/modules/opac-shelves.tt | 46 +- .../bootstrap/en/modules/opac-user.tt | 2 +- .../opac-tmpl/bootstrap/images/sprite.png | Bin 8286 -> 0 bytes koha-tmpl/opac-tmpl/bootstrap/js/basket.js | 12 +- misc/interface_customization/opac-sprite.psd | Bin 76110 -> 0 bytes 14 files changed, 266 insertions(+), 534 deletions(-) delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/images/sprite.png delete mode 100644 misc/interface_customization/opac-sprite.psd diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 02ad5d701f..b9d70b13f4 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -71,15 +71,10 @@ a { font-weight: bold; } - &.btn { - &:visited { - color: #333; - } - } - - &.btn-primary { - &:visited { - color: #FFF; + &.btn-link { + &:focus, + &:hover { + text-decoration: none; } } @@ -92,20 +87,6 @@ a { } } - &.listmenulink { - &:link, - &:visited { - color: #0076B2; - font-weight: bold; - } - - &:hover, - &:active { - color: #FFF; - font-weight: bold; - } - } - .idreambooksrating { color: #29ADE4; font-size: 30px; @@ -125,149 +106,45 @@ a { vertical-align: middle; } - &.addtocart { - @extend %initial_icon; - background-position: -5px -262px; /* Cart */ - padding-left: 35px; - } - - &.addtoshelf { - @extend %initial_icon; - background-position: -5px -222px; /* Virtual shelf */ - padding-left: 35px; - } - &.brief { - @extend %initial_icon; - background-position: -2px -868px; /* Zoom out */ - padding-left: 27px; - } - - - &.detail { - @extend %initial_icon; - background-position: -2px -898px; /* Zoom in */ padding-left: 27px; } - &.download { - @extend %initial_icon; - background-position: -5px -348px; /* Download */ - padding-left: 20px; + &.addtocart { + padding-right: 0; } - &.editshelf { - @extend %initial_icon; - background-position: 2px -348px; /* List edit */ - padding-left: 26px; - } + &.cartRemove { + color: #900; + font-size: 90%; + padding-left: 0; - &.empty { - @extend %initial_icon; - background-position: 2px -598px; /* Trash */ - padding-left: 30px; + &:hover { + color: #c60000; + } } - &.hide { - @extend %initial_icon; - background-position: -3px -814px; /* Close */ - padding-left: 26px; - } &.highlight_toggle { - @extend %initial_icon; - background-position: -5px -836px; /* Highlight */ display: none; - padding-left: 35px; - } - - &.hold { - @extend %initial_icon; - background-position: -2px -453px; /* Toolbar place hold */ - padding-left: 23px; - - &.disabled { - @extend %initial_icon; - background-position: -5px -621px; /* Place hold disabled */ - } } &.incart { - @extend %initial_icon; - background-position: -5px -265px; /* Cart */ color: #666; - padding-left: 35px; - } - - &.new { - @extend %initial_icon; - background-position: -4px -922px; - padding-left: 23px; - } - - &.print-small { - @extend %initial_icon; - background-position: 0 -423px; /* Toolbar print */ - padding-left: 30px; - } - - &.print-large { - @extend %initial_icon; - background-position: 0 -187px; /* Toolbar print */ - padding-left: 35px; } - &.removeitems { - @extend %initial_icon; - background-position: 2px -690px; /* Delete */ - padding-left: 25px; + &.remove { + &:hover { + color: #900; - &.disabled { - @extend %initial_icon; - background-position: 2px -712px; /* Delete disabled */ + i { + .fa { + color: #c60000 + } + } } } - - &.reserve { - @extend %initial_icon; - background-position: -6px -141px; /* Place hold */ - padding-left: 35px; - } - - &.article_request { - @extend %initial_icon; - background-position: 0 -24px; /* Place article request */ - padding-left: 35px; - } - - &.send { - @extend %initial_icon; - background-position: 2px -386px; /* Email */ - padding-left: 28px; - } - - &.sharelist { - @extend %initial_icon; - background-position: 2px -1148px; /* List share */ - padding-left: 26px; - } - - &.tag_add { - @extend %initial_icon; - background-position: 3px -1111px; /* Tag results */ - padding-left: 27px; - } - - &.removefromlist { - @extend %initial_icon; - } - - &.show_qrcode { - @extend %initial_icon; - background-position: 0 -1164px; /* QR Code */ - padding-left: 35px; - } } h1 { @@ -373,10 +250,6 @@ td { .btn { white-space: nowrap; } - - .btn-link { - padding: 0; - } } th { @@ -639,51 +512,64 @@ th { background: #e2e8e8 none; } -.actions { - a { - background-repeat: no-repeat; - margin-right: 1em; - text-decoration: none; - white-space: nowrap; +.actions-menu { + padding-top: 5px; +} - &.hold { - background-image: url( "../images/sprite.png" ); /* Place hold small */ - background-position: -5px -539px; - padding-left: 21px; - } +.view, +.actions, +.toolbar, +#action { + a, + button { - &.article_request { - background-image: url( "../images/sprite.png" ); /* Place hold small */ - background-position: -2px -26px; - padding-left: 21px; + &:hover { + i { + &.fa { + color: #44AE89; + } + } } - &.addtocart { - background-image: url( "../images/sprite.png" ); /* Cart small */ - background-position: -5px -570px; - padding-left: 20px; + i { + &.fa { + color: #4466AE; + } } - &.addtoshelf { - background-image: url( "../images/sprite.png" ); /* MARC view */ - background-position: -5px -24px; - padding-left: 20px; - } + &.remove { + &:hover { + color: #900; - &.addtolist { - background-position: -5px -27px; - padding-left: 20px; + i { + &.fa { + color: #c60000; + } + } + } } - &.tag_add { - background-position: -5px -1110px; - padding-left: 20px; + &.disabled, + &[disabled] { + color: #333; + + &:hover { + i { + &.fa { + color: #333; + filter: alpha(opacity=65); + opacity: 0.65; + } + } + } } + } +} - /* List contents remove from list link */ - &.removefromlist { - background-position: -8px -690px; /* Delete */ - padding-left: 15px; +.actions { + &:first-child { + .btn-link { + padding-left: 0; } } } @@ -729,13 +615,31 @@ th { } .buttons-print { - @extend %initial_icon; background-color: transparent; - background-position: 0 -184px; /* Toolbar print */ border: 0; - color: #0076B2; - font-size: 100%; - padding-left: 35px; + color: #0088cc; + display: inline-block; + font-size: 14px; + line-height: 20px; + padding: 4px 12px; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + + &:hover { + color: #005580; + &::before { + color: #44AE89; + } + } + + &::before { + color: #4466AE; + content: "\f02f"; + font-family: FontAwesome; + display: inline-block; + padding-right: .5em; + } } .form-inline { @@ -1436,13 +1340,6 @@ div { width: auto; } - .hold, - #tagsel_tag { - font-size: 97%; - font-weight: bold; - padding-left: 28px; - } - #tagsel_form { margin-top: .5em; } @@ -1485,96 +1382,6 @@ div { display: inline; } -%tag_button_default { - background-color: transparent; - background-image: url( "../images/sprite.png" ); - background-position: 1px -643px; - background-repeat: no-repeat; - border: 0; - color: #0076B2; - cursor: pointer; - font-size: 100%; - padding-left: 25px; - text-decoration: none; -} - -%tag_button_hover { - color: #005580; - text-decoration: underline; -} - -%tag_button_disabled { - color: #888888; - padding-left: 23px; - text-decoration: none; -} - -#tagsel_tag { - @extend %tag_button_default; - - &.disabled { - background-position: -1px -667px; - } -} - -#selections-toolbar { - input.hold { - &:hover { - @extend %tag_button_hover; - } - - &.disabled { - @extend %tag_button_disabled; - - &:hover { - @extend %tag_button_disabled; - } - } - } - - a.disabled { - @extend %tag_button_disabled; - - &:hover { - @extend %tag_button_disabled; - } - } -} - -#tagsel_span input { - &.submit { - @extend %tag_button_default; - } - - &:hover { - @extend %tag_button_hover; - } - - &.disabled { - @extend %tag_button_disabled; - - &:hover { - @extend %tag_button_disabled; - } - } - - &.hold.disabled { - @extend %tag_button_disabled; - - &:hover { - @extend %tag_button_disabled; - } - } -} - -.selections-toolbar a.disabled { - @extend %tag_button_disabled; - - &:hover { - @extend %tag_button_disabled; - } -} - .results_summary { color: #707070; display: block; @@ -1613,17 +1420,19 @@ div { border-radius: 4px; color: #727272; display: inline-block; - padding: .2em .5em; - white-space: nowrap; + margin-right: .4em; a, span { - background-image: url( "../images/sprite.png" ); - background-repeat: no-repeat; font-size: 87%; font-weight: normal; - padding-left: 15px; - text-decoration: none; + display: inline-block; + padding: 4px 12px; + margin-bottom: 0; + font-size: 14px; + line-height: 20px; + text-align: center; + vertical-align: middle; } } @@ -1638,18 +1447,6 @@ div { font-weight: bold; } -#MARCview { - background-position: -9px -28px; -} - -#ISBDview { - background-position: -10px -56px; -} - -#Normalview { - background-position: -8px 1px; -} - #Fullhistory, #Briefhistory { background: transparent none; @@ -1852,12 +1649,12 @@ div { background-color: #F0F3F3; border: 1px solid #E8E8E8; margin: .5em 0 0 0; - padding-bottom: 3px; + padding: .5em; li { list-style: none; margin: .2em; - padding: .3em 0; + padding: .2em 0; } a { @@ -1882,94 +1679,30 @@ div { } } -#format, -#furthersearches { - padding-left: 35px; -} - .highlight_controls { float: left; -} - -%initial_icon { - background-image: url( "../images/sprite.png" ); - background-repeat: no-repeat; - text-decoration: none; + margin-top: 3px; } input { &.hold { - @extend %initial_icon; - background-color: transparent; - background-position: -2px -453px; /* Toolbar place hold */ - border: 0; - color: #0076B2; - font-weight: bold; - padding-left: 23px; - text-decoration: none; &.disabled { - @extend %initial_icon; - background-position: -5px -621px; /* Place hold disabled */ + } } &.editshelf { - @extend %initial_icon; - background-color: transparent; - background-position: 2px -734px; /* List edit */ - border: 0; - color: #006699; - cursor: pointer; - filter: none; - font-size: 100%; - padding-left: 29px; - text-decoration: none; &:active { - border: 0; + } } } .newshelf { - @extend %initial_icon; - background-position: 2px -761px; /* List new */ - border: 0; - color: #006699; - cursor: pointer; - filter: none; - font-size: 100%; - padding-left: 28px; - - &.disabled { - @extend %initial_icon; - background-position: -4px -791px; /* List new disabled */ - } -} - -.deleteshelf { - @extend %initial_icon; - background-color: transparent; - background-position: 2px -687px; /* Delete */ - border: 0; - color: #006699; - cursor: pointer; - filter: none; - font-size: 100%; - padding-left: 25px; - text-decoration: none; - - &:active { - border: 0; - } - - &:hover { - color: #990033; - } &.disabled { - background-position: 0 -712px; /* Delete */ } } @@ -1981,14 +1714,6 @@ input { display: inline; } -#login4tags { - background-image: url( "../images/sprite.png" ); /* Tag results disabled */ - background-position: -6px -1130px; - background-repeat: no-repeat; - padding-left: 20px; - text-decoration: none; -} - .tag_results_input { font-size: 12px; margin-left: 1em; @@ -2150,25 +1875,12 @@ input { #renewcontrols { float: right; font-size: 66%; - - a { - background-repeat: no-repeat; - padding: .1em .4em; - padding-left: 18px; - text-decoration: none; - } -} - -#renewselected_link { - background-image: url( "../images/sprite.png" ); - background-position: -5px -986px; - background-repeat: no-repeat; } #renewall_link { - background-image: url( "../images/sprite.png" ); - background-position: -8px -967px; - background-repeat: no-repeat; + i:first-child { + left: 5px; + } } .authref { @@ -2391,15 +2103,6 @@ input { } /* Search results add to cart (lists disabled) */ -.addto { - .addtocart { - background-image: url( "../images/sprite.png" ); /* Cart */ - background-position: -5px -266px; - background-repeat: no-repeat; - padding-left: 33px; - text-decoration: none; - } -} .searchresults { p { @@ -2411,17 +2114,6 @@ input { } } - a { - &.highlight_toggle { - background-image: url( "../images/sprite.png" ); /* Highlight */ - background-position: -11px -837px; - background-repeat: no-repeat; - display: none; - font-weight: normal; - padding: 0 10px 0 21px; - } - } - .commentline { @include border-radius-all( 3px ); @include shadowed; @@ -2566,7 +2258,7 @@ input { } .close:hover { - color: #538200; + color: #005580; filter: inherit; font-size: inherit; opacity: inherit; @@ -2596,11 +2288,55 @@ input { } } -button.closebtn { - background: transparent; - border: 0; - cursor: pointer; - padding: 0; +button { + &.btn-link { + &:focus, + &:hover { + text-decoration: none; + } + } + + &.closebtn { + background: transparent; + border: 0; + cursor: pointer; + padding: 0; + } + + &.remove { + &:hover { + color: #900; + + i { + &.fa { + color: #c60000; + } + } + } + } +} + +.btn-link { + &.btn-lg { + font-size: 100%; + } +} + +.btn.disabled, +.btn[disabled] { + &:hover { + color: #333; + filter: alpha(opacity=65); + opacity: 0.65; + } + i { + &.fa, + &.fa:hover { + color: #333; + filter: alpha(opacity=65); + opacity: 0.65; + } + } } .modal { @@ -2772,6 +2508,7 @@ button.closebtn { .floating { box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 ); margin-top: 0; + z-index: 5; } .tdlabel { @@ -2919,6 +2656,12 @@ button.closebtn { th { padding: 3px 5px; width: 20%; + + &.nav-cell { + padding: 0; + vertical-align: middle; + width: 1em; + } } a { @@ -2928,30 +2671,26 @@ button.closebtn { text-decoration: none; } - #browser_next, #browser_previous { - background-image: url( "../images/sprite.png" ); - background-repeat: no-repeat; - width: 16px; - a { - cursor: pointer; - display: block; - height: 0 !important; - margin: 0; - overflow: hidden; - padding: 50px 0 0; - text-decoration: none; - width: 16px; - } - } + transform: rotate(-90deg); + white-space: nowrap; - #browser_previous { - background-position: -9px -1007px; + i { + padding: 0 .5em; + } + } } #browser_next { - background-position: -9px -1057px; + a { + transform: rotate(90deg); + white-space: nowrap; + + i { + padding: 0 .5em; + } + } } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc index 14dcfe7e2b..1705cee2de 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc @@ -159,7 +159,7 @@ $.widget.bridge('uitooltip', $.ui.tooltip); var MSG_CONFIRM_DEL_BASKET = _("Are you sure you want to empty your cart?"); var MSG_CONFIRM_DEL_RECORDS = _("Are you sure you want to remove the selected items?"); var MSG_ITEM_IN_CART = _("In your cart"); - var MSG_ITEM_NOT_IN_CART = _("Add to your cart"); + var MSG_ITEM_NOT_IN_CART = _("Add to cart"); [% END %] [% IF ( Koha.Preference( 'opacuserlogin' ) == 1 ) && ( Koha.Preference( 'TagsEnabled' ) == 1 ) %] var MSG_TAGS_DISABLED = _("Sorry, tags are not enabled on this system."); diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-detail-sidebar.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-detail-sidebar.inc index 9bb2f2c819..bc4d926c62 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-detail-sidebar.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-detail-sidebar.inc @@ -5,45 +5,45 @@ [% IF Koha.Preference( 'opacuserlogin' ) == 1 %] [% IF Koha.Preference( 'RequestOnOpac' ) == 1 %] [% IF ( ReservableItems ) %] -
  • Place hold
    • +
  • Place hold
    • [% END %] [% END %] [% END %] [% END %] -
  • Print
    • +
  • Print
    • [% IF Koha.Preference( 'opacuserlogin' ) == 1 %] [% IF artreqpossible %] -
  • Request article
    • +
  • Request article
    • [% END %] [% END %] [% IF Koha.Preference( 'virtualshelves' ) == 1 %] [% IF ( ( Koha.Preference( 'opacuserlogin' ) == 1 ) && loggedinusername ) %] -
  • Save to your lists
    • +
  • Save to your lists
    • [% END %] [% END %] [% IF Koha.Preference( 'opacbookbag' ) == 1 %] [% IF ( incart ) %] -
  • In your cart (remove)
    • +
  • In your cart (remove)
    • [% ELSE %] -
  • Add to your cart
    • +
  • Add to your cart
    • [% END %] [% END %] [% IF ( OpacHighlightedWords && query_desc ) %]
  • - Unhighlight - Highlight + Unhighlight + Highlight
    • [% END %] [% IF ( Koha.Preference('OPACDetailQRCode' ) ) %]
  • - Send to device + Send to device
    • [% END %] @@ -53,8 +53,8 @@
  • - Save record -