@@ -, +, @@
- 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;
+ }
+}
--