Koha/koha-tmpl/intranet-tmpl/prog/en/modules/admin/item_circulation_alerts.tt
Owen Leonard 8db487cf8b Bug 29131: Row striping breaks color coding on item circulation alerts
The CSS we use for table row "striping," which uses 'tbody
tr:nth-child(odd),' is often difficult to work with because it takes a
lot of increased specificity to override the default. Bootstrap
compounds this by adding its own similar CSS.

In order to overcome this I've added '!important' to the CSS embedded in
the item circulation alerts page. I normally would avoid '!important'
but since this CSS is only relevant to this page I think it's
appropriate.

This patch also adds [% FILTER collapse %] around the <style> block and
does some reindenting, so ignore whitespace when using diff to see the
changes clearly.

To test, apply the patch and go to Administration -> Item circulation
alerts.

- Check the "Legend" table. The first cells should be distinct colors:
  red, pink, and green.
- In the "Checkout" table, table cells should be green by default.
  Clicking in one of the cells should turn it red with the text
  "Disabled for all."
- Use the "Select a library" dropdown to pick a library.
- Clicking in any green cell should turn the cell pink and add the text
  "Disabled for XXX" where XXX is the branchcode.

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

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2021-10-07 15:49:01 +02:00

228 lines
6.2 KiB
Text

[% USE raw %]
[% USE Asset %]
[% USE Branches %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Item circulation alerts &rsaquo; Administration &rsaquo; Koha</title>
[% INCLUDE 'doc-head-close.inc' %]
[% FILTER collapse %]
<style>
table.grid thead th {
vertical-align: bottom;
}
table.grid tbody th {
text-align: right;
}
table.grid tbody td {
font-size: xx-small;
}
table.grid tbody td.info {
background-color: #fff !important;
}
table.grid.active tbody td {
width: 10%;
cursor: pointer;
}
table.grid tbody td {
background-color: #cfc !important;
color: #111;
}
table.grid td.disabled {
background-color: #fcc !important;
}
table.grid td.default {
background-color: #f88 !important;
}
</style>
[% END %]
</head>
<body id="admin_item_circulation_alerts" class="admin">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'prefs-admin-search.inc' %]
<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="/cgi-bin/koha/mainpage.pl">Home</a>
</li>
<li>
<a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a>
</li>
<li>
<a href="#" aria-current="page">
Item circulation alerts
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-push-2">
<main>
<div class="row">
<div class="col-sm-6">
<h1>Item circulation alerts</h1>
<h2>Select a library:</h2>
<form id="branch_selector" method="get" action="/cgi-bin/koha/admin/item_circulation_alerts.pl">
<select id="branch" name="branch">
<option value="*">Default</option>
[% PROCESS options_for_libraries libraries => Branches.all( selected => branch, unfiltered => 1 ) %]
</select>
<input type="submit" name="pick" value="Pick" />
</form>
</div>
<div class="col-sm-6">
<table class="grid">
<caption>Legend</caption>
<thead>
<tr>
<th>Color</th>
<th>Meaning</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100" class="default">&nbsp;</td>
<td class="info">These are disabled for ALL libraries. To change these settings, choose the "Default" library.</td>
</tr>
<tr>
<td class="disabled">&nbsp;</td>
<td class="info">These are disabled for the current library.</td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="info">These are enabled.</td>
</tr>
</tbody>
</table>
</div> <!-- /.col-sm-6 -->
</div> <!-- /.row -->
<h2>Circulation alerts for [% Branches.GetName( branch ) || 'Default' | html %]</h2>
<p>Click on the grid to toggle the settings.</p>
<div id="alerttabs" class="toptabs">
<ul>
<li><a href="#checkout">Checkout</a></li>
<li><a href="#checkin">Check-in</a></li>
</ul>
<div id="checkout">
<h3>Checkout</h3>
<table class="grid active" width="100%">
<thead>
<tr>
<th>&nbsp;</th>
[% FOREACH item_type IN item_types %]
<th>[% item_type.description | html %]</th>
[% END %]
</tr>
</thead>
<tbody>
[% FOREACH grid_checkou IN grid_checkout %]
<tr>
<th>[% grid_checkou.description | html %]</th>
[% FOREACH item IN grid_checkou.items %]
<td class="[% item.class | html %]" id="[% item.id | html %]">[% item.text | html %]</td>
[% END %]
</tr>
[% END %]
</tbody>
</table>
</div>
<div id="checkin">
<h3>Check-in</h3>
<table class="grid active" width="100%">
<thead>
<tr>
<th>&nbsp;</th>
[% FOREACH item_type IN item_types %]
<th>[% item_type.description | html %]</th>
[% END %]
</tr>
</thead>
<tbody>
[% FOREACH grid_checki IN grid_checkin %]
<tr>
<th>[% grid_checki.description | html %]</th>
[% FOREACH item IN grid_checki.items %]
<td class="[% item.class | html %]" id="[% item.id | html %]">[% item.text | html %]</td>
[% END %]
</tr>
[% END %]
</tbody>
</table>
</div>
</div>
</main>
</div> <!-- /.col-sm-10.col-sm-push-2 -->
<div class="col-sm-2 col-sm-pull-10">
<aside>
[% INCLUDE 'admin-menu.inc' %]
</aside>
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
</div> <!-- /.row -->
[% MACRO jsinclude BLOCK %]
[% Asset.js("js/admin-menu.js") | $raw %]
<script>
var $branch = "[% branch | html %]";
$(function(){
$('#alerttabs').tabs();
var blocked = _("Blocked!");
var saving = _("Saving...");
var disabledForAll = _("Disabled for all");
var disabledForCurrent = _("Disabled for %s").format($branch);
$('#branch_selector input:submit').hide();
$('#branch').change(function(){
$('#branch_selector').submit();
});
$('table.grid.active tbody td').click(function(ev){
var id = this.id;
var td = $(this);
if (td.hasClass('default') && $branch != '*') {
td.html(blocked);
window.setTimeout(
function(){ td.html(disabledForAll) },
3000
);
} else {
td.html(saving);
$.ajax({
url : '/cgi-bin/koha/admin/item_circulation_alerts.pl',
type : 'POST',
dataType : 'json',
data : { action: 'toggle', id: id, branch: $branch },
success : function(response){
if ($branch == '*' && response.classes.match(/default/)) {
td.html(disabledForAll);
} else if (response.classes.match(/disabled/)) {
td.html(disabledForCurrent);
} else {
td.html(' ');
}
td.attr('class', response.classes);
}
});
}
});
});
</script>
[% END %]
[% INCLUDE 'intranet-bottom.inc' %]