Bugzilla – Attachment 186268 Details for
Bug 39274
HTML bg-* elements are low contrast
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 39274: [24.11.x] Non public notes are low contrast in the issues table - Previous checkouts
Bug-39274-2411x-Non-public-notes-are-low-contrast-.patch (text/plain), 25.39 KB, created by
Owen Leonard
on 2025-09-08 18:21:35 UTC
(
hide
)
Description:
Bug 39274: [24.11.x] Non public notes are low contrast in the issues table - Previous checkouts
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2025-09-08 18:21:35 UTC
Size:
25.39 KB
patch
obsolete
>From d0e58541e5c0085a631ee0350703413f512c431b Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Mon, 10 Mar 2025 16:23:02 +0000 >Subject: [PATCH] Bug 39274: [24.11.x] Non public notes are low contrast in the > issues table - Previous checkouts > >This patch reflects some rethinking on my part about how the Bootstrap >color classes are meant to be used, and makes some changes which I hope >will be more consistent with the Bootstrap 5 documentation while keeping >our interface usable. > >The main difference is in the use of the classes "text-bg-*" and >"bg-*-subtle." For example the class "bg-info-subtle" will give an >element a subtle colored background. "text-bg-info" will have a more >saturated background color. The "text-" part of the class is a reference >to the fact that elements with that category of classes will have text >color which adapts to provide correct contrast. > >This patch also makes a minor adjustment to the color used for "warning" >type elements (e.g. <div class="alert alert-warning">. I've adjusted the >color slightly in order to differentiate it from the "primary" >class color we use for submit buttons. > >To test, apply the patch and rebuil the staff interface CSS. Clear your >browser cache if necessary. > >Checkouts: >1. Have an item with a non-public note. >2. Check it out, it looks fine while under "Today's issues" >3. Set the issuedate to some time in the past > `update issues set issuedate = '2025-03-04 15:58:46';` >4. The non-public note should appear in legible red. > >Return claims: >1. The "Claims" tab on the patron detail and checkout pages already used > the "text-bg-*" classes but the "-success" class didn't work well > with the tab background color so I removed it. I notice there is a bug > in the way the classes change as the tab is activated, but that will > have to be dealt with on another bug. > >Bibliographic details: >1. Place at least one hold and at least one article request on a title. >2. The detail view should show "Holds: 1", and "Article requests: 1" > with the numbers in legible Bootstrap badges. > >Holds: >1. Perform a catalog search which will return multiple titles. >2. Select multiple titles and click "Place hold." >3. Select a patron to place a hold for. >4. Confirm the holds by clicking "Place hold." >5. The holds should now be shown under the heading "Existing holds," > with Bootstrap badgets showing the hold count on each. > >Patrons requesting modification: >1. Submit an update to a patron record via the OPAC. >2. On the patrons home page in the staff interface there should be a > "Patrons requesting modifications" link at the top, with a count of > pending modifications shown in a Bootstrap badge. > >Check-ins: >1. Check in an item from a patron account with multiple other checkouts. >2. In the table of checked-in items the patron's remaining checkout > count should be shown in a Bootstrap badge. > >SMTP servers: >1. Go to Administration -> SMTP Servers. >2. Edit at least one server so that debug mode is enabled and it is > marked as a default server. >3. In the view of servers, the debug mode and default status should be > shown in Bootstrap badges. > >Plugins: >1. Go to Administration -> Plugins. >2. Upload a plugin if necessary, and check the list of installed plugins > when the plugin is disabled and when it is enabled. In both cases the > status should appear in a Bootstrap badge. > >About page: >1. Go to the About page. >2. Under the "Server information" tab, the status of Memcached and > Message broker should be shown with a background color--pale blue for > okay statuses. > >Tools home page: >1. If necessary, go to the OPAC and submit at least one comment on a > bibliographic record and tag at least one record. >2. In the staff interface, on the Tools home page, the number of tags > pending approval and the number of comments awaiting moderation > should show in Bootstrap badges. > >Sponsored-by: Athens County Public Libraries >Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> >Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> >--- > .../prog/css/src/_variables.scss | 34 +++++++++--------- > .../prog/css/src/staff-global.scss | 32 +++-------------- > .../intranet-tmpl/prog/en/modules/about.tt | 36 +++++++++---------- > .../prog/en/modules/catalogue/detail.tt | 4 +-- > .../prog/en/modules/circ/returns.tt | 2 +- > .../prog/en/modules/members/member.tt | 2 +- > .../prog/en/modules/reserve/request.tt | 2 +- > .../prog/en/modules/tools/tools-home.tt | 4 +-- > koha-tmpl/intranet-tmpl/prog/js/checkouts.js | 10 +++--- > .../bootstrap/en/modules/sco/sco-main.tt | 2 +- > 10 files changed, 52 insertions(+), 76 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss >index f19c917b5c..e583472f48 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss >@@ -36,7 +36,7 @@ $grays: ( > // fusv-enable > > // scss-docs-start color-variables >-$blue: #0d6efd; >+$blue: #5d9efe; > $indigo: #6610f2; > $purple: #6f42c1; > $pink: #d63384; >@@ -45,7 +45,7 @@ $orange: #fd7e14; > $yellow: #ffc107; > $green: #408540; > $teal: #20c997; >-$cyan: #0dcaf0; >+$cyan: #84c1f3; > // scss-docs-end color-variables > > $background-color-primary: #408540; >@@ -304,9 +304,9 @@ $cyans: ( > $primary: $yellow; // $blue !default; > $secondary: $gray-600; // $gray-600 !default; > $success: $green; // $green !default; >-$info: $blue-300; // $blue-100; // $cyan !default; >-$warning: $yellow; // $yellow !default; >-$danger: #f2dede; // $red !default; >+$info: $cyan; // $blue-100; // $cyan !default; >+$warning: #ffe407; // $yellow !default; >+$danger: $red; // $red !default; > $light: #FFF; // $gray-100 !default; > $dark: #352c2e; // $gray-900 !default; > // scss-docs-end theme-color-variables >@@ -336,23 +336,23 @@ $dark-text-emphasis: $gray-700; > // scss-docs-end theme-text-variables > > // scss-docs-start theme-bg-subtle-variables >-$primary-bg-subtle: tint-color($primary, 80%); >-$secondary-bg-subtle: tint-color($secondary, 80%); >-$success-bg-subtle: tint-color($success, 80%); >-$info-bg-subtle: tint-color($info, 80%); >-$warning-bg-subtle: tint-color($warning, 80%); >-$danger-bg-subtle: tint-color($danger, 80%); >+$primary-bg-subtle: tint-color($primary, 70%); >+$secondary-bg-subtle: tint-color($secondary, 70%); >+$success-bg-subtle: tint-color($success, 70%); >+$info-bg-subtle: tint-color($info, 70%); >+$warning-bg-subtle: tint-color($warning, 70%); >+$danger-bg-subtle: tint-color($danger, 70%); > $light-bg-subtle: mix($gray-100, $white); > $dark-bg-subtle: $gray-400; > // scss-docs-end theme-bg-subtle-variables > > // scss-docs-start theme-border-subtle-variables >-$primary-border-subtle: tint-color($primary, 60%); >-$secondary-border-subtle: tint-color($secondary, 60%); >-$success-border-subtle: tint-color($success, 60%); >-$info-border-subtle: tint-color($info, 60%); >-$warning-border-subtle: tint-color($warning, 60%); >-$danger-border-subtle: tint-color($danger, 60%); >+$primary-border-subtle: tint-color($primary, 40%); >+$secondary-border-subtle: tint-color($secondary, 40%); >+$success-border-subtle: tint-color($success, 40%); >+$info-border-subtle: tint-color($info, 40%); >+$warning-border-subtle: tint-color($warning, 40%); >+$danger-border-subtle: tint-color($danger, 40%); > $light-border-subtle: $gray-200; > $dark-border-subtle: $gray-500; > // scss-docs-end theme-border-subtle-variables >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >index 878634a08a..52ab81978a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >@@ -78,34 +78,10 @@ $enable-dark-mode: false; > ) > } > >-.text-bg-primary { >- background-color: shift-color( $primary, -55% ); >- color: $black; >-} >- >-.text-bg-secondary { >- background-color: shift-color( $secondary, -55% ); >- color: $black; >-} >- >-.text-bg-success { >- background-color: shift-color( $success, -55% ); >- color: $black; >-} >- >-.text-bg-info { >- background-color: shift-color( $info, -55% ); >- color: $black; >-} >- >-.text-bg-warning { >- background-color: shift-color( $warning, -55% ); >- color: $black; >-} >- >-.text-bg-danger { >- background-color: shift-color( $danger, -55% ); >- color: $black; >+.badge { >+ &[class$="-subtle"] { >+ color: #000; >+ } > } > > ::selection { >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt >index acf3a2573d..c1df8e27c6 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt >@@ -117,10 +117,10 @@ > <tr> > <th scope="row">Elasticsearch: </th> > [% IF elasticsearch_fatal_config_error %] >- <td><span class="text-bg-warning">[% elasticsearch_fatal_config_error | html %]</span></td> >+ <td><span class="bg-warning-subtle">[% elasticsearch_fatal_config_error | html %]</span></td> > [% ELSE %] > [% IF elasticsearch_status.running %] >- <td class="text-bg-info"> >+ <td class="bg-info-subtle"> > [% ELSE %] > <td> > [% END %] >@@ -141,7 +141,7 @@ > [% UNLESS loop.last %], [% END %] > [% END %] > [% ELSE %] >- <span class="text-bg-warning">not running</span> >+ <span class="bg-warning-subtle">not running</span> > [% END %] > </td> > [% END # /IF elasticsearch_fatal_config_error %] >@@ -150,7 +150,7 @@ > <tr> > <th scope="row">Memcached: </th> > [% IF memcached_running AND is_memcached_still_active AND where_is_memcached_config == 'config_only' %] >- <td class="text-bg-info"> >+ <td class="bg-info-subtle"> > [% ELSE %] > <td> > [% END %] >@@ -169,9 +169,9 @@ > <span>Status:</span> > [% IF memcached_servers %] > [% IF memcached_running and is_memcached_still_active %] >- <span class="text-bg-info">running</span>. >+ <span class="bg-info-subtle">running</span>. > [% ELSE %] >- <span class="text-bg-warning">not running</span>. >+ <span class="bg-warning-subtle">not running</span>. > [% IF is_psgi %] > <span>Remember memcached needs to be started before Plack.</span> > [% END %] >@@ -182,13 +182,13 @@ > <span>Config read from:</span> > [% SWITCH where_is_memcached_config %] > [% CASE 'config_only' %] >- <span class="text-bg-info">koha-conf.xml</span> >+ <span class="bg-info-subtle">koha-conf.xml</span> > [% CASE 'ENV_only' %] >- <span class="text-bg-warning">ENV</span> <span>Note that the right place to define the memcached config is in your $KOHA_CONF file</span> >+ <span class="bg-warning-subtle">ENV</span> <span>Note that the right place to define the memcached config is in your $KOHA_CONF file</span> > [% CASE 'both' %] >- <span class="text-bg-warning">ENV and koha-conf.xml</span> <span>Note that the right place to define the memcached config is in your $KOHA_CONF file. To avoid any misunderstanding you should not export the memcached config from ENV.</span> >+ <span class="bg-warning-subtle">ENV and koha-conf.xml</span> <span>Note that the right place to define the memcached config is in your $KOHA_CONF file. To avoid any misunderstanding you should not export the memcached config from ENV.</span> > [% CASE # nowhere %] >- <span class="text-bg-warning">Nowhere</span> <span>Note that the right place to define the memcached config is in your $KOHA_CONF file. Currently you do not have a valid memcached configuration defined.</span> >+ <span class="bg-warning-subtle">Nowhere</span> <span>Note that the right place to define the memcached config is in your $KOHA_CONF file. Currently you do not have a valid memcached configuration defined.</span> > [% END %] > [% IF effective_caching_method != 'Cache::Memcached::Fast::Safe' %] > | <span>Effective caching method:</span> [% effective_caching_method | html %] >@@ -202,22 +202,22 @@ > <tr> > <th scope="row">Zebra status: </th> > [% IF (errZebraConnection == 10000) %] >- <td class="text-bg-danger"><strong>Zebra server seems not to be available. Is it started?</strong></td> >+ <td class="bg-danger-subtle"><strong>Zebra server seems not to be available. Is it started?</strong></td> > [% ELSIF (errZebraConnection) %] >- <td class="text-bg-warning"><strong>Error message from Zebra: [% ( errZebraConnection ) | html %]</strong></td> >+ <td class="bg-warning-subtle"><strong>Error message from Zebra: [% ( errZebraConnection ) | html %]</strong></td> > [% ELSE %] >- <td class="text-bg-info">Running</td> >+ <td class="bg-info-subtle">Running</td> > [% END %] > </tr> > <tr> > <th scope="row">Message broker: </th> > [% IF warnConnectBroker %] >- <td class="text-bg-warning"><strong>Using SQL polling (Fallback, Error connecting to RabbitMQ)</strong></td> >+ <td class="bg-warning-subtle"><strong>Using SQL polling (Fallback, Error connecting to RabbitMQ)</strong></td> > [% ELSE %] > [% IF Koha.Preference('JobsNotificationMethod') == 'polling' %] >- <td class="text-bg-info">Using SQL polling</td> >+ <td class="bg-info-subtle">Using SQL polling</td> > [% ELSE %] >- <td class="text-bg-info">Using RabbitMQ</td> >+ <td class="bg-info-subtle">Using RabbitMQ</td> > [% END %] > [% END %] > </tr> >@@ -226,8 +226,8 @@ > <td>[% current_date_and_time | $KohaDates with_hours => 1 %]</td> > </tr> > <tr> >- [% timezone_config_class = (time_zone.config_invalid) ? 'text-bg-warning' : '' %] >- [% timezone_env_class = (time_zone.env_invalid) ? 'text-bg-warning' : '' %] >+ [% timezone_config_class = (time_zone.config_invalid) ? 'bg-warning-subtle' : '' %] >+ [% timezone_env_class = (time_zone.env_invalid) ? 'bg-warning-subtle' : '' %] > <th scope="row">Time zone: </th> > <td> > <span>Used:</span> <span>[% time_zone.actual | html %]</span> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt >index aa76805c26..1b5f5a434b 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt >@@ -188,7 +188,7 @@ > [% IF ( holdcount ) %] > <span class="results_summary"> > <span class="label">Holds:</span> >- <span class="badge text-bg-info"> >+ <span class="badge bg-info-subtle"> > [% IF CAN_user_reserveforothers_place_holds %] > <a href="/cgi-bin/koha/reserve/request.pl?biblionumber=[% biblionumber | uri %]">[% holdcount | html %]</a> > [% ELSE %] >@@ -216,7 +216,7 @@ > [% IF ( article_requests_count = biblio.article_requests.filter_by_current.count ) %] > <span class="results_summary"> > <span class="label">Article requests:</span> >- <span class="badge text-bg-info"> >+ <span class="badge bg-info-subtle"> > <a href="/cgi-bin/koha/circ/request-article.pl?biblionumber=[% biblionumber | uri %]">[% article_requests_count | html %]</a> > </span> > </span> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt >index 19d6413316..d274b699e6 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt >@@ -1364,7 +1364,7 @@ > [% IF riloo.borissuescount %] > <span class="results_summary nowrap"> > <span class="label">Checkouts:</span> >- <span class="badge text-bg-info"> >+ <span class="badge bg-info-subtle"> > <a href="/cgi-bin/koha/circ/circulation.pl?borrowernumber=[% riloo.patron.borrowernumber | uri %]">[% riloo.borissuescount | html %]</a> > </span> > </span> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt >index dbd1982805..f64a0f3785 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt >@@ -55,7 +55,7 @@ > [% IF CAN_user_borrowers_edit_borrowers && pending_borrower_modifications %] > <div class="pending-info" id="patron_updates_pending"> > <a href="/cgi-bin/koha/members/members-update.pl">Patrons requesting modifications</a>: >- <span class="badge text-bg-info"><a href="/cgi-bin/koha/members/members-update.pl">[% pending_borrower_modifications | html %]</a></span> >+ <span class="badge bg-info-subtle"><a href="/cgi-bin/koha/members/members-update.pl">[% pending_borrower_modifications | html %]</a></span> > </div> > [% END %] > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt >index 3884124a9c..c6857aa3b0 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt >@@ -1277,7 +1277,7 @@ > <h3> > <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblioloo.biblionumber | uri %]"> > [% biblioloo.title | html %] >- </a> <span class="badge text-bg-info"><span>[% biblioloo.reserveloop.size | html %] [% tn('Hold', 'Holds', biblioloo.reserveloop.size) | $raw %]</span></span> >+ </a> <span class="badge bg-info-subtle"><span>[% biblioloo.reserveloop.size | html %] [% tn('Hold', 'Holds', biblioloo.reserveloop.size) | $raw %]</span></span> > </h3> > [% END %] > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/tools-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/tools-home.tt >index c63b73cbc8..f1e3a03b20 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/tools-home.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/tools-home.tt >@@ -48,7 +48,7 @@ > <dt> > <a href="/cgi-bin/koha/reviews/reviewswaiting.pl">Comments</a> > [% IF ( pendingcomments ) %] >- <span class="badge text-bg-info"><a href="/cgi-bin/koha/reviews/reviewswaiting.pl">[% pendingcomments | html %]</a></span> >+ <span class="badge bg-info-subtle"><a href="/cgi-bin/koha/reviews/reviewswaiting.pl">[% pendingcomments | html %]</a></span> > [% END %] > </dt> > <dd>Moderate patron comments</dd> >@@ -93,7 +93,7 @@ > <dt> > <a href="/cgi-bin/koha/tags/review.pl">Tags</a> > [% IF ( pendingtags ) %] >- <span class="badge text-bg-info"><a href="/cgi-bin/koha/tags/review.pl">[% pendingtags | html %]</a></span> >+ <span class="badge bg-info-subtle"><a href="/cgi-bin/koha/tags/review.pl">[% pendingtags | html %]</a></span> > [% END %] > </dt> > <dd>Moderate patron tags</dd> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/checkouts.js b/koha-tmpl/intranet-tmpl/prog/js/checkouts.js >index 394d319cbb..c6d89a5575 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/checkouts.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/checkouts.js >@@ -398,7 +398,7 @@ function LoadIssuesTable() { > let content = ""; > > if ( oObj.return_claim_id ) { >- content = '<span class="badge text-bg-info">' + oObj.return_claim_created_on_formatted + '</span>'; >+ content = '<span class="badge bg-info-subtle">' + oObj.return_claim_created_on_formatted + '</span>'; > } else if ( ClaimReturnedLostValue ) { > content = '<a class="btn btn-default btn-xs claim-returned-btn" data-itemnumber="' + oObj.itemnumber + '"><i class="fa fa-exclamation-circle"></i> ' + __("Claim returned") + '</a>'; > } else { >@@ -1152,21 +1152,21 @@ $(document).ready(function() { > > if ( resolved > 0 ) { > $('#return-claims-count-resolved').text(resolved) >- .removeClass('text-bg-info') >+ .removeClass('bg-info-subtle') > .addClass('text-bg-success'); > } else { > $('#return-claims-count-resolved').text(resolved) > .removeClass('text-bg-success') >- .addClass('text-bg-info'); >+ .addClass('bg-info-subtle'); > } > if ( unresolved > 0 ) { > $('#return-claims-count-unresolved').text(unresolved) >- .removeClass('text-bg-info') >+ .removeClass('bg-info-subtle') > .addClass('text-bg-warning'); > } else { > $('#return-claims-count-unresolved').text(unresolved) > .removeClass('text-bg-warning') >- .addClass('text-bg-info'); >+ .addClass('bg-info-subtle'); > } > } > }, >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt >index 72cf9243ec..d5175fbdc2 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt >@@ -379,7 +379,7 @@ > <strong>[% ISSUE.title | html %]</strong> > [% END %] > [% IF ( newissues.match(ISSUE.barcode)) %] >- <span class="badge text-bg-info">NEW</span> >+ <span class="badge bg-info-subtle">NEW</span> > [% END %] > <span class="item-details">[% ISSUE.author | html %]</span> > ([% ISSUE.barcode | html %]) >-- >2.39.5
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 39274
:
179389
|
179448
|
179695
|
181192
| 186268