Bug 20554 - New OPAC CSS
Summary: New OPAC CSS
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Claire Gravely
QA Contact: Testopia
URL:
Keywords:
Depends on: 20427 20552
Blocks: 25597 35642
  Show dependency treegraph
 
Reported: 2018-04-10 14:35 UTC by Claire Gravely
Modified: 2023-12-22 15:22 UTC (History)
9 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Medium patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 20554: New OPAC CSS (21.78 KB, patch)
2018-04-10 14:40 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20554: (follow-up) Compiled CSS (79.10 KB, patch)
2018-04-10 14:43 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20554: New OPAC CSS (22.70 KB, patch)
2018-04-12 13:07 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20554: (follow-up) Compiled CSS (79.19 KB, patch)
2018-04-12 13:10 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (222.47 KB, patch)
2018-04-20 17:57 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Compiled CSS (100.53 KB, patch)
2018-04-20 17:58 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: New OPAC CSS (22.61 KB, patch)
2018-04-23 12:39 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (222.53 KB, patch)
2018-04-23 12:39 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Compiled CSS (100.53 KB, patch)
2018-04-23 12:39 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (222.51 KB, patch)
2018-06-27 15:22 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Compiled CSS (102.65 KB, patch)
2018-06-27 15:22 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: New OPAC CSS (22.37 KB, patch)
2018-08-10 15:26 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (223.31 KB, patch)
2018-08-10 15:26 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshot of the OPAC homepage (70.34 KB, image/png)
2018-08-16 12:26 UTC, Claire Gravely
Details
Screenshot of the OPAC Results list (157.23 KB, image/png)
2018-08-16 12:27 UTC, Claire Gravely
Details
Screenshot of the OPAC drop down menu (71.95 KB, image/png)
2018-08-16 12:28 UTC, Claire Gravely
Details
Screenshot of the OPAC detail page (167.32 KB, image/png)
2018-08-16 12:30 UTC, Claire Gravely
Details
Screenshot of the borrower account fines tab (98.12 KB, image/png)
2018-08-16 12:50 UTC, Claire Gravely
Details
Bug 20554: New OPAC CSS (22.39 KB, patch)
2018-08-29 11:45 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (223.34 KB, patch)
2018-08-29 11:45 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (223.55 KB, patch)
2018-09-03 00:27 UTC, Dilan Johnpullé
Details | Diff | Splinter Review
Bug 20554: New OPAC CSS (100.59 KB, patch)
2018-09-14 16:35 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (223.55 KB, patch)
2018-09-14 16:35 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (QA follow up) Remove padding in mobile view (1.18 KB, patch)
2018-09-14 21:12 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20554: (QA follow up) Remove padding in mobile view (1.12 KB, patch)
2018-09-14 21:15 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20554: New OPAC CSS (100.69 KB, patch)
2018-09-14 22:34 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (223.99 KB, patch)
2018-09-14 22:34 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20554: (QA follow up) Remove padding in mobile view (1.20 KB, patch)
2018-09-14 22:34 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20554: New OPAC CSS (21.46 KB, patch)
2018-10-03 16:23 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (223.59 KB, patch)
2018-10-03 16:23 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (QA follow up) Remove padding in mobile view (1.20 KB, patch)
2018-10-03 16:23 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: New OPAC CSS (21.21 KB, patch)
2018-10-17 17:00 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) Add local font files and add method for loading them (223.59 KB, patch)
2018-10-17 17:00 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (QA follow up) Remove padding in mobile view (1.20 KB, patch)
2018-10-17 17:00 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20554: (follow-up) KOHA_VERSION is not needed in opaclayoutstylesheet (1.15 KB, patch)
2018-10-24 13:10 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 20554: (follow-up) KOHA_VERSION is not needed in opaclayoutstylesheet (1.25 KB, patch)
2018-10-24 13:23 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Claire Gravely 2018-04-10 14:35:43 UTC
A suggestion for updating the OPAC CSS
Comment 1 Claire Gravely 2018-04-10 14:40:27 UTC Comment hidden (obsolete)
Comment 2 Claire Gravely 2018-04-10 14:43:35 UTC Comment hidden (obsolete)
Comment 3 Claire Gravely 2018-04-12 13:07:49 UTC Comment hidden (obsolete)
Comment 4 Claire Gravely 2018-04-12 13:10:22 UTC Comment hidden (obsolete)
Comment 5 Maksim Sen 2018-04-13 19:00:53 UTC
Can I have a test plan so I can sign off your bug?
Comment 6 Roch D'Amour 2018-04-13 20:50:24 UTC
Woops! I tried applying to patch and take a look at it, but it didn't apply. 
I got a sha1 error :

.git/rebase-apply/patch:32: trailing whitespace.
    font-family: 'NotoSansRegular'; 
.git/rebase-apply/patch:315: trailing whitespace.
    font-family: 'NotoSansRegular'; 
.git/rebase-apply/patch:342: trailing whitespace.
 
.git/rebase-apply/patch:362: trailing whitespace.
    }    
.git/rebase-apply/patch:495: trailing whitespace.
                }    
fatal: sha1 information is lacking or useless (koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss).
error: could not build fake ancestor
Comment 7 Owen Leonard 2018-04-20 17:57:04 UTC Comment hidden (obsolete)
Comment 8 Owen Leonard 2018-04-20 17:58:50 UTC Comment hidden (obsolete)
Comment 9 Owen Leonard 2018-04-23 12:39:04 UTC Comment hidden (obsolete)
Comment 10 Owen Leonard 2018-04-23 12:39:07 UTC Comment hidden (obsolete)
Comment 11 Owen Leonard 2018-04-23 12:39:10 UTC Comment hidden (obsolete)
Comment 12 Owen Leonard 2018-06-27 15:22:27 UTC Comment hidden (obsolete)
Comment 13 Owen Leonard 2018-06-27 15:22:31 UTC Comment hidden (obsolete)
Comment 14 Owen Leonard 2018-08-10 15:26:43 UTC Comment hidden (obsolete)
Comment 15 Owen Leonard 2018-08-10 15:26:48 UTC Comment hidden (obsolete)
Comment 16 Claire Gravely 2018-08-16 12:26:59 UTC
Created attachment 77906 [details]
Screenshot of the OPAC homepage
Comment 17 Claire Gravely 2018-08-16 12:27:58 UTC
Created attachment 77907 [details]
Screenshot of the OPAC Results list
Comment 18 Claire Gravely 2018-08-16 12:28:57 UTC
Created attachment 77908 [details]
Screenshot of the OPAC drop down menu
Comment 19 Claire Gravely 2018-08-16 12:30:35 UTC
Created attachment 77909 [details]
Screenshot of the OPAC detail page
Comment 20 Claire Gravely 2018-08-16 12:50:44 UTC
Created attachment 77913 [details]
Screenshot of the borrower account fines tab
Comment 21 Dilan Johnpullé 2018-08-29 00:12:09 UTC
I've just run into issues trying to apply this patch too :/

vagrant@kohadevbox:kohaclone(master)$ git bz apply -s 20554
Bug 20554 - New OPAC CSS

77689 - Bug 20554: New OPAC CSS
77690 - Bug 20554: (follow-up) Add local font files and add method for loading them

Apply? [(y)es, (n)o, (i)nteractive] y
Applying: Bug 20554: New OPAC CSS
Using index info to reconstruct a base tree...
M	koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
Falling back to patching base and 3-way merge...
Auto-merging koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
Applying: Bug 20554: (follow-up) Add local font files and add method for loading them
Using index info to reconstruct a base tree...
M	koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
M	koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
M	koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
Falling back to patching base and 3-way merge...
error: The following untracked working tree files would be overwritten by merge:
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-Bold-webfont.woff
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-Bold-webfont.woff2
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-BoldItalic-webfont.woff
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-BoldItalic-webfont.woff2
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-Italic-webfont.woff
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-Italic-webfont.woff2
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-Regular-webfont.woff
	koha-tmpl/opac-tmpl/bootstrap/css/fonts/NotoSans-Regular-webfont.woff2
	koha-tmpl/opac-tmpl/bootstrap/lib/fontfaceobserver.min.js
Please move or remove them before you can merge.
Aborting
Failed to merge in the changes.
Patch failed at 0001 Bug 20554: (follow-up) Add local font files and add method for loading them
The copy of the patch that failed is found in:
   /home/vagrant/kohaclone/.git/rebase-apply/patch
When you have resolved this problem run "git bz apply --continue".
If you would prefer to skip this patch, instead run "git bz apply --skip".
To restore the original branch and stop patching run "git bz apply --abort".
Patch left in /tmp/Bug-20554-follow-up-Add-local-font-files-and-add-m-Hfq677.patch
Comment 22 Owen Leonard 2018-08-29 11:45:35 UTC Comment hidden (obsolete)
Comment 23 Owen Leonard 2018-08-29 11:45:39 UTC Comment hidden (obsolete)
Comment 24 Dilan Johnpullé 2018-09-03 00:27:24 UTC Comment hidden (obsolete)
Comment 25 Jonathan Druart 2018-09-12 23:02:34 UTC
Does no longer apply.

Can you detail the different changes we are suppose to see?
Comment 26 Owen Leonard 2018-09-14 16:35:03 UTC Comment hidden (obsolete)
Comment 27 Owen Leonard 2018-09-14 16:35:07 UTC Comment hidden (obsolete)
Comment 28 Jonathan Druart 2018-09-14 18:35:08 UTC
Padding should be removed for mobile views.
Comment 29 Claire Gravely 2018-09-14 21:12:56 UTC Comment hidden (obsolete)
Comment 30 Claire Gravely 2018-09-14 21:15:51 UTC Comment hidden (obsolete)
Comment 31 Jonathan Druart 2018-09-14 22:34:32 UTC Comment hidden (obsolete)
Comment 32 Jonathan Druart 2018-09-14 22:34:37 UTC Comment hidden (obsolete)
Comment 33 Jonathan Druart 2018-09-14 22:34:40 UTC Comment hidden (obsolete)
Comment 34 Jonathan Druart 2018-09-14 22:35:16 UTC
Works as expected. IMO it's too bright, but we could get more opinions once pushed ;)
Comment 35 Martin Renvoize (ashimema) 2018-09-28 14:11:04 UTC
(In reply to Jonathan Druart from comment #34)
> Works as expected. IMO it's too bright, but we could get more opinions once
> pushed ;)

Haha, there's always someone wanting a 'Dark theme'.  I too would appreciate an enhancement that allowed basic colour scheme selection allowing the end user to select between 'light' and 'dark' modes (or for the accesablity minded amongst us a 'high contrast' mode?)
Comment 36 Elaine Bradtke 2018-10-01 18:52:22 UTC
I would appreciate a high contrast mode.  The screen shots are low resolution, but even still, I'd prefer strong contrast and ease of reading over cosmetic changes.
Comment 37 Martin Renvoize (ashimema) 2018-10-03 16:12:30 UTC
I'm afraid I can't get this to apply against master now :(
Comment 38 Owen Leonard 2018-10-03 16:23:47 UTC
Created attachment 79905 [details] [review]
Bug 20554: New OPAC CSS

A suggestion for updating the OPAC CSS

This patch updates the css styling of the OPAC

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 39 Owen Leonard 2018-10-03 16:23:51 UTC
Created attachment 79906 [details] [review]
Bug 20554: (follow-up) Add local font files and add method for loading them

This patch adds local copies of the font files specified in the original
patch. A new JavaScript file has been added, fontfaceobserver.min.js,
which helps gracefully load font assets.

https://github.com/bramstein/fontfaceobserver

Information about the new assets has been added to the about page.

When using web fonts, there can be a delay, while the browser loads the
font files, between the time the page loads and the time the fonts
render. Font Face Observer allows us to specify a default font for the
initial page render, and then apply the web font after it has loaded.

To test, apply the patch and regenerate the OPAC css. View any page in
the OPAC and confirm that the custom font renders properly.

View the About page in the staff client and confirm that the new license
information looks correct.

Patch applies and OPAC and license look good. Looking forward to this.
Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 40 Owen Leonard 2018-10-03 16:23:55 UTC
Created attachment 79907 [details] [review]
Bug 20554: (QA follow up) Remove padding in mobile view

This patch removes the padding for mobile screen sizes.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 41 Martin Renvoize (ashimema) 2018-10-04 09:47:07 UTC
I'm afraid I'm not sure that rebase worked well.. I'm getting some very odd display now, not much like the screenshots attached here at all.  I ran the `yarn build --view opac` command and restarted memcached and apache (not a plack install here).. is there anything I'm missing ?
Comment 42 Martin Renvoize (ashimema) 2018-10-04 12:37:57 UTC
After some investigation it seems ` OpacAdditionalStylesheet ` must contain ` opac.css ` for this patch to work.. is that expected?
Comment 43 Nick Clemens (kidclamp) 2018-10-17 12:40:16 UTC
Please rebase :-)
Comment 44 Owen Leonard 2018-10-17 17:00:42 UTC
Created attachment 80742 [details] [review]
Bug 20554: New OPAC CSS

A suggestion for updating the OPAC CSS

This patch updates the css styling of the OPAC

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 45 Owen Leonard 2018-10-17 17:00:47 UTC
Created attachment 80743 [details] [review]
Bug 20554: (follow-up) Add local font files and add method for loading them

This patch adds local copies of the font files specified in the original
patch. A new JavaScript file has been added, fontfaceobserver.min.js,
which helps gracefully load font assets.

https://github.com/bramstein/fontfaceobserver

Information about the new assets has been added to the about page.

When using web fonts, there can be a delay, while the browser loads the
font files, between the time the page loads and the time the fonts
render. Font Face Observer allows us to specify a default font for the
initial page render, and then apply the web font after it has loaded.

To test, apply the patch and regenerate the OPAC css. View any page in
the OPAC and confirm that the custom font renders properly.

View the About page in the staff client and confirm that the new license
information looks correct.

Patch applies and OPAC and license look good. Looking forward to this.
Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 46 Owen Leonard 2018-10-17 17:00:51 UTC
Created attachment 80744 [details] [review]
Bug 20554: (QA follow up) Remove padding in mobile view

This patch removes the padding for mobile screen sizes.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 47 Nick Clemens (kidclamp) 2018-10-19 17:31:11 UTC
Awesome work all!

Pushed to master for 18.11
Comment 48 Fridolin Somers 2018-10-24 13:10:30 UTC
Created attachment 81067 [details] [review]
Bug 20554: (follow-up) KOHA_VERSION is not needed in opaclayoutstylesheet

SET opaclayoutstylesheet does not need KOHA_VERSION, its defined by Asset.css()
Comment 49 Jonathan Druart 2018-10-24 13:23:24 UTC
Created attachment 81068 [details] [review]
Bug 20554: (follow-up) KOHA_VERSION is not needed in opaclayoutstylesheet

SET opaclayoutstylesheet does not need KOHA_VERSION, its defined by Asset.css()

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Fix a bad resolution conflict
Comment 50 Nick Clemens (kidclamp) 2018-10-24 17:32:59 UTC
(In reply to Jonathan Druart from comment #49)
> Created attachment 81068 [details] [review] [review]
> Bug 20554: (follow-up) KOHA_VERSION is not needed in opaclayoutstylesheet
> 
> SET opaclayoutstylesheet does not need KOHA_VERSION, its defined by
> Asset.css()
> 
> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
> Fix a bad resolution conflict

Followup pushed to master for 18.11, thanks Frido!
Comment 51 Martin Renvoize (ashimema) 2018-11-06 10:17:54 UTC
Enhancement will not be backported to 18.05.x series.
Comment 52 Oliver Behnke 2019-02-05 13:47:52 UTC
Hi everyone, unfortunately the self-checkout module has been neglected/missed again and the nice new theme isn't yet applied to it, leading to an inconsistent UI. What's the easiest way to fix that?

Cheers
Comment 53 Katrin Fischer 2019-02-05 13:53:34 UTC
(In reply to Oliver Behnke from comment #52)
> Hi everyone, unfortunately the self-checkout module has been
> neglected/missed again and the nice new theme isn't yet applied to it,
> leading to an inconsistent UI. What's the easiest way to fix that?
> 
> Cheers

Please file a new bug :) (see my other comment)
Comment 54 Oliver Behnke 2019-02-05 14:06:52 UTC
Done
Comment 55 David Cook 2020-06-05 05:37:57 UTC
By the way, fontfaceobserver.min.js is getting flagged as the Miner.Jswebcoin virus by Symantec Endpoint Protection. 

It says that Symantec have had it flagged for more than 1 year, and that the file is untrustworthy.

I have examined the Javascript, and it really appears to be a false positive, but I'm noting it here anyway.

I'm going to look at removing fontfaceobserver locally so that it can pass security checks for the time being.
Comment 56 Katrin Fischer 2020-06-07 12:00:33 UTC
(In reply to David Cook from comment #55)
> By the way, fontfaceobserver.min.js is getting flagged as the
> Miner.Jswebcoin virus by Symantec Endpoint Protection. 
> 
> It says that Symantec have had it flagged for more than 1 year, and that the
> file is untrustworthy.
> 
> I have examined the Javascript, and it really appears to be a false
> positive, but I'm noting it here anyway.
> 
> I'm going to look at removing fontfaceobserver locally so that it can pass
> security checks for the time being.

Hi David, if we need to do something about this, please file a new bug report.
Comment 57 David Cook 2020-06-09 01:44:02 UTC
(In reply to Katrin Fischer from comment #56)
> (In reply to David Cook from comment #55)
> > By the way, fontfaceobserver.min.js is getting flagged as the
> > Miner.Jswebcoin virus by Symantec Endpoint Protection. 
> > 
> > It says that Symantec have had it flagged for more than 1 year, and that the
> > file is untrustworthy.
> > 
> > I have examined the Javascript, and it really appears to be a false
> > positive, but I'm noting it here anyway.
> > 
> > I'm going to look at removing fontfaceobserver locally so that it can pass
> > security checks for the time being.
> 
> Hi David, if we need to do something about this, please file a new bug
> report.

At this point, I'm still waiting to hear back from Symantec. I'm hoping that they'll check this out, and update their virus definitions to no longer include fontfaceobserver.

Locally, we've disabled fontfaceobserver for those using Symantec Endpoint Protection, so that they don't get the virus alert anymore.

But I don't think there's anything that needs to be done on the Koha community side of things at this point. Just giving people a FYI.