Bug 39947

Summary: Use bg-*-subtle in preference to bg-* Bootstrap classes
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: Needs documenting --- QA Contact: Martin Renvoize (ashimema) <martin.renvoize>
Severity: minor    
Priority: P5 - low CC: david, fridolin.somers, martin.renvoize
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: Small patch Documentation contact:
Documentation submission: Text to go in the release notes:
This fixes some Bootstrap color classes. It removes a few instances of the "bg-*" class from templates (used in a few places such as bg-info, bg-danger, etc.) as the styles don't really fit with the staff interface's color palette. Examples include the circulation and fine rules page and the patron import tool page. In the places where we don't want to use the corresponding alert classes, it adds some CSS so that we can safely use the ".bg-*-subtle" class to a div with ".page-section.". (This is related to Bug 39274 - HTML bg-* elements are low contrast, added to Koha 25.05, and Bug 35402 - Update the OPAC and staff interface to Bootstrap 5, added to Koha 24.11.)
Version(s) released in:
25.11.00,25.05.01
Circulation function:
Bug Depends on: 39274    
Bug Blocks:    
Attachments: Bug 39947: Do not use bg-* Bootstrap classes
Bug 39947: Do not use bg-* Bootstrap classes
Bug 39947: Do not use bg-* Bootstrap classes
Bug 39947: Do not use bg-* Bootstrap classes

Description Owen Leonard 2025-05-20 18:07:52 UTC
Another round of corrections to the way we use Bootstrap color classes:

We use Bootstrap's "bg-*" class in a few places (bg-info, bg-danger, etc) and it doesn't really fit with the staff interface's color palette. In those places where we don't want to use the corresponding alert classes we should be using .bg-*-subtle.
Comment 1 Owen Leonard 2025-05-21 11:46:27 UTC Comment hidden (obsolete)
Comment 2 David Nind 2025-05-21 21:19:12 UTC
The patch no longer applies 8-(...

git bz apply 39947

Bug 39947 - Do not use bg-* Bootstrap classes

182687 - Bug 39947: Do not use bg-* Bootstrap classes

Apply? [(y)es, (n)o, (i)nteractive] y
Applying: Bug 39947: Do not use bg-* Bootstrap classes
Using index info to reconstruct a base tree...
M	koha-tmpl/intranet-tmpl/prog/en/modules/admin/smart-rules.tt
Falling back to patching base and 3-way merge...
Auto-merging koha-tmpl/intranet-tmpl/prog/en/modules/admin/smart-rules.tt
CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/modules/admin/smart-rules.tt
error: Failed to merge in the changes.
Patch failed at 0001 Bug 39947: Do not use bg-* Bootstrap classes
Comment 3 Owen Leonard 2025-05-22 11:04:51 UTC
Created attachment 182725 [details] [review]
Bug 39947: Do not use bg-* Bootstrap classes

This patch removes a few instances of the "bg-*" class from our
templates, and adds some CSS to ensure that we can safely add the
".bg-*-subtle" class to a div with ".page-section."

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

- Go to Administration -> Circulation and fine rules. The information
  about rules specificity should have a pale blue background matching
  the color found in an "info" style alert.
- Go to Tools -> Import patrons. The "Notes" section should match what
  you saw in the previous step.
  NOTE: I made a small change to whitespace in the markup of this
  section to prevent the database column list from displaying without
  line breaks--an issue introduced by the global tidy.
- Go to Authorities and perform a search which will return results.
  - Click Actions -> Merge on one of the results. An "info" style alert
    should be shown at the top of the page, "Merging with authority..."
  - Without completing a merge, go to the Authorities home page. You
    should see an identical alert.
- In KTD, bibliographic record 369 can be used to test errors related to
  encoding problems:
  - Go to http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=369
    and confirm that you see a "warning" style alert (a pale yellow
    background).
  - Edit that record and confirm you see a similar error messages on
    that page.

Sponsored-by: Athens County Public Libraries
Comment 4 David Nind 2025-05-22 14:15:18 UTC
Created attachment 182734 [details] [review]
Bug 39947: Do not use bg-* Bootstrap classes

This patch removes a few instances of the "bg-*" class from our
templates, and adds some CSS to ensure that we can safely add the
".bg-*-subtle" class to a div with ".page-section."

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

- Go to Administration -> Circulation and fine rules. The information
  about rules specificity should have a pale blue background matching
  the color found in an "info" style alert.
- Go to Tools -> Import patrons. The "Notes" section should match what
  you saw in the previous step.
  NOTE: I made a small change to whitespace in the markup of this
  section to prevent the database column list from displaying without
  line breaks--an issue introduced by the global tidy.
- Go to Authorities and perform a search which will return results.
  - Click Actions -> Merge on one of the results. An "info" style alert
    should be shown at the top of the page, "Merging with authority..."
  - Without completing a merge, go to the Authorities home page. You
    should see an identical alert.
- In KTD, bibliographic record 369 can be used to test errors related to
  encoding problems:
  - Go to http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=369
    and confirm that you see a "warning" style alert (a pale yellow
    background).
  - Edit that record and confirm you see a similar error messages on
    that page.

Sponsored-by: Athens County Public Libraries
Signed-off-by: David Nind <david@davidnind.com>
Comment 5 Martin Renvoize (ashimema) 2025-05-22 16:09:14 UTC
Created attachment 182743 [details] [review]
Bug 39947: Do not use bg-* Bootstrap classes

This patch removes a few instances of the "bg-*" class from our
templates, and adds some CSS to ensure that we can safely add the
".bg-*-subtle" class to a div with ".page-section."

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

- Go to Administration -> Circulation and fine rules. The information
  about rules specificity should have a pale blue background matching
  the color found in an "info" style alert.
- Go to Tools -> Import patrons. The "Notes" section should match what
  you saw in the previous step.
  NOTE: I made a small change to whitespace in the markup of this
  section to prevent the database column list from displaying without
  line breaks--an issue introduced by the global tidy.
- Go to Authorities and perform a search which will return results.
  - Click Actions -> Merge on one of the results. An "info" style alert
    should be shown at the top of the page, "Merging with authority..."
  - Without completing a merge, go to the Authorities home page. You
    should see an identical alert.
- In KTD, bibliographic record 369 can be used to test errors related to
  encoding problems:
  - Go to http://localhost:8081/cgi-bin/koha/catalogue/detail.pl?biblionumber=369
    and confirm that you see a "warning" style alert (a pale yellow
    background).
  - Edit that record and confirm you see a similar error messages on
    that page.

Sponsored-by: Athens County Public Libraries
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Comment 6 Lucas Gass (lukeg) 2025-06-02 18:24:33 UTC
Nice work everyone!

Pushed to main for 25.11
Comment 7 Fridolin Somers 2025-06-18 12:53:34 UTC
Depends on Bug 39274 not in 24.11.x