Bug 21516: (ALTERNATE) Request notes CSS bug makes them unreadable

This alternate patch makes multiple markup corrections to the ILL
requests templates. It reformats the request details to use a list,
making it consistent with similar interfaces (see patron details,
baskets in acquisitions). The display of notes has been changed so that
it uses a paragraph tag instead of <pre>.

To test, apply the patch and rebuild the staff client CSS.

- Manage an ILL request which has staff and OPAC notes. Everything
  should look readable.
- Running validation on the HTML should only return warnings coming from
  global include files (js_includes.inc).

Signed-off-by: Andrew Isherwood <andrew.isherwood@ptfs-europe.com>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2018-10-09 14:34:55 +00:00 committed by Nick Clemens
parent 2517147c30
commit 93d2c67b41
2 changed files with 77 additions and 100 deletions

View file

@ -1438,8 +1438,7 @@ div {
clear: left; clear: left;
float: left; float: left;
list-style-type: none; list-style-type: none;
padding-bottom: .2em; padding: .275em;
padding-top: .1em;
width: 100%; width: 100%;
} }
@ -1454,6 +1453,10 @@ div {
} }
} }
p {
margin-left: 10em;
}
span { span {
&.label { &.label {
float: left; float: left;
@ -3938,19 +3941,6 @@ span {
margin: .3em 0; margin: .3em 0;
} }
h1 {
margin: 1em 0;
}
h2 {
margin-bottom: 20px;
}
h3 {
margin-top: 20px;
}
.bg-info { .bg-info {
overflow: auto; overflow: auto;
position: relative; position: relative;
@ -4004,28 +3994,12 @@ span {
} }
} }
#ill-view-panel { .ill-view-panel {
margin-top: 15px; margin-top: 15px;
h3 {
margin-bottom: 10px;
}
h4 {
margin-bottom: 20px;
}
.notesopac { .notesopac {
display: inline-block; display: inline-block;
} }
.rows {
div {
height: 1em;
margin-bottom: 1em;
}
}
} }
#requestattributes { #requestattributes {

View file

@ -10,7 +10,7 @@
[% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %] [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
[% Asset.css("css/datatables.css") | $raw %] [% Asset.css("css/datatables.css") | $raw %]
[% INCLUDE 'datatables.inc' %] [% INCLUDE 'datatables.inc' %]
<script type="text/javascript"> <script>
//<![CDATA[ //<![CDATA[
$(document).ready(function() { $(document).ready(function() {
@ -503,7 +503,7 @@
[% ELSIF query_type == 'illview' %] [% ELSIF query_type == 'illview' %]
[% req_status = request.status %] [% req_status = request.status %]
<h1>Manage ILL request</h1> <h1>Manage ILL request</h1>
<div id="toolbar" class="btn-toolbar"> <div id="request-toolbar" class="btn-toolbar">
<a title="Edit request" id="ill-toolbar-btn-edit-action" class="btn btn-sm btn-default" href="/cgi-bin/koha/ill/ill-requests.pl?method=edit_action&amp;illrequest_id=[% request.illrequest_id | html %]"> <a title="Edit request" id="ill-toolbar-btn-edit-action" class="btn btn-sm btn-default" href="/cgi-bin/koha/ill/ill-requests.pl?method=edit_action&amp;illrequest_id=[% request.illrequest_id | html %]">
<span class="fa fa-pencil"></span> <span class="fa fa-pencil"></span>
Edit request Edit request
@ -521,79 +521,83 @@
Display supplier metadata Display supplier metadata
</a> </a>
</div> </div>
<div id="ill-view-panel" class="panel panel-default"> <div class="ill-view-panel panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3>Request details</h3> <h3>Request details</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<h4>Details from library</h4> <h4>Details from library</h4>
<div class="rows"> <div class="rows">
<div class="orderid"> <ol>
<li class="orderid">
<span class="label orderid">Order ID:</span> <span class="label orderid">Order ID:</span>
[% IF request.orderid %][% request.orderid | html %][% ELSE %]<span>N/A</span>[% END %] [% IF request.orderid %][% request.orderid | html %][% ELSE %]<span>N/A</span>[% END %]
</div> </li>
<div class="borrowernumber"> <li class="borrowernumber">
<span class="label borrowernumber">Patron:</span> <span class="label borrowernumber">Patron:</span>
[% borrowerlink = "/cgi-bin/koha/members/moremember.pl" _ "?borrowernumber=" _ request.patron.borrowernumber %] [% borrowerlink = "/cgi-bin/koha/members/moremember.pl" _ "?borrowernumber=" _ request.patron.borrowernumber %]
<a href="[% borrowerlink | url %]" title="View borrower details"> <a href="[% borrowerlink | url %]" title="View borrower details">
[% request.patron.firstname _ " " _ request.patron.surname _ " [" _ request.patron.cardnumber _ "]" | html %] [% request.patron.firstname _ " " _ request.patron.surname _ " [" _ request.patron.cardnumber _ "]" | html %]
</a> </a>
</div> </li>
<div class="biblio_id"> <li class="biblio_id">
<span class="label biblio_id">Bibliographic record ID:</span> <span class="label biblio_id">Bibliographic record ID:</span>
[% IF request.biblio_id %] [% IF request.biblio_id %]
<a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% request.biblio_id | uri %]">[% request.biblio_id | html %]</a> <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% request.biblio_id | uri %]">[% request.biblio_id | html %]</a>
[% ELSE %] [% ELSE %]
<span>N/A</span> <span>N/A</span>
[% END %] [% END %]
</div> </li>
<div class="branchcode"> <li class="branchcode">
<span class="label branchcode">Library:</span> <span class="label branchcode">Library:</span>
[% Branches.GetName(request.branchcode) | html %] [% Branches.GetName(request.branchcode) | html %]
</div> </li>
<div class="status"> <li class="status">
<span class="label status">Status:</span> <span class="label status">Status:</span>
[% request.capabilities.$req_status.name | html %] [% request.capabilities.$req_status.name | html %]
</div> </li>
<div class="updated"> <li class="updated">
<span class="label updated">Last updated:</span> <span class="label updated">Last updated:</span>
[% request.updated | $KohaDates with_hours => 1 | html %] [% request.updated | $KohaDates with_hours => 1 | html %]
</div> </li>
<div class="medium"> <li class="medium">
<span class="label medium">Request type:</span> <span class="label medium">Request type:</span>
[% type = request.get_type %] [% type = request.get_type %]
[% IF type %][% type | html %][% ELSE %]<span>N/A</span>[% END %] [% IF type %][% type | html %][% ELSE %]<span>N/A</span>[% END %]
</div> </li>
<div class="cost"> <li class="cost">
<span class="label cost">Cost:</span> <span class="label cost">Cost:</span>
[% IF request.cost %][% request.cost | html %][% ELSE %]<span>N/A</span>[% END %] [% IF request.cost %][% request.cost | html %][% ELSE %]<span>N/A</span>[% END %]
</div> </li>
<div class="price_paid"> <li class="price_paid">
<span class="label price_paid">Price paid:</span> <span class="label price_paid">Price paid:</span>
[% IF request.price_paid %][% request.price_paid | html %][% ELSE %]<span>N/A</span>[% END %] [% IF request.price_paid %][% request.price_paid | html %][% ELSE %]<span>N/A</span>[% END %]
</div> </li>
<div class="req_id"> <li class="req_id">
<span class="label req_id">Request number:</span> <span class="label req_id">Request number:</span>
[% request.id_prefix _ request.illrequest_id | html %] [% request.id_prefix _ request.illrequest_id | html %]
</div> </li>
<div class="notesstaff"> <li class="notesstaff">
<span class="label notes_staff">Staff notes:</span> <span class="label notes_staff">Staff notes:</span>
<pre>[% request.notesstaff | html %]</pre> <p>[% request.notesstaff | html %]</p>
</div> </li>
<div class="notesopac"> <li class="notesopac">
<span class="label notes_opac">Notes:</span> <span class="label notes_opac">Notes:</span>
<pre>[% request.notesopac | html %]</pre> <p>[% request.notesopac | html %]</p>
</div> </li>
</ol>
</div> </div>
<div class="rows"> <div class="rows">
<h4>Details from supplier ([% request.backend | html %])</h4> <h4>Details from supplier ([% request.backend | html %])</h4>
<ol>
[% FOREACH meta IN request.metadata %] [% FOREACH meta IN request.metadata %]
<div class="requestmeta-[% meta.key.replace('\s','_') | html %]"> <li class="requestmeta-[% meta.key.replace('\s','_') | html %]">
<span class="label">[% meta.key | html %]:</span> <span class="label">[% meta.key | html %]:</span>
[% meta.value | html %] [% meta.value | html %]
</div> </li>
[% END %] [% END %]
</ol>
</div> </div>
</div> </div>
</div> </div>
@ -622,7 +626,7 @@
</div> </div>
</div> </div>
<div id="ill-view-panel" class="panel panel-default"> <div class="ill-view-panel panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3>[% request.illcomments.count | html %] comments</h3> <h3>[% request.illcomments.count | html %] comments</h3>
</div> </div>
@ -649,7 +653,7 @@
<ol> <ol>
<li> <li>
<label class="required" for="comment">Comment: </label> <label class="required" for="comment">Comment: </label>
<textarea type="text" class="required" required="required" value="" cols="80" rows="10" id="comment" name="comment"></textarea> <textarea class="required" required="required" cols="80" rows="10" id="comment" name="comment"></textarea>
<span class="required">Required</span> <span class="required">Required</span>
</li> </li>
</ol> </ol>
@ -697,7 +701,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
[% TRY %] [% TRY %]
[% PROCESS backend_jsinclude %] [% PROCESS backend_jsinclude %]