Bug 42564: Upgrade Font Awesome in the staff interface to 7.2
We are using Font Awesome 6.3 in the staff interface. The current
version is 7.2. Upgrading will eliminate the repeated warnings in the
browser console about "Glyph bbox was incorrect."
The patch updates the staff interface CSS so that it pulls Font
Awesome CSS from node_modules. Font assets have been updated in
lib/fontawesome.
The many changed .inc and .tt files are a result of a missed aspect of
our upgrade to Bootstrap 5. The "sr-only" class was removed in BS5 but
the Font Awesome CSS included its own "sr-only" class. This made up for
the fact that we missed the required upgrade to BS5's "visually-hidden."
As soon as Font Awesome's "sr-only" was gone all these mistakes were
made visible.
To test, apply the patch and run 'yarn install.'
- Rebuild the staff interface SCSS.
- Clear your browser cache.
- Test many pages in the staff interface to confirm that no icons are
missing.
- Check changes to the templates to confirm that "sr-only" has been
replaced with "visually-hidden."
- Places where a broken "sr-only" class would be obvious: The h1
heading "Koha home" on the staff interface main page, the <legend>
tag on the new currency form in Administration -> Currencies and
exchange rates.
Sponsored-by: Athens County Public Libraries
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Pedro Amorim <pedro.amorim@openfifth.co.uk>
This commit is contained in:
Owen Leonard
Pedro Amorim
parent
297edd689b
commit
8ffe7d9edb
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -51,7 +51,7 @@ ul li.tag::before {
|
|||
ul .handle {
|
||||
color: #999;
|
||||
cursor: move;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
font-size: 1em;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ table {
|
|||
&.dt-orderable-asc span.dt-column-order::before,
|
||||
&.dt-ordering-asc span.dt-column-order::before {
|
||||
content: "\f0d8";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
font-size: 1rem;
|
||||
line-height: .5rem;
|
||||
}
|
||||
|
|
@ -149,7 +149,7 @@ table {
|
|||
&.dt-orderable-desc span.dt-column-order::after,
|
||||
&.dt-ordering-desc span.dt-column-order::after {
|
||||
content: "\f0d7";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
font-size: 1rem;
|
||||
line-height: .5rem;
|
||||
}
|
||||
|
|
@ -565,7 +565,7 @@ div {
|
|||
&::before,
|
||||
&::after {
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -677,7 +677,7 @@ div {
|
|||
&.buttons-html5:not( .disabled )::before {
|
||||
color: $background-color-primary;
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
margin-right: .5em;
|
||||
width: 1em;
|
||||
}
|
||||
|
|
@ -698,7 +698,7 @@ div {
|
|||
color: $background-color-primary;
|
||||
content: "\f02f";
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
margin-right: .5em;
|
||||
width: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
@use "~@fortawesome/fontawesome-free/scss/variables" with (
|
||||
// customizing $font-path
|
||||
$font-path: "../../lib/fontawesome/webfonts"
|
||||
);
|
||||
@use "~@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
@use "~@fortawesome/fontawesome-free/scss/fa" as fa;
|
||||
@use "~@fortawesome/fontawesome-free/scss/solid" as fa-solid;
|
||||
@use "~@fortawesome/fontawesome-free/scss/brands" as fa-brands;
|
||||
|
||||
@import "~bootstrap/scss/mixins/_banner";
|
||||
@include bsBanner("");
|
||||
|
||||
|
|
@ -3210,7 +3219,7 @@ nav {
|
|||
|
||||
&::before {
|
||||
content: "\f015";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
padding-right: .3em;
|
||||
|
|
@ -3309,7 +3318,7 @@ button,
|
|||
&::before {
|
||||
content: "\f0d7";
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -3323,7 +3332,7 @@ button,
|
|||
&::before {
|
||||
content: "\f0da";
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-family: "Font Awesome 7 Free";
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -4897,7 +4906,7 @@ div .suggestion_note {
|
|||
border: 1px solid #408540;
|
||||
|
||||
&::before {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-family: 'Font Awesome 7 Free';
|
||||
content: "\f058";
|
||||
color: #408540;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<fieldset class="acqui_basket_add">
|
||||
<legend class="sr-only">Add order to basket</legend>
|
||||
<legend class="visually-hidden">Add order to basket</legend>
|
||||
[% IF has_budgets %]
|
||||
<ul>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
<button type="button" class="btn btn-primary updateSubmit" id="updateTicket">Update <i id="comment-spinner" class="fa fa-spinner fa-pulse fa-fw" style="display:none"></i></button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Select status</span>
|
||||
<span class="visually-hidden">Select status</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
[% FOR st IN status %]
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
[% INCLUDE 'csrf-token.inc' %]
|
||||
<div class="modal-body">
|
||||
<fieldset class="rows">
|
||||
<legend class="sr-only">Multi receiving</legend>
|
||||
<legend class="visually-hidden">Multi receiving</legend>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="nbissues" class="required">How many issues do you want to receive?</label>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<form action="claims.pl" id="filter_claims_form">
|
||||
<fieldset class="brief">
|
||||
<h4>Filter missing issues</h4>
|
||||
<legend class="sr-only">Filter missing issues</legend>
|
||||
<legend class="visually-hidden">Filter missing issues</legend>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="from">From:</label>
|
||||
|
|
|
|||
|
|
@ -305,7 +305,7 @@
|
|||
[% END %]
|
||||
</h1>
|
||||
<fieldset class="fg">
|
||||
<legend class="sr-only">Fund details</legend>
|
||||
<legend class="visually-hidden">Fund details</legend>
|
||||
|
||||
<input type="hidden" name="op" value="cud-add_validate" />
|
||||
<input type="hidden" name="checked" value="0" />
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
[% INCLUDE 'csrf-token.inc' %]
|
||||
<h1><span class="create-alert">New alert</span><span class="edit-alert">Edit alert</span></h1>
|
||||
<fieldset class="rows">
|
||||
<legend class="sr-only">Audio alert details</legend>
|
||||
<legend class="visually-hidden">Audio alert details</legend>
|
||||
<input id="id" name="id" type="hidden" value="" />
|
||||
<ol>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
[% END %]
|
||||
</h1>
|
||||
<fieldset class="fg">
|
||||
<legend class="sr-only">Enter authority type details</legend>
|
||||
<legend class="visually-hidden">Enter authority type details</legend>
|
||||
<div class="fg-row input-md">
|
||||
[% IF authority_type.authtypecode.defined %]
|
||||
<div class="fg-label">
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
[% INCLUDE 'csrf-token.inc' %]
|
||||
<input type="hidden" name="op" value="cud-add_validate" />
|
||||
<fieldset class="fg">
|
||||
<legend class="sr-only">New currency entry form</legend>
|
||||
<legend class="visually-hidden">New currency entry form</legend>
|
||||
<div class="fg-row input-md">
|
||||
[% IF currency %]
|
||||
<div class="fg-label">
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
</h1>
|
||||
|
||||
<fieldset class="fg">
|
||||
<legend class="sr-only">EAN details</legend>
|
||||
<legend class="visually-hidden">EAN details</legend>
|
||||
|
||||
<div class="fg-row">
|
||||
<div class="fg-label">
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
<form action="/cgi-bin/koha/admin/systempreferences.pl" name="Aform" method="post" [% IF type_upload %]enctype="multipart/form-data"[% END %]>
|
||||
[% INCLUDE 'csrf-token.inc' %]
|
||||
<fieldset class="rows">
|
||||
<legend class="sr-only">System preference details</legend>
|
||||
<legend class="visually-hidden">System preference details</legend>
|
||||
<ol>
|
||||
<li><label for="explanation">Explanation: </label><input type="text" name="explanation" id="explanation" size="60" value="[% explanation | html %]" /><input type="hidden" name="op" value="cud-add_validate" /></li>
|
||||
<li
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<form action="/cgi-bin/koha/basket/sendbasket.pl" method="post">
|
||||
<h1>Sending your cart</h1>
|
||||
<fieldset class="rows">
|
||||
<legend class="sr-only">Enter message details</legend>
|
||||
<legend class="visually-hidden">Enter message details</legend>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="email_add">Email address:</label>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<div id="container-main" class="container-fluid">
|
||||
<div class="row">
|
||||
<h1 class="sr-only">Koha home</h1>
|
||||
<h1 class="visually-hidden">Koha home</h1>
|
||||
<div class="col-md-3 order-sm-2">
|
||||
[% IF ( koha_news.count ) %]
|
||||
<div id="area-news" class="page-section">
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
<form method="post" action="/cgi-bin/koha/patron_lists/add-modify.pl" class="validated">
|
||||
[% INCLUDE 'csrf-token.inc' %]
|
||||
<fieldset class="rows">
|
||||
<legend class="sr-only">Patron list details</legend>
|
||||
<legend class="visually-hidden">Patron list details</legend>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@
|
|||
[% END %]
|
||||
<fieldset class="[% form_class | html %]">
|
||||
<h4>Choose vendor</h4>
|
||||
<label class="sr-only" for="supplierid">Choose vendor: </label>
|
||||
<label class="visually-hidden" for="supplierid">Choose vendor: </label>
|
||||
<select id="supplierid" name="supplierid">
|
||||
[% FOREACH suploo IN suploop %]
|
||||
[% IF ( suploo.selected ) %]
|
||||
|
|
|
|||
|
|
@ -941,7 +941,7 @@
|
|||
<h4>Organize by:</h4>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="displayby" class="sr-only">Organize by: </label>
|
||||
<label for="displayby" class="visually-hidden">Organize by: </label>
|
||||
<select name="displayby" id="displayby">
|
||||
[% IF ( displayby == "suggestion.STATUS" ) %]
|
||||
<option value="STATUS" selected="selected">Status</option>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<h1>Sending your list</h1>
|
||||
<fieldset class="fg">
|
||||
<legend class="sr-only">Enter message details</legend>
|
||||
<legend class="visually-hidden">Enter message details</legend>
|
||||
<div class="fg-row">
|
||||
<div class="fg-label">
|
||||
<label for="email">Email address:</label>
|
||||
|
|
|
|||
Loading…
Reference in New Issue