This patch updates the OPAC and staff interface to use Bootstrap 5. Bootstrap CSS assets are now pulled from node_modules and compiled into staff-global.css and opac.css at build time. This update lays the foundations of some other chnages, especially the addition of a dark mode in the future. Hundreds of templates have been updated, mostly with updates to the grid markup. Most of the responsive behavior is still the same with the exception of improved flexibility of headers and footers in both the OPAC and staff interface. The other most common change is to add a new "namespace" to data attributes used by Bootstrap, e.g. "data-bs-target" or "data-bs-toggle". Modal markup has also been updated everywhere. Other common changes: dropdown button markup, alert markup (we now use Bootstrap's "alert alert-warning" and "alert alert-info" instead of our old "dialog alert" and "dialog info"). Bootstrap 5 now uses CSS variables which we can override in our own '_variables.scss' (in both the OPAC and staff) to accomplish a lot of the style overrides which we previously put in staff-global.scss. Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
75 lines
3.9 KiB
HTML
75 lines
3.9 KiB
HTML
<!-- member-search-box.inc -->
|
|
[% USE Branches %]
|
|
[% USE Categories %]
|
|
[% USE Koha %]
|
|
[% PROCESS 'patronfields.inc' %]
|
|
[% IF CAN_user_borrowers_edit_borrowers || CAN_user_borrowers_list_borrowers %]
|
|
[%- SET searchtype = searchtype || Koha.Preference('DefaultPatronSearchMethod') -%]
|
|
[% WRAPPER tab_panel tabname="patron_search" bt_active= bs_tab_active %]
|
|
<form method="get" action="/cgi-bin/koha/members/member.pl">
|
|
<input type="hidden" name="quicksearch" value="1" />
|
|
|
|
<div class="form-title">
|
|
<label class="control-label" for="searchmember"><span class="control-text">Search patrons</span> <i class="fa fa-fw fa-id-card" aria-hidden="true"></i></label>
|
|
</div>
|
|
|
|
<div class="form-content">
|
|
[% IF ( Koha.Preference('RetainPatronsSearchTerms') ) %]
|
|
<input name="searchmember" id="searchmember" class="head-searchbox form-control" type="text" placeholder="Enter patron card number or partial name" size="25" value="[% searchmember | html %]"/>
|
|
[% ELSE %]
|
|
<input name="searchmember" id="searchmember" class="head-searchbox form-control" type="text" placeholder="Enter patron card number or partial name" size="25"/>
|
|
[% END %]
|
|
|
|
<button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
|
|
</div>
|
|
|
|
<button type="submit" aria-label="Search"><i class="fa fa-arrow-right"></i></button>
|
|
|
|
<div class="form-extra-content">
|
|
<div>
|
|
[% INCLUDE patron_fields_dropdown search_box=1 %]
|
|
</div>
|
|
|
|
<div>
|
|
<label for="searchtype" class="control-label">Search type</label>
|
|
<select name="searchtype" id="searchtype" class="form-select">
|
|
[% IF searchtype == 'starts_with' %]
|
|
<option value='starts_with' selected='selected'>Starts with</option>
|
|
<option value='contains'>Contains</option>
|
|
[% ELSE %]
|
|
<option value='starts_with'>Starts with</option>
|
|
<option value='contains' selected='selected'>Contains</option>
|
|
[% END %]
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
[% SET branches = Branches.all( selected => branchcode_filter, only_from_group => 1 ) %]
|
|
<label for="branchcode" class="control-label">Library</label>
|
|
<select name="branchcode_filter" id="branchcode" class="form-select">
|
|
[% IF branches.size != 1 %]
|
|
<option value="">Any</option>
|
|
[% END %]
|
|
[% PROCESS options_for_libraries libraries => branches %]
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
[% SET categories = Categories.all() %]
|
|
<label for="categorycode" class="control-label">Category</label>
|
|
<select name="categorycode_filter" id="categorycode" class="form-select">
|
|
<option value="">Any</option>
|
|
[% FOREACH category IN categories %]
|
|
[% IF category.categorycode == categorycode_filter %]
|
|
<option value="[% category.categorycode | html %]" selected="selected">[% category.description | html %]</option>
|
|
[% ELSE %]
|
|
<option value="[% category.categorycode | html %]">[% category.description | html %]</option>
|
|
[% END %]
|
|
[% END %]
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
[% END # /tab_panel %]
|
|
[% END %]
|
|
<!-- /member-search-box.inc -->
|