From 0ae4aa42cd3c2a15b48547e1d4de3dd84d45b48b Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Mon, 25 Jun 2018 18:39:49 +0000 Subject: [PATCH] Bug 15287: Use font-awesome on the OPAC This patch replaces Bootstrap's glyphicons with Font Awesome icons. To test, apply the patch and clear your browser cache and regenerate the OPAC CSS from the LESS file if necessary. Check these icons and confirm they look correct: - Cart and Lists icons in the OPAC header - User icon in the header when the browser window is narrow - Languages menu when multiple languages are installed and the OpacLangSelectorMode system preference is "top" or "both top and footer." - Set the SuspendHoldsOpac system preference to "allow" and log in to the OPAC as a user who has one or more holds. - Check the appearance of the "suspend" and "resume" buttons both in the table of holds and at the bottom. - With one or more clubs defined, log in to the OPAC and check the "Clubs" tab on the user summary page. The "Enroll" and "Cancel enrollment" buttons should look correct. - On the "your messaging" tab in the OPAC, the "Digests only" information icon should look correct. Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> --- .../opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc | 4 ++-- koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc | 6 +++--- .../opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt | 4 ++-- koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt | 2 +- koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt | 14 +++++++------- koha-tmpl/opac-tmpl/bootstrap/less/opac.less | 8 ++++++++ 6 files changed, 23 insertions(+), 15 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc index 4bd7b21541..efaad2b675 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc @@ -9,7 +9,7 @@ [% FOREACH sublanguages_loo IN languages_loo.sublanguages_loop %] [% IF ( sublanguages_loo.enabled ) %] [% IF ( sublanguages_loo.sublanguage_current ) %] - <li role="presentation"> <a href="#" tabindex="-1" role="menuitem">[% sublanguages_loo.native_description %] [% sublanguages_loo.script_description %] [% sublanguages_loo.region_description %] [% sublanguages_loo.variant_description %] <i class="icon-ok"></i></a></li> + <li role="presentation"> <a href="#" tabindex="-1" role="menuitem">[% sublanguages_loo.native_description %] [% sublanguages_loo.script_description %] [% sublanguages_loo.region_description %] [% sublanguages_loo.variant_description %] <i class="fa fa-check"></i></a></li> [% ELSE %] <li role="presentation"><a href="/cgi-bin/koha/opac-changelanguage.pl?language=[% sublanguages_loo.rfc4646_subtag %]" tabindex="-1" role="menuitem"> [% sublanguages_loo.native_description %] [% sublanguages_loo.script_description %] [% sublanguages_loo.region_description %] [% sublanguages_loo.variant_description %]</a></li> [% END %] @@ -18,7 +18,7 @@ [% ELSE %] [% IF ( languages_loo.group_enabled ) %] [% IF ( languages_loo.current ) %] - <li role="presentation"><a href="#" tabindex="-1" class="menu-inactive" role="menuitem">[% IF ( languages_loo.native_description ) %][% languages_loo.native_description %][% ELSE %][% languages_loo.rfc4646_subtag %][% END %] <i class="icon-ok"></i></a></li> + <li role="presentation"><a href="#" tabindex="-1" class="menu-inactive" role="menuitem">[% IF ( languages_loo.native_description ) %][% languages_loo.native_description %][% ELSE %][% languages_loo.rfc4646_subtag %][% END %] <i class="fa fa-check"></i></a></li> [% ELSE %] <li role="presentation"><a href="/cgi-bin/koha/opac-changelanguage.pl?language=[% languages_loo.rfc4646_subtag %]" tabindex="-1" role="menuitem">[% IF ( languages_loo.native_description ) %][% languages_loo.native_description %][% ELSE %][% languages_loo.rfc4646_subtag %][% END %]</a></li> [% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index 15d185fe76..d3d646e0b0 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -22,7 +22,7 @@ [% IF ( Koha.Preference( 'opacbookbag' ) == 1 ) %] <li class="dropdown"> <a href="#" title="Collect items you are interested in" class="dropdown-toggle" id="cartmenulink" data-toggle="dropdown" role="button"> - <i id="carticon" class="icon-shopping-cart icon-white"></i> <span class="cartlabel">Cart</span> <span id="basketcount"></span> <b class="caret"></b> + <i id="carticon" class="fa fa-shopping-cart fa-icon-white"></i> <span class="cartlabel">Cart</span> <span id="basketcount"></span> <b class="caret"></b> </a> <ul aria-labelledby="cartmenulink" role="menu" class="dropdown-menu"> <li role="presentation"> @@ -36,7 +36,7 @@ [% END %] [% IF ( Koha.Preference( 'virtualshelves' ) == 1 ) %] <li class="dropdown"> - <a href="#" title="Show lists" class="dropdown-toggle" id="listsmenu" data-toggle="dropdown" role="button"><i class="icon-list icon-white"></i> <span class="listslabel">Lists</span> <b class="caret"></b></a> + <a href="#" title="Show lists" class="dropdown-toggle" id="listsmenu" data-toggle="dropdown" role="button"><i class="fa fa-list fa-icon-white"></i> <span class="listslabel">Lists</span> <b class="caret"></b></a> <ul aria-labelledby="listsmenu" role="menu" class="dropdown-menu"> [% IF some_public_shelves.count %] <li role="presentation"><a href="/cgi-bin/koha/opac-shelves.pl?op=list&category=2" tabindex="-1" role="menuitem"><strong>Public lists</strong></a></li> @@ -85,7 +85,7 @@ </ul> <!-- / .nav --> [% IF Koha.Preference( 'virtualshelves' ) == 1 %]<div id="listsDetails"></div>[% END %] [% IF Koha.Preference( 'opacuserlogin' ) == 1 || opaclanguagesdisplay || EnableOpacSearchHistory %] - <a id="user-menu-trigger" class="pull-right" href="#"><i class="icon-user"></i> <span class="caret"></span></a> + <a id="user-menu-trigger" class="pull-right" href="#"><i class="fa fa-user fa-icon-white"></i> <span class="caret"></span></a> <div id="members"> <ul class="nav pull-right"> diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt index 00ce135f2f..40d3d341b6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt @@ -23,7 +23,7 @@ <td> [% IF e.club.club_template.is_enrollable_from_opac %] <button class="btn btn-xs btn-default" onclick="cancelEnrollment( [% e.id %] )"> - <i class="icon-remove"></i> Cancel enrollment + <i class="fa fa-remove"></i> Cancel enrollment </button> [% ELSE %] Contact your library to be disenrolled from this club. @@ -56,7 +56,7 @@ <td> [% IF !c.club_template.is_email_required || ( c.club_template.is_email_required && borrower.first_valid_email_address ) %] <button class="btn btn-xs btn-default" onclick="loadEnrollmentForm([% c.id %])"> - <i class="icon-plus"></i> Enroll + <i class="fa fa-plus"></i> Enroll </button> [% ELSE %] <span class="hint">You must have an email address to enroll</span> diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt index 6adfc97144..9f7a83f7f6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt @@ -39,7 +39,7 @@ [% IF ( SMSSendDriver ) %]<th>SMS</th>[% END %] [% IF ( TalkingTechItivaPhone ) %]<th>Phone</th>[% END %] <th>Email</th> - <th>Digests only <i id="info_digests" data-toggle="tooltip" title="You can ask for a digest to reduce the number of messages. Messages will be saved and sent as a single message." data-placement="right" class="icon icon-info-sign"></i></th> + <th>Digests only <i id="info_digests" data-toggle="tooltip" title="You can ask for a digest to reduce the number of messages. Messages will be saved and sent as a single message." data-placement="right" class="fa fa-info-circle"></i></th> <!-- <th>RSS</th> --><th>Do not notify</th> </tr> </thead> diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt index fb904159fe..a29511955b 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt @@ -712,11 +712,11 @@ [% IF RESERVE.suspend %] <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> <input type="hidden" name="reserve_id" value="[% RESERVE.reserve_id %]" /> - <button class="btn btn-link" type="submit" name="submit"><i class="icon-play"></i> Resume</button> + <button class="btn btn-link" type="submit" name="submit"><i class="fa fa-play"></i> Resume</button> </form> [% ELSE %] [% IF AutoResumeSuspendedHolds %] - <a class="btn btn-link js-show" href="#suspendModal[% RESERVE.reserve_id %]" role="button" data-toggle="modal"><i class="icon-pause"></i> Suspend</a> + <a class="btn btn-link js-show" href="#suspendModal[% RESERVE.reserve_id %]" role="button" data-toggle="modal"><i class="fa fa-pause"></i> Suspend</a> [% # hold suspend modal form %] <div id="suspendModal[% RESERVE.reserve_id %]" class="modal-nojs" tabindex="-1" role="dialog" aria-labelledby="suspendModal[% RESERVE.reserve_id %]Label" aria-hidden="true"> <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> @@ -745,7 +745,7 @@ [% ELSE %] <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> <input type="hidden" name="reserve_id" value="[% RESERVE.reserve_id %]" /> - <button class="btn btn-link" type="submit" name="submit"><i class="icon-pause"></i> Suspend</button> + <button class="btn btn-link" type="submit" name="submit"><i class="fa fa-pause"></i> Suspend</button> </form> [% END # / IF AutoResumeSuspendedHolds %] [% END # / IF RESERVE.suspend %] @@ -757,7 +757,7 @@ <form action="/cgi-bin/koha/opac-modrequest.pl" method="post"> <input type="hidden" name="biblionumber" value="[% RESERVE.biblionumber %]" /> <input type="hidden" name="reserve_id" value="[% RESERVE.reserve_id %]" /> - <button type="submit" name="submit" class="btn btn-mini btn-danger" onclick="return confirmDelete(MSG_CONFIRM_DELETE_HOLD);"><i class="icon-remove icon-white"></i> Cancel</button></form> + <button type="submit" name="submit" class="btn btn-xs btn-danger" onclick="return confirmDelete(MSG_CONFIRM_DELETE_HOLD);"><i class="fa fa-remove"></i> Cancel</button></form> [% END %] </td> </tr> @@ -768,7 +768,7 @@ [% IF SuspendHoldsOpac %] <div> <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> - <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_SUSPEND_HOLDS);"><i class="icon-pause"></i> Suspend all holds</button> + <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_SUSPEND_HOLDS);"><i class="fa fa-pause"></i> Suspend all holds</button> <input type="hidden" name="suspend" value="1" /> [% IF AutoResumeSuspendedHolds %] @@ -781,7 +781,7 @@ <br/> <div> <form action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> - <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_RESUME_HOLDS);"><i class="icon-play"></i> Resume all suspended holds</button> + <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_RESUME_HOLDS);"><i class="fa fa-play"></i> Resume all suspended holds</button> <input type="hidden" name="suspend" value="0" /> </form> </div> @@ -877,7 +877,7 @@ <td class="article-request-cancel"> <span class="tdlabel">Cancel:</span> - <a class="btn btn-mini btn-danger" href="opac-article-request-cancel.pl?id=[% ar.id %]" onclick="return confirmDelete(MSG_CONFIRM_DELETE_ARTREQ);"><i class="icon-remove icon-white"></i> Cancel</a> + <a class="btn btn-xs btn-danger" href="opac-article-request-cancel.pl?id=[% ar.id %]" onclick="return confirmDelete(MSG_CONFIRM_DELETE_ARTREQ);"><i class="fa fa-remove"></i> Cancel</a> </td> </tr> [% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less index 92e6e0377d..e7759d89b8 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less +++ b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less @@ -422,6 +422,14 @@ td { position: static; } +.fa.fa-icon-white { + color: #FFF; +} + +.fa.fa-icon-black { + color: #FFF; +} + #changelanguage .nav > .active > p { padding : 0 15px; } -- 2.11.0