From dac28ba079c28d78a9ead64ce17a1d772993ae0f Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Sat, 8 Aug 2020 13:15:43 +0000 Subject: [PATCH] Bug 26164: Replace OPAC table sort icons with SVG This patch modifies the OAPC CSS to convert table sorting icons from PNG to SVG. These icons are added via background-image data-urls, so only the SCSS file is modified. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface). - Clear your browser cache if necessary - View any DataTable in the OPAC, for instance the table of checkouts under the logged-in user's "your summary" tab. - Confirm that the sorting icons in the table headers look correct in each state: Sorted ascending, sorted descending, and unsorted. Signed-off-by: David Nind --- koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 30 +++++++++++++++++++++ koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 30 --------------------- koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss | 23 ---------------- koha-tmpl/opac-tmpl/bootstrap/images/asc.gif | Bin 250 -> 0 bytes koha-tmpl/opac-tmpl/bootstrap/images/ascdesc.gif | Bin 264 -> 0 bytes koha-tmpl/opac-tmpl/bootstrap/images/desc.gif | Bin 61 -> 0 bytes 6 files changed, 30 insertions(+), 53 deletions(-) delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/images/asc.gif delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/images/ascdesc.gif delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/images/desc.gif diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index ba1404f2a6..9db969da4c 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -280,6 +280,36 @@ textarea, vertical-align: 0; } +.table { + .sorting_asc { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+") no-repeat scroll 100% 80% #E2E8E8; + padding-right: 19px; + } + + .sorting_desc { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=") no-repeat scroll 100% 80% #E2E8E8; + padding-right: 19px; + } + + .sorting { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==") no-repeat scroll 100% 75% #E2E8E8; + padding-right: 19px; + } + + .nosort, + .nosort.sorting_asc, + .nosort.sorting_desc, + .nosort.sorting { + background: #E2E8E8 none; + padding-right: 19px; + } + + th, + td { + line-height: 135%; + } +} + /* jQuery UI standard tabs */ .ui-tabs-nav .ui-tabs-active a, .ui-tabs-nav a:hover, diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index c9964bd049..3f6a38816e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -1978,36 +1978,6 @@ nav { margin: 0 auto; } -.table { - .sorting_asc { - background: url( "../images/asc.gif" ) no-repeat scroll 100% 80% #E2E8E8; - padding-right: 19px; - } - - .sorting_desc { - background: url( "../images/desc.gif" ) no-repeat scroll 100% 80% #E2E8E8; - padding-right: 19px; - } - - .sorting { - background: url( "../images/ascdesc.gif" ) no-repeat scroll 100% 75% #E2E8E8; - padding-right: 19px; - } - - .nosort, - .nosort.sorting_asc, - .nosort.sorting_desc, - .nosort.sorting { - background: #E2E8E8 none; - padding-right: 19px; - } - - th, - td { - line-height: 135%; - } -} - .table-bordered { border-radius: 0; thead:first-child tr:first-child > th { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss index 29a13661e7..f86693fed6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss @@ -32,29 +32,6 @@ a { .table { font-size: .95rem; - - .sorting_asc { - background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE; - padding-right: 19px; - } - - .sorting_desc { - background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE; - padding-right: 19px; - } - - .sorting { - background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE; - padding-right: 19px; - } - - .nosort, - .nosort.sorting_asc, - .nosort.sorting_desc, - .nosort.sorting { - background: #E2E8E8 none; - padding-right: 19px; - } } .table-bordered { diff --git a/koha-tmpl/opac-tmpl/bootstrap/images/asc.gif b/koha-tmpl/opac-tmpl/bootstrap/images/asc.gif deleted file mode 100644 index 3074264e5bba2a137385715233897088a8e1f78c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 250 zcmZ?wbhEHb6lGvxxXQ$kmS#M2W*Wng1&Tje7#SFt7<52B0Qrf5P28cez(a(k>%*!oo25SK8?GWt% -- 2.11.0