Koha/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
Owen Leonard cd6ccd828a Bug 27889: Adjust responsive width of OPAC advanced search form
This patch tweaks the CSS for the advanced search form in the OPAC so
that it adjusts well at various browser widths, including preventing the
form from taking up the whole width of the page at higher browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the OPAC, go to the advanced search page.
- Test the appearance of the fields in the first "Search for" section,
  confirming that everything adjusts well at all widths large and small.
- Click the "More options" button and test that configuration as well.

Signed-off-by: David Nind <david@davidnind.com>

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2021-04-06 15:56:30 +02:00

541 lines
34 KiB
Text

[% USE raw %]
[% USE Asset %]
[% USE Koha %]
[% USE Branches %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Advanced search &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
[% INCLUDE 'doc-head-close.inc' %]
[% BLOCK cssinclude %][% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='advsearch' bodyclass='scrollto' %]
[% INCLUDE 'masthead.inc' %]
<form action="/cgi-bin/koha/opac-search.pl" method="get">
<input type="hidden" name="advsearch" value="1"/>
<div class="main">
<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="/cgi-bin/koha/opac-main.pl">Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<a href="#">Advanced search</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col order-first order-md-first order-lg-2">
<!-- BOOLEAN SEARCH OPTIONS -->
<div id="booleansearch" class="maincontent">
<h1>Advanced search</h1>
<fieldset>
<legend>Search for:</legend>
[% IF ( expanded_options ) %]
<div class="advanced-search-terms extended">
[% ELSE %]
<div class="advanced-search-terms">
[% END # /IF ( expanded_options ) %]
[% FOREACH search_box IN search_boxes_loop %]
<div class="search-term-row">
<div class="search-term-input">
[% IF ( expanded_options ) %]
[% IF ( search_box.boolean ) %]
<select name="op" class="form-control">
<option value="and" selected="selected">and</option>
<option value="or">or</option>
<option value="not">not</option>
</select>
[% END %]
[% ELSE %]
<label for="search-field_[% loop.index | html %]">
[% IF loop.index == 0 %]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[% ELSE %]
and
[% END %]
</label>
[% END # /IF ( expanded_options ) %]
</div> <!-- .search-term-input -->
<div class="search-term-input">
<select class="form-control" name="idx" id="search-field_[% loop.index | html %]">
<option value="kw">Keyword</option>
[% IF ( expanded_options ) %]
<option value="kw,phr">&nbsp;&nbsp;&nbsp;&nbsp; Keyword phrase</option>
[% END %]
<option value="su,wrdl">Subject</option>
[% IF ( expanded_options ) %]
<option value="su,phr">&nbsp;&nbsp;&nbsp;&nbsp; Subject phrase</option>
<option value="su-br">&nbsp;&nbsp;&nbsp;&nbsp; Subject and broader terms</option>
<option value="su-na">&nbsp;&nbsp;&nbsp;&nbsp; Subject and narrower terms</option>
<option value="su-rl">&nbsp;&nbsp;&nbsp;&nbsp; Subject and related terms</option>
[% END %]
<option value="ti">Title</option>
[% IF ( expanded_options ) %]
<option value="ti,phr">&nbsp;&nbsp;&nbsp;&nbsp; Title phrase</option>
<option value="se,wrdl">Series title</option>
[% IF ( Koha.Preference('OPACNumbersPreferPhrase') ) %]
<option value="callnum,phr">Call number</option>
[% ELSE %]
<option value="callnum">Call number</option>
[% END %]
[% END %]
<option value="au,wrdl">Author</option>
[% IF ( expanded_options ) %]
<option value="au,phr">&nbsp;&nbsp;&nbsp;&nbsp; Author phrase</option>
<option value="cpn,wrdl">&nbsp;&nbsp;&nbsp;&nbsp; Corporate name</option>
<option value="cfn,wrdl">&nbsp;&nbsp;&nbsp;&nbsp; Conference name</option>
<option value="cfn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Conference name phrase</option>
<option value="pn,wrdl">&nbsp;&nbsp;&nbsp;&nbsp; Personal name</option>
<option value="pn,phr">&nbsp;&nbsp;&nbsp;&nbsp; Personal name phrase</option>
[% END %]
[% IF ( expanded_options ) %]
<option value="nt">Notes/Comments</option>
[% IF (marcflavour != 'UNIMARC') %]
<option value="curriculum">Curriculum</option>
[% END %]
[% END %]
<option value="pb,wrdl">Publisher</option>
<option value="pl,wrdl">Publisher location</option>
[% IF ( expanded_options ) %]
[% IF ( Koha.Preference('OPACNumbersPreferPhrase') ) %]
<option value="ident,phr">Standard number</option>
[% ELSE %]
<option value="ident">Standard number</option>
[% END %]
<option value="nb">&nbsp;&nbsp;&nbsp;&nbsp; ISBN</option>
<option value="ns">&nbsp;&nbsp;&nbsp;&nbsp; ISSN</option>
[% ELSE %]
<option value="nb">ISBN</option>
[% END %]
<option value="bc">Barcode</option>
</select> <!-- /#search-field_[% loop.index | html %] -->
</div> <!-- .search-term-input -->
<div class="search-term-input">
<input class="form-control" type="text" size="" name="q" title="Enter search terms" value="" />
</div> <!-- .search-term-input -->
[% IF ( expanded_options ) %]
<div class="search-term-input">
[% IF ( !loop.first ) %]
<a class="ButtonPlus" title="Add another field" href="#">
<i class="fa fa-plus-square" aria-hidden="true"></i>
</a>
<a class="ButtonLess" title="Remove field" href="#">
<i class="fa fa-minus-square" aria-hidden="true"></i>
</a>
[% END %]
</div> <!-- .search-term-input -->
[% END %]
</div> <!-- /.search-term-row -->
[% END # FOREACH search_box %]
[% IF ( expanded_options ) %]
[% IF Koha.Preference('SearchEngine') == 'Elasticsearch' %]
<div id="weight_search">
<label>
<input type="checkbox" name="weight_search" checked="checked">
Apply field weights to search
</label>
</div>
[% END %]
[% ELSE %]
<input type="hidden" name="weight_search" value="1" />
[% END %]
</div> <!-- /.search-terms -->
</fieldset>
</div> <!-- /#booleansearch -->
</div> <!-- / .col -->
</div> <!-- / .row -->
<div class="text-center">
<!-- SEARCH BUTTONS -->
<fieldset class="action">
[% PROCESS searchbuttons %]
</fieldset>
<!-- /SEARCH BUTTONS -->
</div>
<div class="row">
[%# Following on one line for translatability %]
[% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('itemtype').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('itemtype').size > 0 and expanded_options ) ) %]
<div class="col order-first order-md-first order-lg-2">
<div id="advsearches" class="toptabs">
<ul>
[% FOREACH advsearchloo IN advancedsearchesloop %]
<li id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
<a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]">
[% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]Item type
[% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]Collection
[% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]Shelving location
[% ELSE %]Something else
[% END %]
</a></li>
[% END %]
</ul>
[% FOREACH advsearchloo IN advancedsearchesloop %]
<div id="advsearch-[% advsearchloo.advanced_search_type | html %]" class="advsearch">
<fieldset>
<legend>Limit to any of the following:</legend>
<div class="row">
[% FOREACH itemtypeloo IN advsearchloo.code_loop %]
[% IF (advsearchloo.advanced_search_type != 'itemtypes') OR (((!itemtypeloo.searchcategory) AND (itemtypeloo.cat == 0)) OR (itemtypeloo.cat == 1)) %]
<div class="col-sm-6 col-lg-3">
<input type="checkbox"
id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]"
name="[% IF ( itemtypeloo.cat == 1 ) %]searchcat[% ELSE %]limit[% END %]"
value="[% IF ( itemtypeloo.cat == 1 ) %][% itemtypeloo.code | html %][% ELSE %]mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %][% END %]"
/>
<label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages')) %]
[% IF ( itemtypeloo.imageurl ) %]
<img src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
[% END %]
&nbsp;
[% END %]
[% itemtypeloo.description | html %]
</label>
</div>
[% IF ( loop.last ) %]</div>[% ELSE %][% UNLESS ( loop.count % 4 ) %]</div><div class="row">[% END %][% END %]
[% END %]
[% END %]
</fieldset>
</div> <!-- / #advsearch-[% advsearchloo.advanced_search_type | html %] -->
[% END # / FOREACH advancedsearchesloop %]
</div> <!-- / #advsearches -->
</div> <!-- / .col -->
[% END # /IF OpacAdvSearchOptions %]
</div>
<div id="advsearch_limits" class="row">
[%# Following on one line for translatability %]
[% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('location').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('location').size > 0 and expanded_options ) ) %]
[% IF ( singleBranchMode ) %]
<div class="col-sm-6 col-lg-3">
<!-- AVAILABILITY LIMITS -->
<div id="location" class="advsearch_limit">
<fieldset>
<legend>Availability: </legend>
<div style="margin-top:.4em">
<label for="available-items"><input type="checkbox" id="available-items" name="limit" value="available" /> Only items currently available for loan or reference</label>
</div>
</fieldset>
</div> <!-- / #location -->
<!-- /AVAILABILITY LIMITS -->
</div> <!-- / .col -->
[% ELSE %]
<div class="col-sm-6 col-lg-3">
<!-- AVAILABILITY LIMITS -->
<div id="location" class="advsearch_limit">
<fieldset>
<label for="branchloop">Location and availability:</label>
<select name="limit" id="branchloop">
<option value="">All libraries</option>
[% FOREACH BranchesLoo IN Branches.all( selected => opac_name ) %]
[% IF BranchesLoo.selected %]
<option value="branch:[% BranchesLoo.branchcode | html %]" selected="selected">[% BranchesLoo.branchname | html %]</option>
[% ELSE %]
<option value="branch:[% BranchesLoo.branchcode | html %]">[% BranchesLoo.branchname | html %]</option>
[% END %]
[% END %]
</select>
[% IF search_groups %]
<p>OR</p>
<label for="categoryloop">Groups of libraries</label>
<select name="multibranchlimit" id="categoryloop">
<option value=""> -- none -- </option>
[% FOREACH sg IN search_groups %]
<option value="[% sg.id | html %]">[% sg.title | html %]</option>
[% END %]
</select>
[% END %]
<div style="margin-top:.4em">
<label for="available-items"><input type="checkbox" id="available-items" name="limit" value="available" /> Only items currently available for loan or reference</label>
</div>
</fieldset>
</div> <!-- / #location -->
<!-- /AVAILABILITY LIMITS -->
</div> <!-- / .col -->
[% END # / IF singleBranchMode %]
[% END %]
[%# Following on one line for translatability %]
[% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('sorting').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('sorting').size > 0 and expanded_options ) ) %]
<div class="col-sm-6 col-lg-3">
<!-- RANK LIMITS -->
<div id="sortby" class="advsearch_limit">
<fieldset>
<label for="sort_by">Sort by:</label>
<select id="sort_by" name="sort_by">
[% INCLUDE 'resort_form.inc' %]
</select>
</fieldset>
</div>
<!-- RANK LIMITS -->
</div> <!-- / .col -->
[% END %]
[%# Following on one line for translatability %]
[% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('pubdate').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('pubdate').size > 0 and expanded_options ) ) %]
<div class="col-sm-6 col-lg-3">
<div id="pubrange" class="advsearch_limit">
<!-- PUB RANGE OPTION -->
<fieldset>
<label for="limit-yr">Publication date range</label>
<input type="text" size="30" id="limit-yr" name="limit-yr" title="Enter search terms" value="" />
<div class="hint">For example: 1999-2001. You could also use "-1987" for everything published in and before 1987 or "2008-" for everything published in 2008 and after.</div>
</fieldset>
<!-- /PUB RANGE OPTION -->
</div>
</div>
[% END %]
[%# Following on one line for translatability %]
[% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('language').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('language').size > 0 and expanded_options ) ) %]
<div class="col-sm-6 col-lg-3">
<div id="langfilter" class="advsearch_limit">
<fieldset>
<!-- LANGUAGE LIMIT -->
<label for="language-limit">Language</label>
<select id="language-limit" name="limit">
<option value="">No limit</option>
[% FOREACH search_languages_loo IN search_languages_loop %]
[% IF ( search_languages_loo.selected ) %]
<option value="ln,rtrn:[% search_languages_loo.iso639_2_code | html %]" selected="selected">[% search_languages_loo.language_description | html %]</option>
[% ELSE %]
<option value="ln,rtrn:[% search_languages_loo.iso639_2_code | html %]">[% search_languages_loo.language_description | html %]</option>
[% END %]
[% END %]
</select>
<!-- /LANGUAGE LIMIT -->
</fieldset>
</div> <!-- / #langfilter -->
</div> <!-- / .col -->
[% END %]
</div> <!-- / .row -->
[%# Following on one line for translatability %]
[% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('subtype').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('subtype').size > 0 and expanded_options ) ) %]
[% IF ( usmarc ) %]
<div id="subtypes" class="row">
<!-- SUBTYPE LIMITS -->
<div class="col-sm-6 col-lg-3">
<div class="advsearch_limit">
<fieldset>
<label for="subtype_audience">Audience</label>
<select id="subtype_audience" name="limit" class="subtype">
<option value="" selected="selected" class="menuheader">Any audience</option>
<option value="aud:a">Preschool</option>
<option value="aud:b">Primary</option>
<option value="aud:c">Pre-adolescent</option>
<option value="aud:d">Adolescent</option>
<option value="aud:e">Adult</option>
<option value="aud:f">Specialized</option>
<option value="aud:g">General</option>
<option value="aud:j">Juvenile</option>
</select>
</fieldset>
</div> <!-- /.advsearch_limit -->
</div> <!-- / .col-sm-6 col-lg-3 -->
<div class="col-sm-6 col-lg-3">
<div class="advsearch_limit">
<fieldset>
<label for="subtype_content">Content</label>
<select id="subtype_content" name="limit" class="subtype">
<option value="" selected="selected" class="menuheader">Any content</option>
<option value="fic:1">Fiction</option>
<option value="fic:0">Non-fiction</option>
<option value="bio:b">Biography</option>
<option value="mus:j">Musical recording</option>
<option value="mus:i">Non-musical recording</option>
</select>
</fieldset>
</div> <!-- /.advsearch_limit -->
</div>
<div class="col-sm-6 col-lg-3">
<div class="advsearch_limit">
<fieldset>
<label for="subtype_format">Format</label>
<select id="subtype_format" name="limit" class="subtype">
<option value="" selected="selected" class="menuheader">Any format</option>
<option value="l-format:ta">Regular print</option>
<option value="l-format:tb">Large print</option>
<option value="l-format:tc or l-format:fb">Braille</option>
<option value="">-----------</option>
<option value="l-format:sd">CD audio</option>
<option value="l-format:ss">Cassette recording</option>
<option value="l-format:vf">VHS tape / Videocassette</option>
<option value="l-format:vd">DVD video / Videodisc</option>
<option value="l-format:co">CD software</option>
<option value="l-format:cr">Website</option>
</select>
</fieldset>
</div> <!-- /.advsearch_limit -->
</div> <!-- / .col-sm-6 col-lg-3 -->
<div class="col-sm-6 col-lg-3">
<div class="advsearch_limit">
<fieldset>
<label for="subtype_additional">Additional content types for books/printed materials</label>
<select id="subtype_additional" name="limit" class="subtype">
<option value="">Any</option>
<option value="ctype:a">Abstracts/summaries</option>
<option value="ctype:b">Bibliographies</option>
<option value="ctype:c">Catalogs</option>
<option value="ctype:d">Dictionaries</option>
<option value="ctype:e">Encyclopedias </option>
<option value="ctype:f">Handbooks</option>
<option value="ctype:g">Legal articles</option>
<option value="ctype:i">Indexes</option>
<option value="ctype:j">Patent document</option>
<option value="ctype:k">Discographies</option>
<option value="ctype:l">Legislation</option>
<option value="ctype:m">Theses</option>
<option value="ctype:n">Surveys</option>
<option value="ctype:o">Reviews</option>
<option value="ctype:p">Programmed texts</option>
<option value="ctype:q">Filmographies</option>
<option value="ctype:r">Directories</option>
<option value="ctype:s">Statistics</option>
<option value="ctype:t">Technical reports</option>
<option value="ctype:v">Legal cases and case notes</option>
<option value="ctype:w">Law reports and digests</option>
<option value="ctype:z">Treaties </option>
</select>
</fieldset>
</div> <!-- /.advsearch_limit -->
</div> <!-- / .col-sm-6 col-lg-3 -->
</div> <!-- / #subtypes.row -->
<!-- SUBTYPE LIMITS -->
[% END # / IF usmarc %]
[% IF ( UNIMARC ) %]
<div id="subtypes_unimarc" class="row">
<!-- SUBTYPE LIMITS -->
[% INCLUDE 'subtypes_unimarc.inc' %]
</div>
[% END %]
[% END # / IF expanded_options %]
[% IF ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.size > 0 and expanded_options ) or
( OpacAdvSearchOptions and OpacAdvSearchOptions.size > 0 and not expanded_options ) %]
<div class="text-center">
<fieldset class="action">
<!-- SEARCH BUTTONS -->
[% PROCESS searchbuttons %]
<!-- /SEARCH BUTTONS -->
</fieldset>
</div>
[% END %]
</div> <!-- / .container-fluid -->
</div> <!-- / .main -->
</form>
[% INCLUDE 'opac-bottom.inc' %]
[% BLOCK searchbuttons %]
<p>
<input class="btn btn-primary" type="submit" accesskey="s" name="do" title="Search" value="Search" />
[% IF ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.size > 0 ) %]
[% IF expanded_options %]
<a href="/cgi-bin/koha/opac-search.pl?expanded_options=0" class="btn btn-default more-less-options">Fewer options</a>
[% ELSIF not expanded_options %]
<a href="/cgi-bin/koha/opac-search.pl?expanded_options=1" class="btn btn-default more-less-options">More options</a>
[% END %]
[% END %]
<a href="/cgi-bin/koha/opac-search.pl?do=Clear" class="btn btn-default new-search">New search</a>
</p>
[% END %]
[% BLOCK jsinclude %]
[% Asset.js("lib/jquery/plugins/jquery.deserialize.min.js") | $raw %]
[% Asset.js("lib/jquery/plugins/jquery.cookie.min.js") | $raw %]
<script>
$(document).ready(function() {
$('#advsearches').tabs();
jQuery.cookie.json = true;
//$('#advsearches > ul').tabs();
[% IF ( ReturnToSearch ) %]
if (form_serialized = jQuery.cookie("form_serialized")) {
$('#advsearch form').deserialize(form_serialized);
}
if (form_serialized_limits = jQuery.cookie("form_serialized_limits")) {
$('#language-limit') .val(form_serialized_limits[0]);
$('#branchloop') .val(form_serialized_limits[1]);
$('#subtype_audience') .val(form_serialized_limits[2]);
$('#subtype_content') .val(form_serialized_limits[3]);
$('#subtype_format') .val(form_serialized_limits[4]);
$('#subtype_additional') .val(form_serialized_limits[5]);
$('#locloop') .val(form_serialized_limits[6]);
}
[% ELSE %]
//Clear all form cookies
jQuery.removeCookie("form_serialized", { path: '/'});
jQuery.removeCookie("form_serialized_limits", { path: '/'});
jQuery.removeCookie("num_paragraph", { path: '/'});
jQuery.removeCookie("search_path_code", { path: '/'});
[% END %]
$('#advsearch form').submit(function() {
$('[name^="limit"]').each(function(){
if( $(this).val() == '' ){
$(this).prop("disabled","disabled");
}
});
$(".search-term-row").each(function(){
if( $(this).find('input[name="q"]').val() == "" ){
$(this).find('input[name="q"]').prop("disabled","disabled");
$(this).find('select[name="op"]').prop("disabled","disabled");
$(this).find('select[name="idx"]').prop("disabled","disabled");
}
});
form_serialized = $(this).serialize();
jQuery.cookie("form_serialized", form_serialized,{ path: '/'});
form_serialized_limits = [
$('#language-limit').val(), $('#branchloop').val(),
$('#subtype_audience').val(), $('#subtype_content').val(),
$('#subtype_format').val(), $('#subtype_additional').val(),
$('#locloop').val()
];
jQuery.cookie("form_serialized_limits", form_serialized_limits,{ path: '/'});
[% IF ( expanded_options ) %]
var numPar = $("#booleansearch fieldset p").size();
if (numPar > [% search_boxes_count | html %]){
jQuery.cookie("num_paragraph", numPar,{ path: '/'});
}else{
jQuery.removeCookie("num_paragraph", { path: '/'});
}
jQuery.cookie("search_path_code", 'exs',{ path: '/'});
[% ELSE %]
jQuery.cookie("search_path_code", 'ads',{ path: '/'});
jQuery.removeCookie("num_paragraph", { path: '/'});
[% END %]
});
});
/* This function allows to display a new field to search.
*/
$(document).on("click", '.ButtonPlus', function(e) {
e.preventDefault();
$('.ButtonLess').show();
var thisLine = $(this).parent().parent();
var newLine = thisLine.clone();
newLine.find('input').val('');
thisLine.after(newLine);
});
$(document).on("click", '.ButtonLess', function(e) {
e.preventDefault();
if($(this).parent().parent().siblings().length <= 3 ) {
$('.ButtonLess').hide();
}
$(this).parent().parent().remove();
});
</script>
[% END %]