Bug 12677: Use Bootstrap "label" style for inline OPAC renewal messages

This patch revises the styling of the renewal success message to use a
default Bootstrap style more suited to inline messages. I think this is
preferable to using the alert style because the alert is designed to be
a block-level element.

http://getbootstrap.com/2.3.2/components.html#labels-badges

Because Koha's CSS already uses a "label" class for something else I
duplicate the Bootstrap "label" class in opac.css as "blabel." The
Bootstrap color definitions are included.

To test, follow the test plan already provided:

1) Apply this patch
2) From the OPAC, renew some items
3) Note the "Renewed!" message in the "Renew" column of the checkouts
   table

Patch works as expected.
Signed-off-by: Marc Véron <veron@veron.ch>

Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de>
Works as described, no problems found.

Signed-off-by: Tomas Cohen Arazi <tomascohen@gmail.com>
This commit is contained in:
Owen Leonard 2014-07-28 11:35:47 -04:00 committed by Tomas Cohen Arazi
parent 2db8ba555d
commit 5466a5f4ce
3 changed files with 27 additions and 2 deletions

File diff suppressed because one or more lines are too long

View file

@ -222,7 +222,7 @@
</td>
[% IF ( OpacRenewalAllowed && !( borrower.is_expired && borrower.BlockExpiredPatronOpacActions ) ) %]
<td class="renew">
[% IF ISSUE.renewed %]<span class="alert">Renewed!</span>[% END %]
[% IF ISSUE.renewed %]<span class="blabel label-success">Renewed!</span><br />[% END %]
[% IF ( ISSUE.status ) %]
[% IF ( canrenew ) %]
<input type="checkbox" name="item" value="[% ISSUE.itemnumber %]"/> <a href="/cgi-bin/koha/opac-renew.pl?from=opac_user&amp;item=[% ISSUE.itemnumber %]&amp;borrowernumber=[% ISSUE.borrowernumber %]">Renew</a>

View file

@ -694,6 +694,31 @@ th[scope=row] {
text-shadow: none;
}
.blabel {
background-color: #999999;
border-radius: 3px;
color: #ffffff;
display: inline-block;
font-weight: bold;
padding: 2px 4px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.label-important {
background-color: #b94a48;
}
.label-warning {
background-color: #f89406;
}
.label-success {
background-color: #468847;
}
.label-info {
background-color: #3a87ad;
}
.label-inverse {
background-color: #333333;
}
fieldset {
&.rows {