Bug 15287 - Use font-awesome on the OPAC
Summary: Use font-awesome on the OPAC
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Target Milestone: ---
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-12-03 02:39 UTC by Francesca
Modified: 2018-09-10 17:27 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Bot Control: ---
When did the bot last check this:
Who signed the patch off:
Text to go in the release notes:


Attachments
Bug 15287: Use font-awesome on the OPAC (16.67 KB, patch)
2018-06-25 18:48 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 15287: Compiled CSS (89.62 KB, patch)
2018-06-25 18:48 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 15287: Use font-awesome on the OPAC (16.73 KB, patch)
2018-07-01 18:52 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 15287: Compiled CSS (89.67 KB, patch)
2018-07-01 18:52 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 15287: Use font-awesome on the OPAC (16.84 KB, patch)
2018-07-23 17:03 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 15287: Use font-awesome on the OPAC (17.67 KB, patch)
2018-08-10 16:25 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 15287: Use font-awesome on the OPAC (18.06 KB, patch)
2018-08-24 16:17 UTC, Nick Clemens
Details | Diff | Splinter Review
Bug 15287: (follow-up) QA fix for position of user icon (1.36 KB, patch)
2018-08-31 14:51 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Francesca 2015-12-03 02:39:43 UTC
Font-awesome is now being used in the staff intranet and should be used in the OPAC as well
Comment 1 Owen Leonard 2018-06-25 18:48:13 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2018-06-25 18:48:16 UTC Comment hidden (obsolete)
Comment 3 Katrin Fischer 2018-07-01 18:52:11 UTC
Do you plan on changing the icons on the opac-detail page and others as well?
Comment 4 Katrin Fischer 2018-07-01 18:52:47 UTC Comment hidden (obsolete)
Comment 5 Katrin Fischer 2018-07-01 18:52:52 UTC Comment hidden (obsolete)
Comment 6 Owen Leonard 2018-07-02 11:49:57 UTC
(In reply to Katrin Fischer from comment #3)
> Do you plan on changing the icons on the opac-detail page and others as well?

I do not have an immediate plan for that, although I think it's a good idea to refresh those icons (as part of 20554 maybe?).
Comment 7 Katrin Fischer 2018-07-02 21:34:22 UTC
> I do not have an immediate plan for that, although I think it's a good idea
> to refresh those icons (as part of 20554 maybe?).

That could work - or have a separate bug. Was wondering, but should not block this or the other bug unnecessarily.
Comment 8 Jonathan Druart 2018-07-23 16:48:32 UTC
The colour of the icons changed (now they are always white), is it expected?
Comment 9 Jonathan Druart 2018-07-23 17:03:26 UTC Comment hidden (obsolete)
Comment 10 Jonathan Druart 2018-07-23 17:03:53 UTC
RM: do not forget to regenerate the compiled CSS
Comment 11 Nick Clemens 2018-08-10 10:42:29 UTC
Please rebase for SCSS :-)
Comment 12 Owen Leonard 2018-08-10 16:25:16 UTC
Created attachment 77704 [details] [review]
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>
Comment 13 Nick Clemens 2018-08-24 16:17:33 UTC
Created attachment 78142 [details] [review]
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>
Comment 14 Nick Clemens 2018-08-24 16:18:12 UTC
I updated the patch with filters, but when I go to a small window the person icon is out of place, can you check this one?
Comment 15 Owen Leonard 2018-08-31 14:51:44 UTC
Created attachment 78331 [details] [review]
Bug 15287: (follow-up) QA fix for position of user icon

This patch corrects the CSS for the user icon which appears when the
browser width is very narrow.

To test, apply the patch, rebuild CSS, and clear your browser cache if
necessary. View the OPAC with and without a user logged in and confirm
that the user icon at the top of the page looks correct at narrow
browser widths.
Comment 16 Nick Clemens 2018-09-06 17:39:28 UTC
Awesome work all! 

Pushed to master for 18.11
Comment 17 Martin Renvoize 2018-09-10 17:27:19 UTC
Enhancement, will not be backported to 18.05.x series.