Bug 37795

Should also affect erm_sushi_harvester.inc and import_from_kbart_file.inc, though I don't know how to trigger either one to see.

Ah, lots of changes affecting it.

The colors from .progress-bar-success for green and .progress-bar-danger for red are now bg-success and bg-danger.

And .progress-bar is now flex-direction: column; which means that putting the number in a span, the "%" in text, and the labels "Not started" etc. in another span no longer works, because that puts them in a column where the number is invisibly off the top, the % shows, and the label is invisibly off the bottom.

Probably the labeling is also affected by overflow: hidden, and needs to add the class overflow-visible to the progress-bar, and then will need to set a text-color that is visible both on the filled and the unfilled part of the bar.

(In reply to Phil Ringnalda from comment #0)
> It had a neat centered progress bar...
> Now... the full width of the page

Outside the scope of this bug. It was in a class="dialog message" which was text-align: center and width: 65% max-width: 600px, now it's in a class="alert alert-info" which is none of those things, but for job-progress.inc it's up to the consumer to decide what to wrap it in.

I don't think there's any really good solution to the overflow problem.

I didn't notice it pre-BS5, but we actually had cropping of a sort then too: somewhere under 10-15%, there wouldn't be room for the <span>Started</span>, so it would wrap and thus become invisible, and at 1% there wouldn't be room for the "%".

Bootstrap's advice that if you have a long label you should use the class overflow-visible and set a text-color that will work on both the progress-bar color and the progress background-color kind of hand-waves around the problem that no such color exists, unless you make your progress-bar colors washed-out enough that black is readable on them. The best solution I see is to darken the progress background-color enough to make white text sort of visible on it.

Luckily, having a much wider progress bar now helps out: where before we were cropping up to 10-15% (depending on window size, text size, zoom, etc.), now with a pleasant sized window it's more like only up to 3%.

Created attachment 172930 [details] [review]
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

Created attachment 172993 [details] [review]
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
Signed-off-by: David Nind <david@davidnind.com>

Created attachment 173436 [details] [review]
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
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Nice work Phil, thanks for the fix.

Pushed for 24.11!

Well done everyone, thank you!