Bug 20554 - New OPAC CSS
Summary: New OPAC CSS
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: Claire Gravely
QA Contact: Testopia
URL:
Whiteboard:
Keywords:
Depends on: 20427 20552
Blocks:
  Show dependency treegraph
 
Reported: 2018-04-10 14:35 UTC by Claire Gravely
Modified: 2018-11-06 10:17 UTC (History)
7 users (show)

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


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 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 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 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 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 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 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 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 2018-11-06 10:17:54 UTC
Enhancement will not be backported to 18.05.x series.