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>
#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%;
//]]>
</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' %]
<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>
[% 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>
[% 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 ) %]
<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>
</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" />
<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>
//]]>
</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">
[% 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 ) %]
<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">
</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>
</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>
<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">
<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>
</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>
</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="" />
</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>
</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>
</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>%
projects / koha-equinox.git / commitdiff