Koha-community/Koha
15
7
Fork 0
Code Issues Releases Wiki Activity

Bug 21304: (follow-up) Fix style of search results browser

Browse source 
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 <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2018-09-05 12:38:33 +00:00 committed by Nick Clemens
parent 374dbe0248
commit 7236422768
3 changed files with 57 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
koha-tmpl/intranet-tmpl/js/browser.js
View file

@ -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 = '<a href="#" id="browse-next" class="browse-button">' + BROWSER_NEXT + ' »</a>';
}
$('#menu').before('<div class="browse-controls"><div class="browse-controls-inner"><div class="browse-label"><a href="' + searchURL + '" id="browse-return-to-results" class="browse-button searchwithcontext">' + BROWSER_RETURN_TO_SEARCH + '</a></div><div class="browse-prev-next">' + prevbutton + nextbutton + '</div></div></div>');
$('#menu').before('<div class="browse-controls"><div class="browse-controls-inner"><div class="browse-label"><a href="' + searchURL + '" id="browse-return-to-results" class="searchwithcontext">' + BROWSER_RETURN_TO_SEARCH + '</a></div><div class="browse-prev-next">' + prevbutton + nextbutton + '</div></div></div>');
$('a#browse-previous').click(function (ev) {
ev.preventDefault();
browseRecords(-1);

78
koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
View file

@ -3682,16 +3682,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;
@ -3741,34 +3751,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 {
@ -4550,6 +4539,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) {
@ -4580,3 +4587,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;
}
}

2
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt
View file

@ -627,7 +627,7 @@
<div class="col-sm-2 col-sm-pull-10">
<aside>
[% INCLUDE 'admin-menu.inc' %]
[% INCLUDE 'facets.inc' %]
</aside>
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
</div> <!-- /.row -->