Owen Leonard
e12e0ef016
This patch updates the browse search interface to confirm to new interface patterns in the Bootstrap 4 framework, especially in the form markup. The results list has been changed to a Bootstrap "Collapse" component configured as an accordion (https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example). Instead of loading the bibliographic record results below the list of terms returned, the bibliographic results are now displayed in the "panel" expanded below the selected term. Subtitle has been added to the information displayed about the bibliographic record. To test you must be using ElasticSearch and the OpacBrowseSearch preference must be enabled. Apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Open the "Browse search" page in the OPAC. - Test various searches: Author, Subject, and Title. - When results are found, the should be displayed as a Bootstrap-styled accordion widget. Clicking any individual result should expand the panel containing the corresponding records. - Clicking the record link should open the bibliographic detail page in a new window. - When no results are found, a Bootstrap-style "alert" box should appear. Signed-off-by: Victor Grousset/tuxayo <victor@tuxayo.net> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
122 lines
6.3 KiB
Text
122 lines
6.3 KiB
Text
[% USE Koha %]
|
|
[% USE Asset %]
|
|
[% USE raw %]
|
|
[% INCLUDE 'doc-head-open.inc' %]
|
|
<title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog › Browse our catalog</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
[% BLOCK cssinclude %][% END %]
|
|
[% INCLUDE 'bodytag.inc' bodyid='opac-browser' %]
|
|
[% INCLUDE 'masthead.inc' %]
|
|
|
|
<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="#">Browse search</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
[% IF ( OpacNav || OpacNavBottom ) %]
|
|
<div class="col-lg-2">
|
|
<div id="navigation">
|
|
[% INCLUDE 'navigation.inc' %]
|
|
</div>
|
|
</div>
|
|
[% END %]
|
|
|
|
[% IF ( OpacNav ) %]
|
|
<div class="col-10 order-first order-md-first order-lg-2">
|
|
[% ELSE %]
|
|
<div class="col order-first order-md-first order-lg-2">
|
|
[% END %]
|
|
|
|
[% IF Koha.Preference('SearchEngine') == 'Elasticsearch' && Koha.Preference('OpacBrowseSearch') %]
|
|
<div id="browse-search" class="maincontent">
|
|
<h1>Browse search</h1>
|
|
|
|
<form>
|
|
<div class="form-row">
|
|
<div class="col">
|
|
<label for="browse-searchterm">Search for:</label>
|
|
<input type="search" id="browse-searchterm" class="form-control" name="searchterm" value="" />
|
|
</div> <!-- /.col-12.col-sm-9 -->
|
|
<div class="col-auto">
|
|
<label for="browse-searchfield">Search type:</label>
|
|
<select id="browse-searchfield" name="searchfield" class="form-control">
|
|
<option value="author">Author</option>
|
|
<option value="subject">Subject</option>
|
|
<option value="title">Title</option>
|
|
</select>
|
|
</div> <!-- /.col-auto -->
|
|
</div> <!-- /.form-row -->
|
|
<div class="form-row">
|
|
<div class="col">
|
|
<div id="browse-searchfuzziness">
|
|
<div class="form-check form-check-inline">
|
|
<label for="exact" class="form-check-label">
|
|
<input class="form-check-input" type="radio" name="browse-searchfuzziness" id="exact" value="0" />Exact
|
|
</label>
|
|
</div> <!-- /.form-check.form-check-inline -->
|
|
<div class="form-check form-check-inline">
|
|
<label for="fuzzy" class="form-check-label">
|
|
<input class="form-check-input" type="radio" name="browse-searchfuzziness" id="fuzzy" value="1" checked="checked" /> Fuzzy
|
|
</label>
|
|
</div> <!-- /.form-check.form-check-inline -->
|
|
<div class="form-check form-check-inline">
|
|
<label for="reallyfuzzy" class="form-check-label">
|
|
<input class="form-check-input" type="radio" name="browse-searchfuzziness" id="reallyfuzzy" value="2" /> Really fuzzy
|
|
</label>
|
|
</div> <!-- /.form-check.form-check-inline -->
|
|
</div> <!-- /#browse-searchfuzziness -->
|
|
</div> <!-- /.col -->
|
|
</div> <!-- /.form-row -->
|
|
<div class="form-row">
|
|
<div class="col">
|
|
<button class="btn btn-primary" type="submit" accesskey="s">Search</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="browse-suggestionserror" class="alert alert-warning d-none" role="alert">
|
|
An error occurred, please try again.
|
|
</div>
|
|
|
|
<div id="browse-resultswrapper" class="d-none">
|
|
<h2>Results</h2>
|
|
|
|
<div class="loading d-none"><img src="[% interface | html %]/[% theme |html %]/images/loading.gif" alt=""> Loading</div>
|
|
<div class="alert alert-warning no-results d-none" role="alert">Sorry, there are no results. Try a different search term.</div>
|
|
|
|
<div class="accordion" id="browse-searchresults">
|
|
<div id="card_template" class="card">
|
|
<div class="card-header" id="heading">
|
|
<a class="expand-result" href="#" data-toggle="collapse" aria-expanded="false" aria-controls="collapse">
|
|
</a>
|
|
</div> <!-- /#heading.card-header -->
|
|
<div id="collapse" class="collapse" aria-labelledby="heading" data-parent="#browse-searchresults">
|
|
<div class="card-body">
|
|
</div>
|
|
</div> <!-- /#collapse.collapse -->
|
|
</div> <!-- /#card_template.card -->
|
|
</div> <!-- /#browse-searchresults.accordion -->
|
|
</div><!-- / #browse-resultswrapper -->
|
|
</div><!-- /#browse-search -->
|
|
[% ELSE %]
|
|
<h3>This feature is not enabled</h3>
|
|
[% END %]
|
|
|
|
</div><!-- / .col/col-10 -->
|
|
</div><!-- / .row -->
|
|
</div><!-- / .container-fluid -->
|
|
</div><!-- / .main -->
|
|
|
|
[% INCLUDE 'opac-bottom.inc' %]
|
|
[% BLOCK jsinclude %]
|
|
[% Asset.js("/js/browse.js") | $raw %]
|
|
[% END %]
|