Bug 16538: Improve the style of progress bars
This patch updates the style of progress bars to make them a little nicer. Progress bars in the staff client are not built in a consisten way. Some have been updated to use the <progress> element and some have not. This patch improves some styling common to both kinds. Other changes: - Redundant in-page CSS has been removed from many pages. - An invalid "min" attribute has been removed from several instances of <progress>. - Corrected capitalization. - Fixed incorrectly quoted attributes. - Added missing form "action" attributes. To test, clear your browser cache if necessary. Apply the patch and test uploads on the following pages: - Circulation -> Offline circulation file upload - Tools -> Batch item modification - Tools -> Batch record modification - Tools -> Stage MARC records for import - Tools -> Manage staged MARC records - Tools -> Upload local cover image - Tools -> Upload In all cases, progress bars should look improved and work correctly. Test Tools -> Batch item deletion. Unused background job handling markup has been removed. Deletion processing should work correctly. Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com> Works as advertised Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
This commit is contained in:
parent
b7c61a5d12
commit
65b2da08c9
9 changed files with 41 additions and 38 deletions
|
|
@ -2476,11 +2476,33 @@ fieldset.rows table.mceListBox {
|
|||
|
||||
#jobpanel,#jobstatus,#jobfailed { display : none; }
|
||||
#jobstatus { margin:.4em; }
|
||||
#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('../img/progress.png') -300px 0px no-repeat; }
|
||||
|
||||
#jobprogress{
|
||||
display: inline-block;
|
||||
width:200px;
|
||||
height:10px;
|
||||
border:1px solid #666;
|
||||
background:url('../img/progress.png') -300px 0px no-repeat;
|
||||
}
|
||||
|
||||
.progress_panel {
|
||||
clear: both;
|
||||
font-size: 120%;
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
border: 2px solid #EEE;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
progress {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#selections { width : 100%; white-space : normal; }
|
||||
#selections span { margin:3px;padding:3px;background-color:#EBF3FF;-moz-border-radius:5px;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
|
||||
#selections span.selected { background-color : #CCE0FC; }
|
||||
#selections input { vertical-align:middle;margin:0 2px; }
|
||||
|
||||
#changepasswordf input[type="text"],
|
||||
#changepasswordf input[type="password"] {
|
||||
font-size: 140%;
|
||||
|
|
|
|||
|
|
@ -66,10 +66,6 @@ function CheckForm(f) {
|
|||
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
#fileuploadstatus,#jobstatus { margin:.4em; }
|
||||
#fileuploadprogress,#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; }
|
||||
</style>
|
||||
</head>
|
||||
<body id="ocirc_process_koc" class="circ ocirc">
|
||||
[% INCLUDE 'header.inc' %]
|
||||
|
|
@ -109,7 +105,7 @@ function CheckForm(f) {
|
|||
<fieldset class="action"><input type="button" class="submit" value="Upload file" id="upload_file" /></fieldset>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="fileuploadstatus" style="display:none">Upload progress: <progress id="fileuploadprogress" min="0" max="100" value="0"></progress> <span class="fileuploadpercent">0</span>%</div>
|
||||
<div id="fileuploadstatus" class="progress_panel" style="display:none">Upload progress: <progress id="fileuploadprogress" max="100" value="0"></progress> <span class="fileuploadpercent">0</span>%</div>
|
||||
<div id="fileuploadfailed" style="display:none"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
[% INCLUDE 'doc-head-open.inc' %]
|
||||
<title>Koha › Tools › Batch item deletion</title>
|
||||
[% INCLUDE 'doc-head-close.inc' %]
|
||||
<script type="text/javascript" src="[% interface %]/[% theme %]/js/background-job-progressbar.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
|
||||
[% INCLUDE 'datatables.inc' %]
|
||||
<script type="text/javascript" src="[% interface %]/[% theme %]/js/pages/batchMod.js"></script>
|
||||
|
|
@ -42,8 +41,8 @@ $(document).ready(function(){
|
|||
[% IF ( show ) %]<h1>Batch item deletion</h1>[% ELSE %]<h1>Batch item deletion results</h1>[% END %]
|
||||
[% IF ( barcode_not_unique ) %]<div class="dialog alert"><strong>Error saving item</strong>: Barcode must be unique.</div>[% END %]
|
||||
[% IF ( no_next_barcode ) %]<div class="dialog alert"><strong>Error saving items</strong>: Unable to automatically determine values for barcodes. No item has been inserted.</div>[% END %]
|
||||
[% IF ( book_on_loan ) %]<div class="dialog alert"><strong>Cannot Delete</strong>: item is checked out.</div>[% END %]
|
||||
[% IF ( book_reserved ) %]<div class="dialogalert"><strong>Cannot Delete</strong>: item has a waiting hold.</div>[% END %]
|
||||
[% IF ( book_on_loan ) %]<div class="dialog alert"><strong>Cannot delete</strong>: item is checked out.</div>[% END %]
|
||||
[% IF ( book_reserved ) %]<div class="dialogalert"><strong>Cannot delete</strong>: item has a waiting hold.</div>[% END %]
|
||||
|
||||
[% UNLESS ( action ) %]
|
||||
|
||||
|
|
@ -136,15 +135,11 @@ $(document).ready(function(){
|
|||
<p>This will delete [% IF ( too_many_items ) %]all the[% ELSE %]the selected[% END %] items.</p>
|
||||
<input type="hidden" name="del" value="1" />
|
||||
<fieldset class="action">
|
||||
<div id="jobpanel">
|
||||
<div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobfailed"></div>
|
||||
</div>
|
||||
<input type="checkbox" name="del_records" id="del_records" /> <label for="del_records">Delete records if no items remain.</label>
|
||||
[% IF too_many_items %]
|
||||
<input type="submit" id="mainformsubmit" name="mainformsubmit" value="Delete ALL submitted items" />
|
||||
<input type="submit" name="mainformsubmit" value="Delete ALL submitted items" />
|
||||
[% ELSE %]
|
||||
<input type="submit" id="mainformsubmit" name="mainformsubmit" value="Delete selected items" />
|
||||
<input type="submit" name="mainformsubmit" value="Delete selected items" />
|
||||
[% END %]
|
||||
|
||||
<a href="/cgi-bin/koha/tools/batchMod.pl?del=1" class="cancel">Cancel</a>
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@ $(document).ready(function(){
|
|||
</fieldset>
|
||||
<fieldset class="action">
|
||||
<div id="jobpanel">
|
||||
<div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobfailed"></div>
|
||||
</div>
|
||||
<input type="submit" id="mainformsubmit" value="Save" />
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@ $(document).ready(function() {
|
|||
<a class="cancel" href="/cgi-bin/koha/tools/batch_record_modification.pl">Cancel</a>
|
||||
</fieldset>
|
||||
<div id="jobpanel">
|
||||
<div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobfailed"></div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -152,9 +152,7 @@ $(document).ready(function(){
|
|||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
#jobpanel,#jobstatus,#jobfailed { display : none; }
|
||||
#jobstatus { margin:.4em; }
|
||||
#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; } span.change-status { font-style:italic; color:#666; display:none; }#marcPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #marcPreview { margin: 0; width : auto; } }
|
||||
#jobpanel,#jobstatus,#jobfailed { display : none; }
|
||||
</style>
|
||||
</head>
|
||||
<body id="tools_manage-marc-import" class="tools">
|
||||
|
|
@ -360,7 +358,7 @@ $(document).ready(function(){
|
|||
[% END %]
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="jobpanel"><div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobpanel"><div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobfailed"></div></div>
|
||||
[% END %]
|
||||
[% IF ( can_revert ) %]
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@
|
|||
|
||||
<style type="text/css">
|
||||
#fileuploadstatus,#fileuploadfailed,#fileuploadcancel,#jobpanel,#jobstatus,#jobfailed { display : none; }
|
||||
#fileuploadstatus,#jobstatus { margin:.4em; }
|
||||
#fileuploadprogress,#jobprogress { width:150px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; }
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
@ -154,8 +152,8 @@ function cbUpload( status, fileid ) {
|
|||
</fieldset>
|
||||
|
||||
<div id="fileuploadpanel">
|
||||
<div id="fileuploadstatus">Upload progress:
|
||||
<progress id="fileuploadprogress" min="0" max="100" value="0">
|
||||
<div id="fileuploadstatus" class="progress_panel">Upload progress:
|
||||
<progress id="fileuploadprogress" max="100" value="0">
|
||||
</progress>
|
||||
<span class="fileuploadpercent">0</span>%
|
||||
</div>
|
||||
|
|
@ -266,7 +264,7 @@ function cbUpload( status, fileid ) {
|
|||
</fieldset>
|
||||
<fieldset class="action"><input type="button" id="mainformsubmit" value="Stage for import" /></fieldset>
|
||||
|
||||
<div id="jobpanel"><div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobpanel"><div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobfailed"></div></div>
|
||||
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@
|
|||
|
||||
<style type="text/css">
|
||||
#fileuploadstatus,#fileuploadfailed,#jobpanel,#jobstatus,#jobfailed { display : none; }
|
||||
#fileuploadstatus,#jobstatus { margin:.4em; }
|
||||
#fileuploadprogress,#jobprogress { width:150px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; }
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
@ -89,7 +87,7 @@ $(document).ready(function(){
|
|||
<ul>
|
||||
<li>Select an image file or ZIP file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
|
||||
</ul>
|
||||
<form method="post" action="[% SCRIPT_NAME %]" id="uploadfile" enctype="multipart/form-data">
|
||||
<form method="post" action="/cgi-bin/koha/tools/upload-cover-image.pl" id="uploadfile" enctype="multipart/form-data">
|
||||
<fieldset class="rows" id="uploadform">
|
||||
<legend>Upload images</legend>
|
||||
<ol>
|
||||
|
|
@ -104,8 +102,8 @@ $(document).ready(function(){
|
|||
</fieldset>
|
||||
|
||||
<div id="uploadpanel">
|
||||
<div id="fileuploadstatus">Upload progress:
|
||||
<progress min="0" max="100" value="0" id="fileuploadprogress">
|
||||
<div id="fileuploadstatus" class="progress_panel">Upload progress:
|
||||
<progress max="100" value="0" id="fileuploadprogress">
|
||||
</progress>
|
||||
<span class="fileuploadpercent">0</span>%
|
||||
</div>
|
||||
|
|
@ -113,7 +111,7 @@ $(document).ready(function(){
|
|||
</div>
|
||||
</form>
|
||||
|
||||
<form method="post" id="processfile" action="[% SCRIPT_NAME %]" enctype="multipart/form-data">
|
||||
<form method="post" id="processfile" action="/cgi-bin/koha/tools/upload-cover-image.pl" enctype="multipart/form-data">
|
||||
<fieldset class="rows">
|
||||
<input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
|
||||
<input type="hidden" name="runinbackground" id="runinbackground" value="" />
|
||||
|
|
@ -128,7 +126,7 @@ $(document).ready(function(){
|
|||
</li>
|
||||
<li class="radio">
|
||||
[% IF (filetype == 'image' ) %]<input type="radio" id="image" name="filetype" value="image" checked="checked" />[% ELSE %]<input type="radio" id="image" name="filetype" value="image" />[% END %]
|
||||
<label for="imagefile">Image file</label>
|
||||
<label for="image">Image file</label>
|
||||
</li>
|
||||
<li class="radio">
|
||||
[% IF ( filetype == 'image' ) %]<span id="bibnum">[% ELSE %]<span id="bibnum" style="display: none">[% END %]<label for="biblionumber">Enter cover biblionumber: </label><input type="text" id="biblionumber" name="biblionumber" value="[% biblionumber %]" size="15" /></span>
|
||||
|
|
@ -145,10 +143,6 @@ $(document).ready(function(){
|
|||
</ol>
|
||||
</fieldset>
|
||||
<fieldset class="action"><input type="submit" value="Process images" /></fieldset>
|
||||
|
||||
<div id="jobpanel"><div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
|
||||
<div id="jobfailed"></div></div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
</fieldset>
|
||||
</fieldset>
|
||||
<div id="fileuploadpanel">
|
||||
<div id="fileuploadstatus">Upload progress:
|
||||
<div id="fileuploadstatus" class="progress_panel">Upload progress:
|
||||
<progress id="fileuploadprogress" max="100" value="0">
|
||||
</progress>
|
||||
<span class="fileuploadpercent">0</span>%
|
||||
|
|
|
|||
Loading…
Reference in a new issue