@@ -, +, @@ - 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. --- koha-tmpl/intranet-tmpl/js/browser.js | 6 +- .../intranet-tmpl/prog/css/src/staff-global.scss | 78 ++++++++++++++-------- 2 files changed, 56 insertions(+), 28 deletions(-) --- a/koha-tmpl/intranet-tmpl/js/browser.js +++ a/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); --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -3618,16 +3618,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; @@ -3681,34 +3691,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 { @@ -4197,6 +4186,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 { @@ -4220,3 +4227,22 @@ span { display: 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; + } +} --