Owen Leonard
5fe1ad8ac6
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>
288 lines
14 KiB
Text
288 lines
14 KiB
Text
[% USE raw %]
|
|
[% USE Branches %]
|
|
[% USE AuthorisedValues %]
|
|
[% USE HtmlTags %]
|
|
[% PROCESS 'i18n.inc' %]
|
|
[% SET footerjs = 1 %]
|
|
[% INCLUDE 'doc-head-open.inc' %]
|
|
<title>[% FILTER collapse %]
|
|
[% IF club_template %]
|
|
[% tx("Modify club template {club_template}", { club_template = club_template.name }) | html %] ›
|
|
[% ELSE %]
|
|
[% t("New club template") | html %]
|
|
[% END %] ›
|
|
[% t("Patron clubs") | html %] ›
|
|
[% t("Tools") | html %] ›
|
|
[% t("Koha") | html %]
|
|
[% END %]</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
<style>
|
|
.club-field,
|
|
.enrollment-field {
|
|
border-top: 1px solid #DDD;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body id="clubs_templates_add_modify" class="clubs">
|
|
[% WRAPPER 'header.inc' %]
|
|
[% INCLUDE 'cat-search.inc' %]
|
|
[% END %]
|
|
|
|
[% WRAPPER 'sub-header.inc' %]
|
|
[% WRAPPER breadcrumbs %]
|
|
[% WRAPPER breadcrumb_item %]
|
|
<a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
|
|
[% END %]
|
|
[% WRAPPER breadcrumb_item %]
|
|
<a href="clubs.pl">Patron clubs</a>
|
|
[% END %]
|
|
[% WRAPPER breadcrumb_item bc_active= 1 %]
|
|
[% IF club_template %]
|
|
<span>Modify club template [% club_template.name | html | $HtmlTags tag="em" %]</span>
|
|
[% ELSE %]
|
|
<span>New club template</span>
|
|
[% END %]
|
|
[% END %]
|
|
[% END #/ WRAPPER breadcrumbs %]
|
|
[% END #/ WRAPPER sub-header.inc %]
|
|
|
|
<div class="main container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-8 offset-md-2">
|
|
[% INCLUDE 'messages.inc' %]
|
|
|
|
<form method="post" class="validated">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
<input type="hidden" name="id" value="[% club_template.id | html %]" />
|
|
<input type="hidden" name="op" value="cud-update" />
|
|
<h1>
|
|
[% IF club_template %]
|
|
<span>Modify club template [% club_template.name | html | $HtmlTags tag="em" %]</span>
|
|
[% ELSE %]
|
|
<span>New club template</span>
|
|
[% END %]
|
|
</h1>
|
|
|
|
|
|
<fieldset class="rows">
|
|
<ol>
|
|
<li>
|
|
<label class="required" for="name">Name:</label>
|
|
<input id="club-template-name" name="name" type="text" value="[% club_template.name | html %]" required="required"/>
|
|
<span class="required">Required</span>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club-template-description">Description:</label>
|
|
<input id="club-template-description" name="description" type="text" value="[% club_template.description | html %]" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club-template-is-enrollable-from-opac">Allow public enrollment:</label>
|
|
[% IF club_template.is_enrollable_from_opac %]
|
|
<input type="checkbox" id="club-template-is-enrollable-from-opac" name="is_enrollable_from_opac" checked="checked" />
|
|
[% ELSE %]
|
|
<input type="checkbox" id="club-template-is-enrollable-from-opac" name="is_enrollable_from_opac" />
|
|
[% END %]
|
|
<span class="hint">If a template allows public enrollment, patrons can enroll in a club based on this template from the public catalog.</span>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club-template-is-email-required">Require valid email address:</label>
|
|
[% IF club_template.is_email_required %]
|
|
<input type="checkbox" id="club-template-is-email-required" name="is_email_required" checked="checked" />
|
|
[% ELSE %]
|
|
<input type="checkbox" id="club-template-is-email-required" name="is_email_required" />
|
|
[% END %]
|
|
<span class="hint">If set, a club based on this template can only be enrolled in by patrons with a valid email address.</span>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club-template-branchcode">Library:</label>
|
|
<select name="branchcode" id="club-template-branchcode">
|
|
<option value=""></option>
|
|
[% PROCESS options_for_libraries libraries => Branches.all( selected => club_template.branchcode ) %]
|
|
</select>
|
|
<div class="hint">If set, only librarians logged in with this branch will be able to modify this club template.</div>
|
|
</li>
|
|
|
|
</ol>
|
|
</fieldset>
|
|
|
|
<fieldset class="rows">
|
|
<legend>Club fields:</legend>
|
|
<p><span class="hint">These fields will be used in the creation of clubs based on this template</span></p>
|
|
<div id="club-template-fields">
|
|
[% FOREACH f IN club_template.club_template_fields %]
|
|
<div class="club-field">
|
|
<ol class="clearfix">
|
|
<input type="hidden" name="club_template_field_id" value="[% f.id | html %]" />
|
|
<li>
|
|
<label for="field-name-[% f.id | html %]">Name:</label>
|
|
<input type="text" name="club_template_field_name" id="field-name-[% f.id | html %]" value="[% f.name | html %]" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="field-description-[% f.id | html %]">Description:</label>
|
|
<input type="text" name="club_template_field_description" id="field-description-[% f.id | html %]" value="[% f.description | html %]" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="field-authorised-value-category-[% f.id | html %]">Authorised value category:</label>
|
|
<select name="club_template_field_authorised_value_category" id="field-authorised-value-category-[% f.id | html %]">
|
|
<option value=""></option>
|
|
[% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => f.authorised_value_category) %]
|
|
</select>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="field-delete-[% f.id | html %]">Delete field:</label>
|
|
<input type="checkbox" name="club_template_field_delete" id="field-delete-[% f.id | html %]" value="[% f.id | html %]" />
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
[% END %]
|
|
</div>
|
|
<fieldset class="action">
|
|
<a href="#" class="add_club_field">
|
|
<i class="fa fa-plus"></i> Add new field
|
|
</a>
|
|
</fieldset>
|
|
</fieldset>
|
|
|
|
<fieldset class="rows">
|
|
<legend>Enrollment fields</legend>
|
|
<p><span class="hint">These fields will be used when enrolling a patron in a club based on this template</span></p>
|
|
<div id="club-template-enrollment-fields">
|
|
[% FOREACH f IN club_template.club_template_enrollment_fields %]
|
|
<div class="enrollment-field">
|
|
<ol class="clearfix">
|
|
<li>
|
|
<span class="label"> </span>
|
|
<strong>Enrollment field</strong>
|
|
</li>
|
|
<li>
|
|
<input type="hidden" name="club_template_enrollment_field_id" value="[% f.id | html %]" />
|
|
<label for="enrollment-field-name-[% f.id | html %]">Name:</label>
|
|
<input type="text" name="club_template_enrollment_field_name" id="enrollment-field-name-[% f.id | html %]" value="[% f.name | html %]" size="40" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="enrollment-field-description-[% f.id | html %]">Description:</label>
|
|
<input type="text" name="club_template_enrollment_field_description" id="enrollment-field-description-[% f.id | html %]" value="[% f.description | html %]" size="40" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="enrollment-field-authorised-value-category-[% f.id | html %]">Authorised value category:</label>
|
|
<select name="club_template_enrollment_field_authorised_value_category" id="enrollment-field-authorised-value-category-[% f.id | html %]">
|
|
<option value=""></option>
|
|
[% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => f.authorised_value_category) %]
|
|
</select>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="enrollment-field-delete-[% f.id | html %]">Delete field:</label>
|
|
<input type="checkbox" name="club_template_enrollment_field_delete" id="enrollment-field-delete-[% f.id | html %]" value="[% f.id | html %]" />
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
[% END %]
|
|
</div>
|
|
<fieldset class="action">
|
|
<a href="#" class="add_enrollment_field">
|
|
<i class="fa fa-plus"></i> Add new field
|
|
</a>
|
|
</fieldset>
|
|
</fieldset>
|
|
|
|
<fieldset class="action">
|
|
<input type="hidden" name="id" value="[% club_template.id | html %]" />
|
|
<input type="submit" class="btn btn-primary" value="Save" />
|
|
<a href="clubs.pl" class="cancel">Cancel</a>
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div> <!-- /.col-md-8 .col-md-offset-2 -->
|
|
</div> <!-- /.row -->
|
|
|
|
|
|
<div id="new-field-template" class="club-field" style="display:none">
|
|
<h4 style="margin-left:1em;">New club field</h4>
|
|
<input type="hidden" name="club_template_field_id" value="" />
|
|
<ol class="clearfix">
|
|
|
|
<li>
|
|
<label for="club_template_field_name">Name:</label>
|
|
<input type="text" name="club_template_field_name" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club_template_field_description">Description:</label>
|
|
<input type="text" name="club_template_field_description" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club_template_field_authorised_value_category">Authorised value category:</label>
|
|
<select name="club_template_field_authorised_value_category">
|
|
<option value=""></option>
|
|
[% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories() %]
|
|
</select>
|
|
</li>
|
|
</ol>
|
|
<fieldset class="action"><a href="#" class="delete_club_field"><i class="fa fa-trash-can"></i> Delete field</a></fieldset>
|
|
<hr/>
|
|
</div>
|
|
|
|
<div id="new-enrollment-field-template" class="enrollment-field" style="display:none">
|
|
<h4 style="margin-left:1em;">New enrollment field</h4>
|
|
<input type="hidden" name="club_template_enrollment_field_id" value="" />
|
|
<ol class="clearfix">
|
|
|
|
<li>
|
|
<label for="club_template_enrollment_field_name">Name:</label>
|
|
<input type="text" name="club_template_enrollment_field_name" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club_template_enrollment_field_description">Description:</label>
|
|
<input type="text" name="club_template_enrollment_field_description" />
|
|
</li>
|
|
|
|
<li>
|
|
<label for="club_template_enrollment_field_authorised_value_category">Authorised value category:</label>
|
|
<select name="club_template_enrollment_field_authorised_value_category">
|
|
<option value=""></option>
|
|
[% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories() %]
|
|
</select>
|
|
</li>
|
|
</ol>
|
|
<fieldset class="action"><a href="#" class="delete_enrollment_field"><i class="fa fa-trash-can"></i> Delete field</a></fieldset>
|
|
</div>
|
|
|
|
|
|
[% MACRO jsinclude BLOCK %]
|
|
<script>
|
|
$("body").on("click", ".add_club_field", function(e){
|
|
e.preventDefault();
|
|
$("#new-field-template").clone().attr("id","").show().appendTo("#club-template-fields");
|
|
});
|
|
|
|
$("body").on("click", ".delete_club_field", function(e){
|
|
e.preventDefault();
|
|
$(this).parent().parent().remove();
|
|
});
|
|
|
|
$("body").on("click", ".delete_enrollment_field", function(e){
|
|
e.preventDefault();
|
|
$(this).parent().parent().remove();
|
|
});
|
|
|
|
$("body").on("click", ".add_enrollment_field", function(e){
|
|
e.preventDefault();
|
|
$('#new-enrollment-field-template').clone().attr('id','').show().appendTo('#club-template-enrollment-fields');
|
|
});
|
|
</script>
|
|
[% END %]
|
|
|
|
[% INCLUDE 'intranet-bottom.inc' %]
|