Bug 7080 - Revised - Clean up interface on fine payment screens

- Move some content out of table cells - Improve table markup with <thead>, <tbody>, and <tfoot> - Improve breadcrumb specificity on paycollect.pl - Add clearer messages for different actions (Pay selected fines, pay an individual fine, etc. - Add client-side warning to pay.pl when writing-off all - Correcting terminology: When a verb, "write off," when a noun: "Writeoff." Revision: Correcting tab label case according to Bug 2780 guidelines Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de> I checked all 4 fine tabs and performed different fine actions. The layout on all pages looks clean and correct. I tested the new client-side warning and made sure it's translatable. Labels have proper capitalization. Signed-off-by: Paul Poulain <paul.poulain@biblibre.com> (cherry picked from commit 0f80707d7c) Signed-off-by: Chris Nighswonger <chris.nighswonger@gmail.com>
2011-10-21 10:19:30 -04:00 · 2011-10-21 10:19:30 -04:00 · 54ae78f629
parent 34d8c9765f
commit 54ae78f629
4 changed files with 106 additions and 108 deletions
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/mancredit.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/mancredit.tt
@ -27,8 +27,8 @@ $(document).ready(function(){
 <ul class="ui-tabs-nav">
 	<li><a href="/cgi-bin/koha/members/boraccount.pl?borrowernumber=[% borrowernumber %]">Account</a></li>
 	<li><a href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrowernumber %]" >Pay fines</a></li>
-	<li><a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrowernumber %]" >Create Manual Invoice</a></li>
-	<li class="ui-tabs-selected"><a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrowernumber %]" >Create Manual Credit</a></li>
+	<li><a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrowernumber %]" >Create manual invoice</a></li>
+	<li class="ui-tabs-selected"><a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrowernumber %]" >Create manual credit</a></li>
 </ul>
 <div class="tabs-container">

--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/maninvoice.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/maninvoice.tt
@ -27,8 +27,8 @@ $(document).ready(function(){
 <ul class="ui-tabs-nav">
 	<li><a href="/cgi-bin/koha/members/boraccount.pl?borrowernumber=[% borrowernumber %]">Account</a></li>
 	<li><a href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrowernumber %]" >Pay fines</a></li>
-	<li class="ui-tabs-selected"><a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrowernumber %]" >Create Manual Invoice</a></li>
-	<li><a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrowernumber %]" >Create Manual Credit</a></li>
+	<li class="ui-tabs-selected"><a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrowernumber %]" >Create manual invoice</a></li>
+	<li><a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrowernumber %]" >Create manual credit</a></li>
 </ul>
 <div class="tabs-container">

--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/pay.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/pay.tt
@ -1,19 +1,23 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Patrons &rsaquo; Pay Fines for  [% borrower.firstname %] [% borrower.surname %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
+<script type= "text/javascript">
+//<![CDATA[
+    $(document).ready(function(){
+        $("#woall").click(function(event){
+            var answer = confirm(_("Are you sure you want to write off [% total | format('%.2f') %] in outstanding fines? This cannot be undone!"));
+                if (!answer){
+                    event.preventDefault();
+                }
+        });
+    });
+//]]>
+</script>
 </head>
 <body>
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'patron-search.inc' %]

-<script type=text/javascript>
-
-function confirmWriteoffAll() {
-    return confirm(_("Are you sure you want to writeoff all fines?"));
-}
-
-</script>
-
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/members/members-home.pl">Patrons</a>  &rsaquo; Pay Fines for [% borrower.firstname %] [% borrower.surname %]</div>

 <div id="doc3" class="yui-t2">
@ -28,8 +32,8 @@ function confirmWriteoffAll() {
 <ul class="ui-tabs-nav">
 	<li><a href="/cgi-bin/koha/members/boraccount.pl?borrowernumber=[% borrower.borrowernumber %]">Account</a></li>
 	<li class="ui-tabs-selected"><a href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrower.borrowernumber %]" >Pay fines</a></li>
-	<li><a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrower.borrowernumber %]" >Create Manual Invoice</a></li>
-	<li><a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrower.borrowernumber %]" >Create Manual Credit</a></li>
+	<li><a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrower.borrowernumber %]" >Create manual invoice</a></li>
+	<li><a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrower.borrowernumber %]" >Create manual credit</a></li>
 </ul>
 <div class="tabs-container">

@ -38,6 +42,7 @@ function confirmWriteoffAll() {
 	<input type="hidden" name="borrowernumber" id="borrowernumber" value="[% borrower.borrowernumber %]" />

 <table>
+<thead>
 <tr>
 	<th>Fines &amp; Charges</th>
    <th>Sel</th>
@ -48,14 +53,21 @@ function confirmWriteoffAll() {
 	<th>Amount</th>
 	<th>Amount Outstanding</th>
 </tr>
-
+</thead>
+<tfoot>
+<tr>
+    <td class="total" colspan="7">Total Due:</td>
+    <td>[% total | format('%.2f') %]</td>
+</tr>
+</tfoot>
+<tbody>
 [% FOREACH account_grp IN accounts %]
    [% FOREACH line IN account_grp.accountlines %]
 <tr>
    <td>
    [% IF ( line.amountoutstanding > 0 ) %]
        <input type="submit" name="pay_indiv_[% line.accountno %]" value="Pay" />
-        <input type="submit" name="wo_indiv_[% line.accountno %]" value="Writeoff" />
+        <input type="submit" name="wo_indiv_[% line.accountno %]" value="Write off" />
    [% END %]
    <input type="hidden" name="itemnumber[% line.accountno %]" value="[% line.itemnumber %]" />
    <input type="hidden" name="description[% line.accountno %]" value="[% line.description %]" />
@ -89,15 +101,12 @@ function confirmWriteoffAll() {
 </tr>
 [% END %]
 [% END %]
-<tr>
-    <td class="total" colspan="7">Total Due:</td>
-    <td>[% total | format('%.2f') %]</td>
-</tr>
+</tbody>
 </table>
 <fieldset class="action">
-<input type="submit" name="paycollect"  value="Pay Amount" class="submit" />
-<input type="submit" name="woall"  value="Writeoff All" class="submit" onclick="return confirmWriteoffAll()" />
-<input type="submit" name="payselected"  value="Pay Selected" class="submit"/>
+<input type="submit" name="paycollect"  value="Pay amount" class="submit" />
+<input type="submit" name="woall"  id="woall" value="Write off all" class="submit" />
+<input type="submit" name="payselected"  value="Pay selected" class="submit" />
 <a class="cancel" href="/cgi-bin/koha/members/boraccount.pl?borrowernumber=[% borrower.borrowernumber %]">Cancel</a>
 </fieldset>
 </form>
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/paycollect.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/paycollect.tt
@ -57,7 +57,7 @@ function moneyFormat(textObj) {
 <body>
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'patron-search.inc' %]
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/members/members-home.pl">Patrons</a>  &rsaquo; Pay Fines for [% borrower.firstname %] [% borrower.surname %]</div>
+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/members/members-home.pl">Patrons</a>  &rsaquo; <a href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrower.borrowernumber %]">Pay Fines for [% borrower.firstname %] [% borrower.surname %]</a> &rsaquo; [% IF ( pay_individual ) %]Pay an individual fine[% ELSIF ( writeoff_individual ) %]Write off an individual fine[% ELSE %][% IF ( selected_accts ) %]Pay an amount toward selected fines[% ELSE %]Pay an amount toward all fines[% END %][% END %]</div>

 <div id="doc3" class="yui-t2">

@ -77,10 +77,10 @@ function moneyFormat(textObj) {
    <a href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrower.borrowernumber %]" >Pay fines</a>
    </li>
    <li>
-    <a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrower.borrowernumber %]" >Create Manual Invoice</a>
+    <a href="/cgi-bin/koha/members/maninvoice.pl?borrowernumber=[% borrower.borrowernumber %]" >Create manual invoice</a>
    </li>
    <li>
-    <a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrower.borrowernumber %]" >Create Manual Credit</a>
+    <a href="/cgi-bin/koha/members/mancredit.pl?borrowernumber=[% borrower.borrowernumber %]" >Create manual credit</a>
    </li>
 </ul>
 <div class="tabs-container">
@ -103,50 +103,50 @@ function moneyFormat(textObj) {
    <input type="hidden" name="amountoutstanding" id="amountoutstanding" value="[% amountoutstanding %]" />
    <input type="hidden" name="accountno" id="accountno" value="[% accountno %]" />
    <input type="hidden" name="title" id="title" value="[% title %]" />
+
+<fieldset class="rows">
+    <legend>Pay an individual fine</legend>
    <table>
-    <tr>
-        <th>Description</th>
-        <th>Account Type</th>
-        <th>Notify id</th>
-        <th>Level</th>
-        <th>Amount</th>
-        <th>Amount Outstanding</th>
-    </tr>
-    <tr>
-        <td>
-            [% description %] [% title  %]
-        </td>
-        <td>[% accounttype %]</td>
-        <td>[% notify_id %]</td>
-        <td>[% notify_level %]</td>
-        <td class="debit">[% amount | format('%.2f') %]</td>
-        <td class="debit">[% amountoutstanding | format('%.2f') %]</td>
-    </tr>
-    <tr>
-        <td>Total Amount Payable : </td>
-        <td>[% amountoutstanding | format('%.2f') %]</td>
-        <td colspan="4"></td>
-    </tr>
-    <tr><td colspan="6"> </td></tr>
-    <tr>
-        <td>Collect From Patron: </td>
-        <td>
+    <thead><tr>
+            <th>Description</th>
+            <th>Account Type</th>
+            <th>Notify id</th>
+            <th>Level</th>
+            <th>Amount</th>
+            <th>Amount Outstanding</th>
+        </tr></thead>
+    <tfoot>
+        <td colspan="5">Total amount payable:</td><td>[% amountoutstanding | format('%.2f') %]</td>
+    </tfoot>
+    <tbody><tr>
+            <td>
+                [% description %] [% title  %]
+            </td>
+            <td>[% accounttype %]</td>
+            <td>[% notify_id %]</td>
+            <td>[% notify_level %]</td>
+            <td class="debit">[% amount | format('%.2f') %]</td>
+            <td class="debit">[% amountoutstanding | format('%.2f') %]</td>
+        </tr></tbody>
+</table>
+
+<ol>
+
+    <li>
+        <label for="paid">Collect from patron: </label>
            <!-- default to paying all -->
        <input name="paid" id="paid" value="[% amountoutstanding | format('%.2f') %]" onchange="moneyFormat(document.payindivfine.paid)"/>
-        </td>
-    </tr>
-    <tr><td colspan="6"></td></tr>
-    <tr>
-        <td colspan="6">
-        <input type="submit" name="submitbutton" value="Confirm" />
-        <a class="cancel" href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrower.borrowernumber %]">Cancel</a>
-        </td>
-    </tr>
+    </li>
+</ol>
+</fieldset>

-    </table>
+    <div class="action"><input type="submit" name="submitbutton" value="Confirm" />
+        <a class="cancel" href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrower.borrowernumber %]">Cancel</a></div>
    </form>
 [% ELSIF ( writeoff_individual ) %]
    <form name="woindivfine" action="/cgi-bin/koha/members/pay.pl" method="post" >
+    <fieldset class="rows">
+    <legend>Write off an individual fine</legend>
    <input type="hidden" name="borrowernumber" id="borrowernumber" value="[% borrower.borrowernumber %]" />
    <input type="hidden" name="pay_individual" id="pay_individual" value="[% pay_individual %]" />
    <input type="hidden" name="itemnumber" id="itemnumber" value="[% itemnumber %]" />
@ -159,33 +159,27 @@ function moneyFormat(textObj) {
    <input type="hidden" name="accountno" id="accountno" value="[% accountno %]" />
    <input type="hidden" name="title" id="title" value="[% title %]" />
    <table>
-    <tr>
-        <th>Description</th>
-        <th>Account Type</th>
-        <th>Notify id</th>
-        <th>Level</th>
-        <th>Amount</th>
-        <th>Amount Outstanding</th>
-    </tr>
-    <tr>
-        <td>[% description %] [% title %]</td>
-        <td>[% accounttype %]</td>
-        <td>[% notify_id %]</td>
-        <td>[% notify_level %]</td>
-        <td class="debit">[% amount | format('%.2f') %]</td>
-        <td class="debit">[% amountoutstanding | format('%.2f') %]</td>
-    </tr>
-    <tr><td colspan="6"> </td></tr>
-    <tr><td colspan="6"><strong>Writeoff This Charge?</strong></td></tr>
-    <tr><td> </td></tr>
-    <tr>
-        <td colspan="6">
-        <input type="submit" name="confirm_writeoff" id="confirm_writeoff" value="Confirm" />
-        <a class="cancel" href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrower.borrowernumber %]">Cancel</a>
-        </td>
-    </tr>
-
+    <thead><tr>
+            <th>Description</th>
+            <th>Account Type</th>
+            <th>Notify id</th>
+            <th>Level</th>
+            <th>Amount</th>
+            <th>Amount Outstanding</th>
+        </tr></thead>
+    <tfoot><td colspan="5">Total amount to be written off:</td><td>[% amountoutstanding | format('%.2f') %]</td></tfoot>
+    <tbody><tr>
+            <td>[% description %] [% title %]</td>
+            <td>[% accounttype %]</td>
+            <td>[% notify_id %]</td>
+            <td>[% notify_level %]</td>
+            <td class="debit">[% amount | format('%.2f') %]</td>
+            <td class="debit">[% amountoutstanding | format('%.2f') %]</td>
+        </tr></tbody>
    </table>
+    </fieldset>
+    <div class="action"><input type="submit" name="confirm_writeoff" id="confirm_writeoff" value="Write off this charge" />
+        <a class="cancel" href="/cgi-bin/koha/members/pay.pl?borrowernumber=[% borrower.borrowernumber %]">Cancel</a></div>
    </form>
 [% ELSE %]

@ -194,27 +188,22 @@ function moneyFormat(textObj) {
    <input type="hidden" name="selected_accts" id="selected_accts" value="[% selected_accts %]" />
    <input type="hidden" name="total" id="total" value="[% total %]" />

-    <table>
-    <tr>
-        <td>Total Amount Outstanding : </td>
-        <td class="debit">[% total | format('%.2f') %]</td>
-    </tr>
-    <tr><td colspan="2"> </td></tr>
-    <tr>
-        <td>Collect From Patron: </td>
-        <td>
+    <fieldset class="rows">
+    [% IF ( selected_accts ) %]<legend>Pay an amount toward selected fines</legend>[% ELSE %]<legend>Pay an amount toward all fines</legend>[% END %]
+    <ol>
+        <li>
+            <span class="label">Total amount outstanding: </span>
+            <span class="debit">[% total | format('%.2f') %]</span>
+        </li>
+    <li>
+        <label for="paid">Collect from patron: </label>
        <!-- default to paying all -->
        <input name="paid" id="paid" value="[% total | format('%.2f') %]" onchange="moneyFormat(document.payfine.paid)"/>
-        </td>
-    </tr>
-    <tr><td></td></tr>
-    <tr>
-        <td colspan="2">
-        <input type="submit" name="submitbutton" value="Confirm" />
-        <a class="cancel" href="/cgi-bin/koha/members/boraccount.pl?borrowernumber=[% borrower.borrowernumber %]">Cancel</a>
-        </td>
-    </tr>
-    </table>
+    </li>
+    </ol>
+    </fieldset>
+    <div class="action"><input type="submit" name="submitbutton" value="Confirm" />
+        <a class="cancel" href="/cgi-bin/koha/members/boraccount.pl?borrowernumber=[% borrower.borrowernumber %]">Cancel</a></div>
    </form>
 [% END %]
 </div></div>