From 2619444aa17ec37bdd981fff018fb482e21e4cbf Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 5 Sep 2018 12:38:33 +0000 Subject: [PATCH] Bug 21304: (follow-up) Fix style of search results browser This follow-up revises the style of the search result browser in the staff client, making it behave better at smaller browser widths. The patch also makes a couple of ESLint-prompted changes to browser.js To test, apply the patch and regenerate CSS. - Perform a catalog search in the staff client. - Click on one of the search results. - On the bibliographic detail page there should be results browsing controls in the left-hand sidebar. - Resize the browser window and confirm that the controls work well at various sizes. - Test with both the first and last search result. Signed-off-by: Liz Rea Signed-off-by: Katrin Fischer Signed-off-by: Katrin Fischer --- koha-tmpl/intranet-tmpl/js/browser.js | 6 +- .../intranet-tmpl/prog/css/src/staff-global.scss | 78 ++++++++++++++-------- .../prog/en/modules/catalogue/results.tt | 2 +- 3 files changed, 57 insertions(+), 29 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/js/browser.js b/koha-tmpl/intranet-tmpl/js/browser.js index 173eaa063c..e706833ccc 100644 --- a/koha-tmpl/intranet-tmpl/js/browser.js +++ b/koha-tmpl/intranet-tmpl/js/browser.js @@ -1,3 +1,5 @@ +/* global BROWSER_PREVIOUS BROWSER_NEXT BROWSER_RETURN_TO_SEARCH */ + if ( KOHA === undefined ) var KOHA = {}; KOHA.browser = function (searchid, biblionumber) { @@ -70,7 +72,7 @@ KOHA.browser = function (searchid, biblionumber) { if ( ev.which == 2 || ev.which == 1 && ev.ctrlKey ) { // Middle click or ctrl + click ev.preventDefault(); - var newwindow = window.open( $(this).attr('href') + '&searchid=' + me.searchid, '_blank' ) + var newwindow = window.open( $(this).attr('href') + '&searchid=' + me.searchid, '_blank' ); newwindow.blur(); window.focus(); } else if ( ev.which == 1 ) { @@ -102,7 +104,7 @@ KOHA.browser = function (searchid, biblionumber) { } else { nextbutton = '' + BROWSER_NEXT + ' ยป'; } - $('#menu').before('
' + prevbutton + nextbutton + '
'); + $('#menu').before('
' + prevbutton + nextbutton + '
'); $('a#browse-previous').click(function (ev) { ev.preventDefault(); browseRecords(-1); diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index ee75489616..cb95a8a125 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -3714,16 +3714,26 @@ progress { } #browse-return-to-results { - border-top-left-radius: 3px; - border-top-right-radius: 3px; + background-color: #E8F0F6; + border: 1px solid #B9D8D9; + border-bottom-width: 0; + border-top-left-radius: 5px; + border-top-right-radius: 5px; display: block; + padding: .5em; text-align: center; } .browse-button { + background-color: #FFF; + border: 1px solid #B9D8D9; color: #004D99; - display: inline-block; + display: block; + overflow: hidden; padding: .4em .6em; + text-align: center; + white-space: nowrap; + width: 100%; &:hover { background: #FAFAFA; @@ -3777,34 +3787,13 @@ span { } } -.browse-label, -.browse-prev-next { - border: 1px solid #B9D8D9; -} - -.browse-label { - background-color: #E8F0F6; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} - -.browse-prev-next { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - border-top-width: 0; -} - #browse-previous { - border-bottom-left-radius: 5px; - border-right: 1px solid #B9D8D9; - padding-right: 1em; + border-bottom-width: 0; } #browse-next { border-bottom-right-radius: 5px; - border-top-width: 0; - float: right; - padding-right: 1em; + border-bottom-left-radius: 5px; } .loading-overlay { @@ -4444,6 +4433,24 @@ span { } } +@media only screen and ( max-width: 768px ) { + .browse-button { + display: inline-block; + width: 50%; + } + + #browse-previous { + border-bottom-left-radius: 5px; + border-bottom-width: 1px; + border-right-width: 0; + } + + #browse-next { + border-bottom-left-radius: 0; + border-bottom-right-radius: 5px; + } +} + @media (min-width: 800px) { #helper { i { @@ -4471,3 +4478,22 @@ span { div#makechart ol li { list-style: none; } + +@media only screen and ( min-width: 1200px ) { + .browse-button { + display: inline-block; + width: 50%; + } + + #browse-previous { + border-bottom-left-radius: 5px; + border-bottom-width: 1px; + border-right-width: 0; + } + + #browse-next { + border-bottom-left-radius: 0; + border-bottom-right-radius: 5px; + text-align: right; + } +} diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt index 1cc6193466..506f527db9 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt @@ -627,7 +627,7 @@
-- 2.11.0