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.
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.
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
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)
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.
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.
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.
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
There is a problem with the OPAC non-XSLT detail page. Setting back to ASSIGNED while I work it out.
(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.
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?
(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?
(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.
(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?
(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.
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.
Patch applied cleanly, go forth and signoff
[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>
Created attachment 21858 [details] [review] 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."
Created attachment 21859 [details] [review] 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."
Created attachment 21860 [details] [review] 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
Created attachment 21861 [details] [review] 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."
Created attachment 21862 [details] [review] 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.
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.
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.
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.
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
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
I've pushed the main patch + all of the follow-ups + a follow-up of my own to master.