Bugzilla – Attachment 172930 Details for
Bug 37795
job-progress.inc progress bar broken by Bootstrap5 upgrade
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 37795: Adjust job-progress.inc for Bootstrap 5 changes
Bug-37795-Adjust-job-progressinc-for-Bootstrap-5-c.patch (text/plain), 7.14 KB, created by
Phil Ringnalda
on 2024-10-17 20:46:25 UTC
(
hide
)
Description:
Bug 37795: Adjust job-progress.inc for Bootstrap 5 changes
Filename:
MIME Type:
Creator:
Phil Ringnalda
Created:
2024-10-17 20:46:25 UTC
Size:
7.14 KB
patch
obsolete
>From 52788b435786d3bcbad8b2a9af1b37080e12f41b Mon Sep 17 00:00:00 2001 >From: Phil Ringnalda <phil@chetcolibrary.org> >Date: Fri, 11 Oct 2024 15:54:50 -0700 >Subject: [PATCH] Bug 37795: Adjust job-progress.inc for Bootstrap 5 changes > >Four main changes: > >The color classes progress-bar-success and progress-bar-danger are now named >bg-success and bg-danger. > >The aria attributes have moved from the progress-bar to the progress wrapper. >Having them on the progress-bar is still supported for BS5, but won't be in >BS6, so we might as well move them now rather than forgetting to move them >later. > >Having the percentage number in a span, the % symbol in text, and the label >for "Not started" "Started" "Finished" "Failed" in another span no longer >works because the progress-bar content is in a column flexbox. Just setting >all of it at once in the content of the progress-bar works fine. > >Before, overflow from the label being longer than the progress-bar happened >by wrapping the "%" and "Started" invisibly down below the progress-bar. >Now it is cropped off by overflow: hidden, so we have to deal with showing >"2% Star" rather than showing "2%" and dropping the whole "Started" like >we did before. The best solution seems to be making the background of the >progress div, which is what shows to the right of the filled part of the >progress-bar, a little darker grey so white text is readable if you squint. > >Test plan: > 1. You need enough records to import so that you can at least see a bit of > progress before it finishes. Ideally, you would have a file of 10K or > so bibs, but with ktd, you can have 400-odd: Cataloging - Export catalog > data, change the Output format to XML and the filename to koha.marcxml > and export. > 2. Cataloging - Stage records for import, Browse to your file, Upload file. > Since you named it koha.marcxml, it's recognized as MARCXML and you can > just click Stage for import > 3. Without the patch, at this point you get an orange full-width bar, with > a white "%" in the middle, which doesn't change even after the "View > batch" link appears signalling it's done. With the patch, you start with > an orange bar labelled "0% Not started" which changes to a green "0.00% > Started" that animates too quickly to read to "100% Finished". Right > click the bar, Inspect, double-click the "width: 100%" to edit it, click > past the 100 and delete the 00 and press Enter to see a static 1%. You > should be able to read the "100% Finished" even spread across the green > and dark gray, at least by selecting the text if no other way. > >Sponsored-by: Chetco Community Public Library >--- > .../prog/en/includes/job_progress.inc | 5 ++-- > .../prog/en/includes/str/job_progress.inc | 1 + > .../intranet-tmpl/prog/js/job_progress.js | 27 +++++++++---------- > 3 files changed, 16 insertions(+), 17 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc >index 14ecb96083..7241ce8348 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc >@@ -1,5 +1,4 @@ >-<div class="progress"> >- <div id="progress-bar-[% job_id | html %]" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> >- <span id="job-percent-[% job_id | html %]">0</span>% <span id="job-status-[% job_id | html %]"></span> >+<div class="progress bg-dark-subtle" id="progress-[% job_id | html %]" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> >+ <div class="progress-bar overflow-visible" id="progress-bar-[% job_id | html %]"> > </div> > </div> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc >index 7fc7f2a349..7e70975462 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc >@@ -4,4 +4,5 @@ > var JOB_PROGRESS_STARTED = _("Started"); > var JOB_PROGRESS_FINISHED = _("Finished"); > var JOB_PROGRESS_FAILED = _("Failed"); >+ var JOB_PROGRESS_PERCENT = _("%"); > </script> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/job_progress.js b/koha-tmpl/intranet-tmpl/prog/js/job_progress.js >index acd75e3d2a..3ae641dcf8 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/job_progress.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/job_progress.js >@@ -3,30 +3,29 @@ function updateProgress(job_id, callbacks) { > let recheck = true; > > if ( job.status == "new" ) { >- $('#job-percent-' + job_id).text(0); >- $('#job-status-' + job_id).text(JOB_PROGRESS_NOT_STARTED); >- $('#progress-bar-' + job_id).attr('aria-valuenow', 0).css("width", "100%"); >+ $('#progress-' + job_id).attr('aria-valuenow', 0); >+ $('#progress-bar-' + job_id).width("100%"); >+ $('#progress-bar-' + job_id).text("0" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_NOT_STARTED); > } else if ( job.status == "started" ) { > const progress = job["progress"]; > const size = job["size"]; > const percent = progress > 0 ? ( progress / size ) * 100 : 0; >- $('#job-percent-' + job_id).text(percent.toFixed(2)); >- $('#job-status-' + job_id).text(JOB_PROGRESS_STARTED); >- $('#progress-bar-' + job_id).attr('aria-valuenow', percent); >+ $('#progress-' + job_id).attr('aria-valuenow', percent); > $('#progress-bar-' + job_id).width(Math.floor(percent) +"%"); >+ $('#progress-bar-' + job_id).text(percent.toFixed(2) + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_STARTED); > typeof callbacks.progress_callback === 'function' && callbacks.progress_callback(); > } else if ( job.status == "finished" ) { >- $('#job-percent-' + job_id).text(100); >- $('#job-status-' + job_id).text(JOB_PROGRESS_FINISHED); >- $('#progress-bar-' + job_id).addClass("progress-bar-success"); >- $('#progress-bar-' + job_id).attr('aria-valuenow', 100).css("width", "100%"); >+ $('#progress-bar-' + job_id).addClass("bg-success"); >+ $('#progress-' + job_id).attr('aria-valuenow', 100); >+ $('#progress-bar-' + job_id).css("width", "100%"); >+ $('#progress-bar-' + job_id).text("100" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_FINISHED); > recheck = false; > typeof callbacks.finish_callback === 'function' && callbacks.finish_callback(); > } else if ( job.status == "failed" ) { >- $('#job-percent-' + job_id).text(0); >- $('#job-status-' + job_id).text(JOB_PROGRESS_FAILED); >- $('#progress-bar-' + job_id).addClass("progress-bar-danger"); >- $('#progress-bar-' + job_id).attr('aria-valuenow', 0).css("width", "100%"); >+ $('#progress-bar-' + job_id).addClass("bg-danger"); >+ $('#progress' + job_id).attr('aria-valuenow', 0); >+ $('#progress-bar-' + job_id).css("width", "100%"); >+ $('#progress-bar-' + job_id).text("0" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_FAILED); > recheck = false; > } > >-- >2.44.0
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=172930">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 37795
:
172930
|
172993
|
173436