Bug 10309 - New OPAC theme based on Bootstrap
Summary: New OPAC theme based on Bootstrap
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low new feature (vote)
Assignee: Owen Leonard
QA Contact:
URL:
Keywords:
Depends on:
Blocks: 11057 11060 11090
  Show dependency treegraph
 
Reported: 2013-05-22 13:33 UTC by Owen Leonard
Modified: 2014-12-07 20:02 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:


Attachments
authority search form after changing the screen size, labels wrongly located (12.69 KB, image/png)
2013-07-07 15:43 UTC, Katrin Fischer
Details
Wide pull downs for boolean operators on advanced search form (7.25 KB, image/png)
2013-07-07 15:46 UTC, Katrin Fischer
Details
itemtypes in advanced search not using available space well (32.68 KB, image/png)
2013-07-07 15:51 UTC, Katrin Fischer
Details
Search input field on login page too short on wide screens (14.83 KB, image/png)
2013-07-07 16:02 UTC, Katrin Fischer
Details
Bug 10309 [Follow-up] Updates for Bug 6594, Schema.org structured data (14.60 KB, patch)
2013-10-07 19:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 10309 [Follow-up] Applying changes from Bug 10349 (4.44 KB, patch)
2013-10-07 19:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 10309 [Follow-up] Update for Bug 10856, improve shelf browser (25.32 KB, patch)
2013-10-07 19:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 10309 [Follow-up] Add changes from Bug 8712, "and" labels in advanced search (5.08 KB, patch)
2013-10-07 19:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 10309 [Follow-up] Markup fix from Bug 10566 follow-up (1.25 KB, patch)
2013-10-07 19:56 UTC, Owen Leonard
Details | Diff | Splinter Review
[SIGNED-OFF] Bug 10309 [Follow-up] Updates for Bug 6594, Schema.org structured data (14.71 KB, patch)
2013-10-08 14:38 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review
[SIGNED-OFF] Bug 10309 [Follow-up] Applying changes from Bug 10349 (4.56 KB, patch)
2013-10-08 14:38 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review
[SIGNED-OFF] Bug 10309 [Follow-up] Update for Bug 10856, improve shelf browser (25.51 KB, patch)
2013-10-08 14:38 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review
[SIGNED-OFF] Bug 10309 [Follow-up] Add changes from Bug 8712, "and" labels in advanced search (5.16 KB, patch)
2013-10-08 14:39 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review
[SIGNED-OFF] Bug 10309 [Follow-up] Markup fix from Bug 10566 follow-up (1.31 KB, patch)
2013-10-08 14:39 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2013-05-22 13:33:50 UTC
I'm working on a new theme for the OPAC which replaces the old YUI grid system with Bootstrap. This new theme's design is based on the look of CCSR, but adds Bootstrap-style widgets and additional layout breakpoints for better responsiveness.

My initial design is focused on the structural overhaul of the templates (with complete re-indentation and tab-to-spaces conversion) to add the Bootstrap grid and other features. I would like to later refine the design so that it looks less like the default Bootstrap design and more like something we can call our own.

I started the redesign by throwing out everything in opac.css and starting from scratch. I still have the old version saved as opac-old.css for reference during development. The file should be removed for release. CSS is now generated from a couple of LESS files: opac.less and responsive.less which are combined when compiled. It's compiled to a non-minified version at the moment, but that should be changed for the release as well.

The [lang] directory now contains only /includes, /modules, and /xslt. Everything else has been moved up to the [theme] level.

The initial conversion of the templates is done, and I'm working now on tweaking the responsive layout, finding where breakpoints need to be adjusted. There's still a lot of work to be done in deciding how to prioritize content in the mobile view.

I'll push an in-progress branch to Gitorious shortly.
Comment 1 Owen Leonard 2013-05-22 14:00:13 UTC
Work in progress is now on Gitorious:

http://gitorious.org/koha-dev/koha-dev

...in a branch called "bootstrap-opac"

I can't stress enough that this is very unfinished. However I'm happy to hear questions, comments, suggestions, complaints, etc.
Comment 2 Liz Rea 2013-07-05 13:17:05 UTC
Hi Owen,

As we talked about on IRC - 

The cart button would work better if it were either more like the list button, or a modal window. The current implementation is wacky on mobile.

The margin is a little wide for mobile, it's wibbly-wobbly when you are scrolling (the example was: rub back and forth with your finger, instead of up and down)

the order in the search form differs between the start screen and the login screen. on start i have the search field on top, on the login screen i have the catalog dropdown on top. also the login form is visible on the start page already so technically it would make sense to use an anchor instead of loading a new page to log in but that would probably destroy the functionality in regular view? -- drojf

MJ declares that the colors could use more contrast. Accessibility is important.

...and that's all I noted for now :)

Liz
Comment 3 Katrin Fischer 2013-07-07 15:43:49 UTC
Created attachment 19456 [details]
authority search form after changing the screen size, labels wrongly located

As promised adding my comments from IRC here too, together with screenshots:

1) The authority search form does not cope well with different screen sizes. Wide screens are a problem and also small screens. After changing the screen size a few times back and forth, the labels are not positioned correctly (see screenshot)
Comment 4 Katrin Fischer 2013-07-07 15:46:25 UTC
Created attachment 19457 [details]
Wide pull downs for boolean operators on advanced search form

2) Pull downs for boolean operators on advanced search with 'more options' are very wide for the small words within them.
Comment 5 Katrin Fischer 2013-07-07 15:51:36 UTC
Created attachment 19458 [details]
itemtypes in advanced search not using available space well

3) Also on the advanced search page the itemtype selection moves into 1 column very soon, while there is still a lot of space available. Maybe it could change into a 2 column display first or have more steps in between. For very small screens and lots of itemtypes there will be a loooong list to scroll through. I wonder what we could do about that. Maybe something like collapse the search option by default on smaller screens with an option to make it visible again? Not sure what can be done.
Comment 6 Katrin Fischer 2013-07-07 16:02:07 UTC
Created attachment 19459 [details]
Search input field on login page too short on wide screens

4) When you click on 'Login to your account' the search form suddenly is a lot shorter on the login page. Screen size wasn't changed.
Comment 7 Owen Leonard 2013-08-29 18:52:21 UTC
I believe this is ready for serious testing and, I hope, signoff. 

Check out the "bootstrap-opac" branch on Gitorious:

http://gitorious.org/koha-dev/koha-dev
Comment 8 Owen Leonard 2013-08-30 18:28:00 UTC
There is a problem with the OPAC non-XSLT detail page. Setting back to ASSIGNED while I work it out.
Comment 9 Owen Leonard 2013-09-05 19:09:36 UTC
(In reply to Owen Leonard from comment #8)
> There is a problem with the OPAC non-XSLT detail page.

This is fixed: on a non-XSLT detail page, with OPACPopupAuthorsSearch enabled, search term selection is now performed from a modal dialog rather than a pop-up menu.
Comment 10 Bernardo Gonzalez Kriegel 2013-09-10 09:21:18 UTC
Hi,
I did a merge with your remote branch, also did a complete clone and switched to the bootstrap-opac branch

In both cases I get
"
Software error:

Template process failed: file error - cssinclude: not found at /home/bgkriegel/kohaclone/C4/Templates.pm line 132.
"

Is there anything else to do before enable bootstrap theme?
Comment 11 Owen Leonard 2013-09-10 12:38:33 UTC
(In reply to Bernardo Gonzalez Kriegel from comment #10)
> Template process failed: file error - cssinclude: not found at
> /home/bgkriegel/kohaclone/C4/Templates.pm line 132.

Which page gave you this error?
Comment 12 Bernardo Gonzalez Kriegel 2013-09-10 13:23:24 UTC
(In reply to Owen Leonard from comment #11)
> (In reply to Bernardo Gonzalez Kriegel from comment #10)
> > Template process failed: file error - cssinclude: not found at
> > /home/bgkriegel/kohaclone/C4/Templates.pm line 132.
> 
> Which page gave you this error?

Simply switching theme to bootstrap and reloading main OPAC page.
Comment 13 Owen Leonard 2013-09-10 15:22:27 UTC
(In reply to Bernardo Gonzalez Kriegel from comment #12)
> > > Template process failed: file error - cssinclude: not found at
> > > /home/bgkriegel/kohaclone/C4/Templates.pm line 132.

Thanks to Katrin for pointing out the explanation for this: You probably have a non-English template specified, whether intentionally or not. You might need to clear your cookies?
Comment 14 Bernardo Gonzalez Kriegel 2013-09-10 21:57:50 UTC
(In reply to Owen Leonard from comment #13)
> Thanks to Katrin for pointing out the explanation for this: You probably
> have a non-English template specified, whether intentionally or not. You
> might need to clear your cookies?

cait++ :-)

Clean install, clean cookies, now it works, testing.
Comment 15 Jared Camins-Esakov 2013-09-17 20:35:29 UTC
I noticed two problems in my cursory review:
1) The "All libraries" dropdown is covering the left side of the "Go" button in the masthead.
2) After choosing More options on the Advanced search page, "Additional content types for books/printed materials" is jogged down but the rest of the row is not.

It looks fantastic, though.
Comment 16 I'm just a bot 2013-09-29 05:59:35 UTC
Patch applied cleanly, go forth and signoff
Comment 17 Bernardo Gonzalez Kriegel 2013-10-05 14:32:15 UTC
[SIGNED-OFF] Bug 10309 - New OPAC theme based on Bootstrap

Add remote, merge branch, enable bootstrap theme.

Tested any feature I can: simple and advanced search, 
lists and carts, logging in/out, user data, change password, change
personal details, holds, search history, authority search, facets.

Tested on PC and android (phone & tablet)

For me it works well, and looks very well. 
But we can't fix any eventual glitch if it's not pushed
So I sign.

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Comment 18 Owen Leonard 2013-10-07 19:56:19 UTC Comment hidden (obsolete)
Comment 19 Owen Leonard 2013-10-07 19:56:26 UTC Comment hidden (obsolete)
Comment 20 Owen Leonard 2013-10-07 19:56:31 UTC Comment hidden (obsolete)
Comment 21 Owen Leonard 2013-10-07 19:56:35 UTC Comment hidden (obsolete)
Comment 22 Owen Leonard 2013-10-07 19:56:40 UTC Comment hidden (obsolete)
Comment 23 Bernardo Gonzalez Kriegel 2013-10-08 14:38:00 UTC
Created attachment 21877 [details] [review]
[SIGNED-OFF] Bug 10309 [Follow-up] Updates for Bug 6594, Schema.org structured data

This patch adds the changes from Bug 6594:

"To support schema.org processors, such as Google, Bing, and Yandex,
structure our data so that it has machine-readable attributes. This pass
declares the CreativeWork sub-types as well as Product for the main
bibliographic record details, and uses the Offer type for holdings
information per the W3C Schema Bib Extend community group discussions."

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>

Tested against linter.structured-data.org, microdata present
No errors.
Comment 24 Bernardo Gonzalez Kriegel 2013-10-08 14:38:18 UTC
Created attachment 21878 [details] [review]
[SIGNED-OFF] Bug 10309 [Follow-up] Applying changes from Bug 10349

This patch applies the changes from Bug 10349, Don't show empty
Descriptions/Title notes tabs in OPAC and staff.

"The descriptions/title notes tab appears on the detail page in both
staff client and OPAC even if there are no notes. This is probably a
relic of the pre-T:T days when it wasn't possible to use || in an IF.
This patch adds a check for the various variables which might trigger
the display of the tab.

To test, apply the patch and view records in the OPAC and staff client
which do and do not have title notes attached (whether that be in the
MARC record or in the biblio.notes column). In the OPAC Syndetics
content should also be tested if possible. The descriptions/title notes
tab should only appear if there is content."

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Works well. No errors

Tested on OPAC, records without notes don't show title notes tab.
Comment 25 Bernardo Gonzalez Kriegel 2013-10-08 14:38:32 UTC
Created attachment 21879 [details] [review]
[SIGNED-OFF] Bug 10309 [Follow-up] Update for Bug 10856, improve shelf browser

This patch updates this theme with the changes made in Bug 10856.
Because of the way JavaScript is loaded in the new theme, the JS in the
shelfbrowser include had to be moved to the opac-detail template.

Test plan from that bug:
- On a detail biblio page, click on a "Browse shelf" link.
- Play with the next and previous links.
- Deactivate Javascript (using NoScript for example) and check that you
  get the same behavior (but the page is reloaded).
- Launch the unit tests: prove t/db_dependent/ShelfBrowser.t

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Works well. No errors

Disabled JavaScript on Firefox (about:config, javascript.enable -> false)
Browse shelf works by reloading.
Unit test report success.
Comment 26 Bernardo Gonzalez Kriegel 2013-10-08 14:39:08 UTC
Created attachment 21880 [details] [review]
[SIGNED-OFF] Bug 10309 [Follow-up] Add changes from Bug 8712, "and" labels in advanced search

This patch adds the changes from Bug 8712 to the new theme. Some HTML
markup errors have also been corrected. From Bug 8712:

"The "and" label not only improves the accessibility but also gives the
user an idea that the operation between multiple search fields is a
boolean "AND" by default."

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>

"and" looks well on advanced search. No errors
Comment 27 Bernardo Gonzalez Kriegel 2013-10-08 14:39:22 UTC
Created attachment 21881 [details] [review]
[SIGNED-OFF] Bug 10309 [Follow-up] Markup fix from Bug 10566 follow-up

This patch corrects a markup error which was fixed recently in the prog
template.

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>

Simple fix. No errors
Comment 28 Galen Charlton 2013-10-14 23:29:25 UTC
I've pushed the main patch + all of the follow-ups + a follow-up of my own to master.