Bug 8597 - New theme for the OPAC with a mobile view
Summary: New theme for the OPAC with a mobile view
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: 3.10
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Frédérick Capovilla
QA Contact: Mason James
URL:
Keywords:
: 9736 (view as bug list)
Depends on: 8622 8623
Blocks:
  Show dependency treegraph
 
Reported: 2012-08-08 15:55 UTC by Frédérick Capovilla
Modified: 2014-05-26 21:04 UTC (History)
8 users (show)

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


Attachments
New theme for the OPAC (52.14 KB, patch)
2012-08-08 15:55 UTC, Frédérick Capovilla
Details | Diff | Splinter Review
Images files for the new theme (29.64 KB, application/zip)
2012-08-08 15:55 UTC, Frédérick Capovilla
Details
Add a mobile view for the OPAC using mediaqueries (33.00 KB, patch)
2012-08-08 16:02 UTC, Frédérick Capovilla
Details | Diff | Splinter Review
New theme for the OPAC. (96.81 KB, patch)
2012-08-08 18:35 UTC, Frédérick Capovilla
Details | Diff | Splinter Review
Add a mobile view for the OPAC using mediaqueries (35.37 KB, patch)
2012-08-08 19:08 UTC, Frédérick Capovilla
Details | Diff | Splinter Review
Add a mobile view for the OPAC using mediaqueries (34.91 KB, patch)
2012-08-08 19:13 UTC, Frédérick Capovilla
Details | Diff | Splinter Review
Add system preferences to configure the mobile view. (11.51 KB, patch)
2012-08-09 21:47 UTC, Frédérick Capovilla
Details | Diff | Splinter Review
Bug 8597: Improve template markup to prepare for mobile (16.95 KB, patch)
2012-08-13 00:28 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: Create new CCSR theme (125.04 KB, patch)
2012-08-13 00:28 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: Add mobile functionality to ccsr theme (21.80 KB, patch)
2012-08-13 00:28 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: fix hardcoded references to prog in ccsr (2.60 KB, patch)
2012-08-13 00:29 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Add system preferences to configure the mobile view. (16.29 KB, patch)
2012-08-13 17:34 UTC, Frédérick Capovilla
Details | Diff | Splinter Review
Bug 8597: Improve template markup to prepare for mobile (16.97 KB, patch)
2012-08-28 02:10 UTC, Chris Cormack
Details | Diff | Splinter Review
Bug 8597: Create new CCSR theme (125.04 KB, patch)
2012-08-28 02:11 UTC, Chris Cormack
Details | Diff | Splinter Review
Bug 8597: Add mobile functionality to ccsr theme (21.82 KB, patch)
2012-08-28 02:12 UTC, Chris Cormack
Details | Diff | Splinter Review
Bug 8597: fix hardcoded references to prog in ccsr (2.61 KB, patch)
2012-08-28 02:13 UTC, Chris Cormack
Details | Diff | Splinter Review
Bug 8597: Add CSS, JS, and images to ccsr theme (1.35 MB, patch)
2012-08-28 02:21 UTC, Chris Cormack
Details | Diff | Splinter Review
Bug 8597: Add system preferences to configure the mobile view. (17.15 KB, patch)
2012-08-28 02:22 UTC, Chris Cormack
Details | Diff | Splinter Review
Bug 8597 follow-up: add missing lib files (1.21 MB, patch)
2012-08-28 02:22 UTC, Chris Cormack
Details | Diff | Splinter Review
screen-shot... (160.40 KB, image/png)
2012-08-31 04:27 UTC, Mason James
Details
Bug 8597: Add system preferences to configure the mobile view. (17.37 KB, patch)
2012-09-05 12:02 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597 follow-up: add missing lib files (866.14 KB, patch)
2012-09-05 12:03 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: Improve template markup to prepare for mobile (17.01 KB, patch)
2012-09-07 16:40 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: Create new CCSR theme (125.07 KB, patch)
2012-09-07 16:41 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: Add mobile functionality to ccsr theme (21.85 KB, patch)
2012-09-07 16:41 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: fix hardcoded references to prog in ccsr (2.65 KB, patch)
2012-09-07 16:41 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: Add CSS, JS, and images to ccsr theme (1.35 MB, patch)
2012-09-07 16:41 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597: Add system preferences to configure the mobile view. (17.86 KB, patch)
2012-09-07 16:42 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Bug 8597 follow-up: add missing lib files (866.14 KB, patch)
2012-09-07 16:42 UTC, Jared Camins-Esakov
Details | Diff | Splinter Review
Qote Of The day Breaking display (56.25 KB, image/png)
2012-09-12 16:16 UTC, Paul Poulain
Details
homepage (141.32 KB, image/png)
2012-10-02 19:04 UTC, Nicole C. Engard
Details
patron menu at bottom (161.46 KB, image/png)
2012-10-02 19:04 UTC, Nicole C. Engard
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Frédérick Capovilla 2012-08-08 15:55:16 UTC Comment hidden (obsolete)
Comment 1 Frédérick Capovilla 2012-08-08 15:55:59 UTC Comment hidden (obsolete)
Comment 2 Frédérick Capovilla 2012-08-08 16:02:13 UTC Comment hidden (obsolete)
Comment 3 Maxime Pelletier 2012-08-08 16:19:54 UTC
A few notes :

The mobile css needs our there to work. You can see what it looks like on one of our installations at https://sherbrooke dot koha.ccsr.qc.ca/. Just resize the window if you want to see the mobile view.
Comment 4 Frédérick Capovilla 2012-08-08 18:35:25 UTC Comment hidden (obsolete)
Comment 5 Frédérick Capovilla 2012-08-08 19:08:20 UTC Comment hidden (obsolete)
Comment 6 Frédérick Capovilla 2012-08-08 19:13:29 UTC Comment hidden (obsolete)
Comment 7 Frédérick Capovilla 2012-08-09 21:47:35 UTC Comment hidden (obsolete)
Comment 8 Jared Camins-Esakov 2012-08-11 17:10:03 UTC
Marking failed QA for two reasons (for now):

1) The new theme apparently requires particular configuration which is not described on the patch. When I tried applying these patches to Master, I got the following: http://screencast.com/t/8icjG7ovzXi (notice the messy masthead, which looks nothing like the stylish affair on the Sherbrooke catalogue). In order for the theme to be usable, it will have to work on existing installations, without requiring everyone who upgrades to reconfigure their system. 
2) Portions of the interface are now in French, even though I have the language still set to English.
Comment 9 Chris Cormack 2012-08-11 19:06:42 UTC
(In reply to comment #8)
> Marking failed QA for two reasons (for now):
> 
> 1) The new theme apparently requires particular configuration which is not
> described on the patch. When I tried applying these patches to Master, I got
> the following: http://screencast.com/t/8icjG7ovzXi (notice the messy
> masthead, which looks nothing like the stylish affair on the Sherbrooke
> catalogue). In order for the theme to be usable, it will have to work on
> existing installations, without requiring everyone who upgrades to
> reconfigure their system. 

Weird, I applied it to master and got http://opac.koha.workbuffer.org/. Do you have some added css or jquery, that would be breaking it? I don't think its possible or even desirable to try and make the theme work with whatever customised css/jquery someone has. Applying to stock master would be fine by me.

> 2) Portions of the interface are now in French, even though I have the
> language still set to English.

I see that as having the need for some follow ups.
Comment 10 Jared Camins-Esakov 2012-08-12 12:49:40 UTC
I don't have anything in OPACUserCSS or OPACUserJS. It turns out the problem was that I didn't have anything in the opaccolorstylesheet syspref. It has to have colors.css, which I guess is the default?
Comment 11 Jared Camins-Esakov 2012-08-12 15:56:07 UTC
Since the colors.css file has always been optional before, I think we need to gracefully degrade if it is left blank or is set to a CSS file other than the default. Perhaps we could either A) move all the layout CSS out of opac.css into the new colors.css or B) move the additional layout CSS out of colors.css into opac.css? As a general rule, moving all the new theme code into as few files as possible would probably be good, since we don't want to force libraries who are happy with their current layout to stop upgrading Koha. If we were able to put everything into a ccsr.css file, so that libraries could simply switch it on by changing colors.css to ccsr.css (or whatever the file is called), that might be the best of both worlds.

I really like the mobile view, but I am a bit perplexed about how to deal with the text in the CSS file. What about putting the labels into the markup, and having opac.css hide them, then mobile.css override the display:none? I'm going to experiment with this.
Comment 12 Jared Camins-Esakov 2012-08-12 16:07:09 UTC
Frédérick,

Did you attach the right patch for the last one? The system preferences don't appear to be added (with sysprefs.sql and updatedatabase.pl), so I'm suspecting that this may actually be an older version of the patch.
Comment 13 Jared Camins-Esakov 2012-08-12 21:47:03 UTC
For those following along in the "Jared's adventure in understanding Koha theming," I have an update! With Chris's help, I have come to better understand how the theming system works in Koha, and have a new proposal: rather than replacing the CSS in prog, we can make this into a separate theme (incorporating many of the markup changes from this theme into prog, since they make little difference in terms of appearance), and that way librarians will be able to choose which theme they prefer.
Comment 14 Jared Camins-Esakov 2012-08-13 00:28:24 UTC Comment hidden (obsolete)
Comment 15 Jared Camins-Esakov 2012-08-13 00:28:40 UTC Comment hidden (obsolete)
Comment 16 Jared Camins-Esakov 2012-08-13 00:28:51 UTC Comment hidden (obsolete)
Comment 17 Jared Camins-Esakov 2012-08-13 00:29:05 UTC Comment hidden (obsolete)
Comment 18 Jared Camins-Esakov 2012-08-13 00:39:29 UTC
The first three patches I uploaded are equivalent to the first two patches from fcapovilla, but with the new theme in a separate ccsr theme directory rather than in prog. The first one incorporates all changes to .tt files, and the second and third incorporate desktop and mobile theme changes to the .inc, .css, and .js files respectively. The fourth patch fixes a hardcoded reference to prog in the ccsr theme. There is a fifth patch which adds all the missing css, javascript, and image assets to the ccsr theme, but it was too large to attach to this bug. I pushed all the patches, as well as the patches for bug 8622 and bug 8623, to the branch bug_8597_theme on my github account at https://github.com/jcamins/koha

Frederick, it should be pretty clear what I did here (I basically just renamed directories), but let me know if you have any questions. I didn't do anything with the system preferences patch because I wasn't sure whether that was the correct patch. An additional note on the system preferences patch: you cannot include TT conditionals inside HTML tags. You need to use a structure like this: [% UNLESS blah %]<span class="selected">[% ELSE %]<span>[% END %]
Comment 19 Jared Camins-Esakov 2012-08-13 00:41:29 UTC
One additional note: please add "Sponsored-by: Centre collégial des services regroupés (CCSR)" (or change that to whatever name you want credited in the release notes) to patches sponsored by CCSR. That way they will get full credit.
Comment 20 Frédérick Capovilla 2012-08-13 14:53:59 UTC
(En réponse au commentaire 18)
> Frederick, it should be pretty clear what I did here (I basically just
> renamed directories), but let me know if you have any questions. I didn't do
> anything with the system preferences patch because I wasn't sure whether
> that was the correct patch. An additional note on the system preferences
> patch: you cannot include TT conditionals inside HTML tags. You need to use
> a structure like this: [% UNLESS blah %]<span class="selected">[% ELSE
> %]<span>[% END %]

Wow, a lot of improvements were made while I was gone for the weekend. Great work Jared!

Sorry for the opaccolorstylesheet preference problem. Many peoples worked on that theme and that preference was set correctly on all our test servers, so I didn't know it was necessary.

For the preferences patch problem, I just forgot to add the SQL modifications. I'll add them in a new patch.
For the TT conditionals problem, I guess the "multi-libraries" part of the code I modified was a bad example that gave me a bad habit. I'll try to fix it too.
Comment 21 Frédérick Capovilla 2012-08-13 15:20:51 UTC
I tried your patches, but I can't get the ccsr theme to work on the OPAC. When I do a search, I get this error : 

Could not create file parser context for file "/home/koha/kohagit/koha-tmpl/opac-tmpl/ccsr/en/xslt/MARC21slim2OPACResults.xsl": No such file or directory at /home/koha/kohagit/C4/XSLT.pm line 217

Also, the ccsr theme isn't translated by the translate.pl script. I guess that would be a bug with the translate.pl script?
Comment 22 Jared Camins-Esakov 2012-08-13 15:50:06 UTC
You need the patch for 8622 for the first problem. I will file a bug about the translators when I get home (just got off the plane on the way).
Comment 23 Frédérick Capovilla 2012-08-13 17:34:32 UTC Comment hidden (obsolete)
Comment 24 Jared Camins-Esakov 2012-08-13 19:01:32 UTC
Please sign off on the latest patches on my github (see previous comment).
Comment 25 Chris Cormack 2012-08-24 23:33:43 UTC
http://opac.koha.workbuffer.org/ is running the patches from github, working really well.

I'd like someone to test too and sign off please.
Comment 26 Chris Cormack 2012-08-28 01:54:38 UTC
After some more testing on my site, and fixing a bug, I am happy to sign this off now.

I will attach the signed off patches.
Comment 27 Chris Cormack 2012-08-28 01:56:38 UTC
Note in order for these to work you must have applied 8622 (which has been signed off) first.
Comment 28 Chris Cormack 2012-08-28 02:10:53 UTC Comment hidden (obsolete)
Comment 29 Chris Cormack 2012-08-28 02:11:27 UTC Comment hidden (obsolete)
Comment 30 Chris Cormack 2012-08-28 02:12:44 UTC Comment hidden (obsolete)
Comment 31 Chris Cormack 2012-08-28 02:13:22 UTC Comment hidden (obsolete)
Comment 32 Chris Cormack 2012-08-28 02:21:14 UTC Comment hidden (obsolete)
Comment 33 Chris Cormack 2012-08-28 02:22:22 UTC Comment hidden (obsolete)
Comment 34 Chris Cormack 2012-08-28 02:22:51 UTC Comment hidden (obsolete)
Comment 35 Mason James 2012-08-31 04:24:43 UTC
(In reply to comment #34)
> Created attachment 11859 [details] [review]
> Bug 8597 follow-up: add missing lib files
> 
> Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>

tested it, looks good, works well :)

passing QA on this...


$ koha-qa.pl -c 7

testing 7 commit(s) (applied to commit 4b071b1)
 * 1ee569b Bug 8597 follow-up: add missing lib files
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/AJS.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/AJS_fx.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/LGPL.txt
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/about.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/advance_usage.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/combiner.py
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/compressing_greybox.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/compression_lib/AJS_minify.py
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/compression_lib/__init__.py
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/examples.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/auto_deco.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/base/AJS.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/base/AJS_fx.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/base/base.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/base/base.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/base/loader_frame.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/gallery/gallery.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/gallery/gallery.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/set/set.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/set/set.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/window/window.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/greybox_source/window/window.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/installation.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/normal_usage.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/static_files/help.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/GreyBox_v5_5/static_files/help.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/gb_scripts.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/gb_styles.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/greybox/loader_frame.html
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/jquery-ui.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/jquery-ui.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/jquery.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.checkboxes.min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.dataTables.min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.highlight-3.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.hoverIntent.minified.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.metadata.min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.rating.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.tablesorter.min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.tools.min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/button.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/container.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/container/container-min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/container/container_core-min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/menu.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/menu/menu-min.js
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/reset-fonts-grids.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/skin.css
      koha-tmpl/opac-tmpl/ccsr/en/lib/yui/utilities/utilities.js

 * e7836b0 Bug 8597: Add system preferences to configure the mobile view.
      C4/Auth.pm
      installer/data/mysql/sysprefs.sql
      installer/data/mysql/updatedatabase.pl
      koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences/opac.pref
      koha-tmpl/opac-tmpl/ccsr/en/css/mobile.css
      koha-tmpl/opac-tmpl/ccsr/en/css/opac.css
      koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc
      koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc
      koha-tmpl/opac-tmpl/prog/en/css/opac.css
      koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc
      koha-tmpl/opac-tmpl/prog/en/modules/opac-main.tt

 * 7dad234 Bug 8597: Add CSS, JS, and images to ccsr theme
      koha-tmpl/opac-tmpl/ccsr/en/css/babeltheque.css
      koha-tmpl/opac-tmpl/ccsr/en/css/datatables.css
      koha-tmpl/opac-tmpl/ccsr/en/css/hierarchy.css
      koha-tmpl/opac-tmpl/ccsr/en/css/jquery.rating.css
      koha-tmpl/opac-tmpl/ccsr/en/css/opac.css
      koha-tmpl/opac-tmpl/ccsr/en/css/print.css
      koha-tmpl/opac-tmpl/ccsr/en/css/sanop.css
      koha-tmpl/opac-tmpl/ccsr/en/css/sco.css
      koha-tmpl/opac-tmpl/ccsr/en/js/amazonimages.js
      koha-tmpl/opac-tmpl/ccsr/en/js/bakertaylorimages.js
      koha-tmpl/opac-tmpl/ccsr/en/js/datatables.js
      koha-tmpl/opac-tmpl/ccsr/en/js/google-jackets.js
      koha-tmpl/opac-tmpl/ccsr/en/js/googleindictransliteration.js
      koha-tmpl/opac-tmpl/ccsr/en/js/localcovers.js
      koha-tmpl/opac-tmpl/ccsr/en/js/openlibrary.js
      koha-tmpl/opac-tmpl/ccsr/en/js/tags.js
      koha-tmpl/opac-tmpl/ccsr/itemtypeimg/crystal-clear/_COPYING.txt
      koha-tmpl/opac-tmpl/ccsr/itemtypeimg/crystal-clear/_README.txt

 * c43ace1 Bug 8597: fix hardcoded references to prog in ccsr
      koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc

 * 77218e0 Bug 8597: Add mobile functionality to ccsr theme
      koha-tmpl/opac-tmpl/ccsr/en/css/mobile.css
      koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc
      koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc
      koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc
      koha-tmpl/opac-tmpl/ccsr/en/includes/usermenu.inc
      koha-tmpl/opac-tmpl/ccsr/en/js/script.js

 * 077d353 Bug 8597: Create new CCSR theme
      koha-tmpl/opac-tmpl/ccsr/en/css/colors.css
      koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc
      koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc
      koha-tmpl/opac-tmpl/ccsr/en/includes/navigation.inc
      koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc
      koha-tmpl/opac-tmpl/ccsr/en/js/basket.js
      koha-tmpl/opac-tmpl/ccsr/en/js/script.js
      koha-tmpl/opac-tmpl/lib/jquery/plugins/jquery.jqtransform_select.js

 * 06a7496 Bug 8597: Improve template markup to prepare for mobile
      koha-tmpl/opac-tmpl/prog/en/css/opac.css
      koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt
      koha-tmpl/opac-tmpl/prog/en/modules/opac-reserve.tt
      koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt
      koha-tmpl/opac-tmpl/prog/en/modules/opac-user.tt

- perlcritic-progressive tests...                 OK
- perl -c syntax tests...                         OK
- xt/tt_valid.t tests...                          OK
- xt/author/valid-template.t tests...             OK
- t/00-valid-xml.t tests...                       OK
Comment 36 Mason James 2012-08-31 04:27:52 UTC
Created attachment 11902 [details]
screen-shot...
Comment 37 Paul Poulain 2012-09-05 11:30:35 UTC
The 6th patch does not apply:
Bug 8597: Add system preferences to configure the mobile view.
Apply? [yn] y

Applying: Bug 8597: Add system preferences to configure the mobile view.
fatal: sha1 information is lacking or useless (koha-tmpl/opac-tmpl/ccsr/en/css/opac.css).
Repository lacks necessary blobs to fall back on 3-way merge.
Cannot fall back to three-way merge.
Patch failed at 0001 Bug 8597: Add system preferences to configure the mobile view.
When you have resolved this problem run "git am --resolved".
If you would prefer to skip this patch, instead run "git am --skip".
To restore the original branch and stop patching run "git am --abort".
Patch left in /tmp/Bug-8597-Add-system-preferences-to-configure-the-m-byW262.patch
Comment 38 Jared Camins-Esakov 2012-09-05 12:02:44 UTC Comment hidden (obsolete)
Comment 39 Jared Camins-Esakov 2012-09-05 12:03:12 UTC Comment hidden (obsolete)
Comment 40 Paul Poulain 2012-09-07 16:32:11 UTC
I still can't apply patch #6

Bug 8597: Add system preferences to configure the mobile view.
Apply? [yn] y

Applying: Bug 8597: Add system preferences to configure the mobile view.
fatal: sha1 information is lacking or useless (koha-tmpl/opac-tmpl/ccsr/en/css/opac.css).
Repository lacks necessary blobs to fall back on 3-way merge.
Cannot fall back to three-way merge.
Patch failed at 0001 Bug 8597: Add system preferences to configure the mobile view.
When you have resolved this problem run "git am --resolved".
If you would prefer to skip this patch, instead run "git am --skip".
To restore the original branch and stop patching run "git am --abort".
Patch left in /tmp/Bug-8597-Add-system-preferences-to-configure-the-m-IzlCyk.patch


(Also note that there is a trivial conflict on patch #1)
Comment 41 Jared Camins-Esakov 2012-09-07 16:40:44 UTC
Created attachment 12060 [details] [review]
Bug 8597: Improve template markup to prepare for mobile

The templates were missing classes on a number of elements that
will need classes in order for a mobile view to function.

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 42 Jared Camins-Esakov 2012-09-07 16:41:01 UTC
Created attachment 12061 [details] [review]
Bug 8597: Create new CCSR theme

Creates a new theme for the OPAC called "ccsr." The new theme has a much
cleaner, more modern look than the prog theme, and is designed from the
ground up to work on mobile devices using media queries. A later patch
will include the mobile view.

In order to activate the theme, change the opacthemes syspref to 'ccsr'
and make sure that your opaccolorstylesheet is set to 'colors.css.'

Sponsored-by: Centre collégial des services regroupés (CCSR)

Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
All work was originally done by Frederick, but I converted his
modifications to the prog template into a new template called ccsr.

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 43 Jared Camins-Esakov 2012-09-07 16:41:13 UTC
Created attachment 12063 [details] [review]
Bug 8597: Add mobile functionality to ccsr theme

This patch adds the promised media query-based mobile view to the
ccsr theme. You can try the mobile view by resizing your browser window
until it is phone-sized.

Sponsored-by: Centre collégial des services regroupés (CCSR)

Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
All work was originally done by Frederick, but I converted his
modifications to the prog template into a new template called ccsr.

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 44 Jared Camins-Esakov 2012-09-07 16:41:23 UTC
Created attachment 12064 [details] [review]
Bug 8597: fix hardcoded references to prog in ccsr

There were a few hardcoded references to the prog theme in the new
ccsr theme's files.

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 45 Jared Camins-Esakov 2012-09-07 16:41:51 UTC
Created attachment 12065 [details] [review]
Bug 8597: Add CSS, JS, and images to ccsr theme

In order for themes to work, they must include all CSS, Javascript, and
image assets that they use. This patch adds all CSS, Javascript, and
images from the prog theme to ccsr, EXCEPT for the famfamfam image set,
which needs to be moved outside of the theme directories, per bug 8624.

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 46 Jared Camins-Esakov 2012-09-07 16:42:02 UTC
Created attachment 12066 [details] [review]
Bug 8597: Add system preferences to configure the mobile view.

This patch adds the following system preferences:
* OpacMainUserBlockMobile - alternate content for the MainUserBlock for
  mobile
* OPACMobileUserCSS - custom CSS for mobile views only
* OpacShowFiltersPulldownMobile - whether or not to show the index
  dropdown on the mobile view
* OpacShowLibrariesPulldownMobile - whether or not to show the library
  dropdown on the mobile view

Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
Comment 47 Jared Camins-Esakov 2012-09-07 16:42:26 UTC
Created attachment 12067 [details] [review]
Bug 8597 follow-up: add missing lib files

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
Comment 48 Paul Poulain 2012-09-12 16:03:31 UTC
I have some problems making it work. What I did:
 * apply all patches
 * updated opacthemes syspref to ccsr
 * checked that other css-related sysprefs are empty
 * cleared all FF cache

The display changes when I reduce windows size, but it is ugly (reduced or large)

(I also checked with chrome, freshly launched)

source code says:
<link rel="stylesheet" type="text/css" href="/opac-tmpl/ccsr/en/lib/jquery/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/opac-tmpl/ccsr/en/css/opac.css" />
<link rel="stylesheet" type="text/css" media="print" href="/opac-tmpl/ccsr/en/css/print.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)" href="/opac-tmpl/ccsr/en/css/mobile.css" />

which seems OK to me

Any hint about something I could have missed welcomed...
Comment 49 Paul Poulain 2012-09-12 16:15:35 UTC
OK, it's much better when you add opac.css to opacusercss sypref, but still not perfect (screenshot coming)
Comment 50 Paul Poulain 2012-09-12 16:16:12 UTC
Created attachment 12174 [details]
Qote Of The day Breaking display
Comment 51 Paul Poulain 2012-09-13 08:43:30 UTC
Even if I discard the QOTD thing, that is minor, there's something that is annoying me with this patch, I'll try to share what.
My main question = why does it add a new template, and not just the mobile stuff ? Activating the mobile support means activating ccsr template AND updating opaccolorstylesheet sysprefs.

wouldn't the 1st patch + 
+<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)" href="[% themelang %]/css/mobile.css" />
+ a prog/css/mobile.css (+ a few other markup changes probably)
have achieved the same result ?

I think we're doing 2 things in the same patch, and it wrong.

I made a little bit test that worked quite well:
 * applied all patches
 * set opacthemes=prog
 * nothing in opaccolorstylesheet
 * added the 2 previous lines to koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc
 * copied the mobile.css into prog/ directory

=> it works well ! (except a few glitches that could be improved later.

As conclusion:
 * the 2 previous lines must be added to this patch to enable mobile support for prog templates, with mobile.css, and tweaking it to solve minor problems.
 * adding the cssr theme itself is debatable, but i'm not sure it's a good idea to add it = it has been proven over time that maintaining 2 sets of templates is *very* hard. If cssr want to use it's own set, I'm fine with it. But maintaining both sets on official Koha should be a community decision, not something we introduce without warning.
Comment 52 Chris Cormack 2012-09-13 08:53:29 UTC
> 
> As conclusion:
>  * the 2 previous lines must be added to this patch to enable mobile support
> for prog templates, with mobile.css, and tweaking it to solve minor problems.
>  * adding the cssr theme itself is debatable, but i'm not sure it's a good
> idea to add it = it has been proven over time that maintaining 2 sets of
> templates is *very* hard. If cssr want to use it's own set, I'm fine with
> it. But maintaining both sets on official Koha should be a community
> decision, not something we introduce without warning.

Surely people just don't switch to the cssr theme if they don't want it? I really don't see any problem adding another theme. If it isn't maintained we just take it back out. The important thing is that the theme stuff is fixed so we can actually switch themes.
Comment 53 Mason James 2012-09-13 10:15:58 UTC
(In reply to comment #52)
> > 
> > As conclusion:
> >  * the 2 previous lines must be added to this patch to enable mobile support
> > for prog templates, with mobile.css, and tweaking it to solve minor problems.
> >  * adding the cssr theme itself is debatable, but i'm not sure it's a good
> > idea to add it = it has been proven over time that maintaining 2 sets of
> > templates is *very* hard. If cssr want to use it's own set, I'm fine with
> > it. But maintaining both sets on official Koha should be a community
> > decision, not something we introduce without warning.

> Surely people just don't switch to the cssr theme if they don't want it? I
> really don't see any problem adding another theme. If it isn't maintained we
> just take it back out. The important thing is that the theme stuff is fixed
> so we can actually switch themes.

+1 

i strongly agree with Chris here

adding the 'CCSR' theme will not break any functionality with the current 'Prog' theme

maintaining difference sets of templates will become easier, not harder, as we continue to improve Koha

Paul, please give us the opportunity to do that
Comment 54 Jared Camins-Esakov 2012-09-13 11:18:20 UTC
(In reply to comment #51)
> Even if I discard the QOTD thing, that is minor, there's something that is
> annoying me with this patch, I'll try to share what.
> My main question = why does it add a new template, and not just the mobile
> stuff ? Activating the mobile support means activating ccsr template AND
> updating opaccolorstylesheet sysprefs.
> 
> wouldn't the 1st patch + 
> +<meta name="viewport"
> content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-
> scale=1.0,user-scalable=no">
> +<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)"
> href="[% themelang %]/css/mobile.css" />
> + a prog/css/mobile.css (+ a few other markup changes probably)
> have achieved the same result ?

Not without changing the prog display greatly. Personally, I like the ccsr theme a lot better than prog, but it does change things rather a lot. The initial patch changed prog, and I was not comfortable with it because it *forced* everyone to change their layout, breaking any and all custom CSS, and probably a lot of jQuery. Anyone who doesn't like the ccsr theme can just keep using prog. With the changes introduced in this and other patches, maintaining multiple sets of templates will not be too difficult.
+1 for pushing
Comment 55 Paul Poulain 2012-09-13 11:55:46 UTC
(In reply to comment #53)
> Paul, please give us the opportunity to do that

Just to be clear. I was wondering if it's a good idea. I'm still not sure:
> Surely people just don't switch to the cssr theme if they don't want it?
mmm... either I've missed something, or we can't keep prog AND get mobile support atm.
So, there are 2 options:
 * keep prog templates & custom css, don't get mobile view.
 * switch to cssr, get mobile stuff, but completely change the OPAC display, which can (will !) break custom css, html, and things like that.

I would much prefer a 3rd option :
 * keep prog template & custom css AND get mobile view.
> I
> really don't see any problem adding another theme. If it isn't maintained we
> just take it back out. The important thing is that the theme stuff is fixed
> so we can actually switch themes.
Well, if something is provided in a released version, then we must have a reasonable expectation that it will be maintained.

> > wouldn't the 1st patch + 
> > +<meta name="viewport"
> > content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-
> > scale=1.0,user-scalable=no">
> > +<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)"
> > href="[% themelang %]/css/mobile.css" />
> > + a prog/css/mobile.css (+ a few other markup changes probably)
> > have achieved the same result ?
> 
> Not without changing the prog display greatly.
Really ? Jared, could you give more details ? I tried and things seems to work quite correctly.
Comment 56 Jared Camins-Esakov 2012-09-13 12:00:05 UTC
(In reply to comment #55)
> (In reply to comment #53)
> > Paul, please give us the opportunity to do that
> 
> Just to be clear. I was wondering if it's a good idea. I'm still not sure:
> > Surely people just don't switch to the cssr theme if they don't want it?
> mmm... either I've missed something, or we can't keep prog AND get mobile
> support atm.
> So, there are 2 options:
>  * keep prog templates & custom css, don't get mobile view.
>  * switch to cssr, get mobile stuff, but completely change the OPAC display,
> which can (will !) break custom css, html, and things like that.

That is correct.

> I would much prefer a 3rd option :
>  * keep prog template & custom css AND get mobile view.
> > I
> > really don't see any problem adding another theme. If it isn't maintained we
> > just take it back out. The important thing is that the theme stuff is fixed
> > so we can actually switch themes.
> Well, if something is provided in a released version, then we must have a
> reasonable expectation that it will be maintained.

I will be using ccsr instead of prog, so I will certainly be maintaining it for the next several versions at least. When I said "if it isn't maintained" I had in mind people getting bored of it in a few years, not for 3.12 or 3.14. Also, the ccsr theme involves very few files, really.

> > > wouldn't the 1st patch + 
> > > +<meta name="viewport"
> > > content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-
> > > scale=1.0,user-scalable=no">
> > > +<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)"
> > > href="[% themelang %]/css/mobile.css" />
> > > + a prog/css/mobile.css (+ a few other markup changes probably)
> > > have achieved the same result ?
> > 
> > Not without changing the prog display greatly.
> Really ? Jared, could you give more details ? I tried and things seems to
> work quite correctly.

I don't have screenshots, nor time to test, but it made a mess of the masthead area, and conflicted with custom CSS to do that.

Also, prog is hideous. I think the ccsr theme would be worthwhile even without mobile support.
Comment 57 Katrin Fischer 2012-09-13 17:04:50 UTC
I think it's great that the themes are working again and as I understand it you don't have to create a whole set, you can also use it and only change a view files. Also I think this is a great chance to introduce something new in a very safe way - if people like it, we will have to discuss how to move on with themes.
Comment 58 Paul Poulain 2012-09-17 15:09:31 UTC
will test and think of it again, it's a damn useful enhancement !
Comment 59 Mason James 2012-09-18 03:18:52 UTC
(In reply to comment #58)
> will test and think of it again, it's a damn useful enhancement !

awesome! thanks Paul :)
Comment 60 Paul Poulain 2012-09-18 12:52:02 UTC
OK, patch pushed !

Here is what I plan to add to the next RM newsletter. This enhancement is very important, and must be announced as widely as possible.
==========================
Bug 8597 New theme for OPAC with mobile view

This patch is *very* important. Koha is now shipped with a specific stylesheet for mobile devices. It means that your patrons using your catalogue with their smartphone will get a simplified OPAC, with all important features, but adapted to their small screen.
To turn this ON :
 * go to your systempreferences
 * search "opacthemes" and switch to CCSR
 * search "opaccolorstylesheet" and enter "colors.css"
 * reload your opac home page. Don't forget to clear your cache - shift-reload on Firefox -
Note that, if you activate this feature:
 * you'll have to update your own stylesheet if you have one.
 * there are still some minor glitches (for example, if you use "Quote Of The Day" feature, with a "long" quote), that will be fixed ASAP.

Overall, this enhancement is worth the glitches, that's why I've pushed it.
===========================

QA comment:
I'd like to have a follow-up merging opac.css and colors.css in ccsr template : currently, we're loading 2 very large CSS files, with a lot of properties that could be in only one. Once both files are merged, the opaccolorstylesheet will be freed again for localuses. Plus, what is in colors.css is mandatory, and the systempreference description let librarians think it is not.

Also note that if you don't change anything to opacthemes and opaccolorstylesheet, everything still works as previously.
Comment 61 Owen Leonard 2012-09-18 14:24:22 UTC
This new template references assets which don't exist in this template directory:

"NetworkError: 404 Not Found - http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/jquery-ui.css"
"NetworkError: 404 Not Found - http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.hoverIntent.minified.js"
"NetworkError: 404 Not Found - http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/jquery.js"
"NetworkError: 404 Not Found - http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/jquery-ui.js"
"NetworkError: 404 Not Found - http://localhost:88/opac-tmpl/ccsr/en/lib/yui/skin.css"
"NetworkError: 404 Not Found - http://localhost:88/opac-tmpl/ccsr/en/lib/yui/reset-fonts-grids.css"

Was it expected that Koha would fall back on these items in the prog director?

Including these errors about missing assets I get 15 errors in Firebug--the rest being caused by the absence of jQuery.

masthead.inc has non-English text:

<p><a href="/cgi-bin/koha/opac-main.pl" title="Accueil">   Accueil    </a>
[% IF ( searchdesc ) %]<span class="rsaquo"> &rsaquo; </span><a href="/cgi-bin/koha/opac-search.pl" title="rechercher">    Recherche   </a><span class="rsaquo"> &rsaquo; </span>
Comment 62 Jared Camins-Esakov 2012-09-18 14:29:47 UTC
(In reply to comment #61)
> This new template references assets which don't exist in this template
> directory:
> 
> "NetworkError: 404 Not Found -
> http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/jquery-ui.css"
> "NetworkError: 404 Not Found -
> http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/plugins/jquery.hoverIntent.
> minified.js"
> "NetworkError: 404 Not Found -
> http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/jquery.js"
> "NetworkError: 404 Not Found -
> http://localhost:88/opac-tmpl/ccsr/en/lib/jquery/jquery-ui.js"
> "NetworkError: 404 Not Found -
> http://localhost:88/opac-tmpl/ccsr/en/lib/yui/skin.css"
> "NetworkError: 404 Not Found -
> http://localhost:88/opac-tmpl/ccsr/en/lib/yui/reset-fonts-grids.css"
> 
> Was it expected that Koha would fall back on these items in the prog
> director?

No, those files were added by one of the patches. "Add missing lib files." I will check when I am able whether that patch was included when this bug was pushed to master.

> Including these errors about missing assets I get 15 errors in Firebug--the
> rest being caused by the absence of jQuery.
> 
> masthead.inc has non-English text:
> 
> <p><a href="/cgi-bin/koha/opac-main.pl" title="Accueil">   Accueil    </a>
> [% IF ( searchdesc ) %]<span class="rsaquo"> &rsaquo; </span><a
> href="/cgi-bin/koha/opac-search.pl" title="rechercher">    Recherche  
> </a><span class="rsaquo"> &rsaquo; </span>

Whoops, that was just an oversite. I fixed a bunch of French-language strings, but apparently missed those two.
Comment 63 Jared Camins-Esakov 2012-09-18 14:32:50 UTC
Paul,

It looks like the last patch did not make it into master. Could you please push it when you get a chance so that the ccsr theme will work?

Thanks.
Jared
Comment 64 Paul Poulain 2012-09-19 09:45:47 UTC
(In reply to comment #63)
> Paul,
> 
> It looks like the last patch did not make it into master. Could you please
> push it when you get a chance so that the ccsr theme will work?
Last patch pushed, I don't know what I made to miss that ! (probably because those patches have duplicate encoding UTF-8 header, so I had to apply them one by one after removing the duplicate line.

(In reply to comment #61)
> masthead.inc has non-English text:
> 
> <p><a href="/cgi-bin/koha/opac-main.pl" title="Accueil">   Accueil    </a>
> [% IF ( searchdesc ) %]<span class="rsaquo"> &rsaquo; </span><a
> href="/cgi-bin/koha/opac-search.pl" title="rechercher">    Recherche  
> </a><span class="rsaquo"> &rsaquo; </span>

Yikes ! As I speak french, there are some french data (like LibraryName, OpacNav,...) so I didn't spotted those french strings in the middle of english ;-)

I've pushed a fix for that too
Comment 65 Katrin Fischer 2012-09-19 09:51:38 UTC
Wondering if we have to teach the translation scripts about the new theme?
Comment 66 Nicole C. Engard 2012-10-02 00:38:06 UTC
I need some documentation help on this.  Does this change the standard OPAC template as well? It looks to me like it does, that's why I ask.  Shouldn't we have a computer view and a monitor view?  Any help/documentation pointers are welcome.
Comment 67 Nicole C. Engard 2012-10-02 19:04:22 UTC
Created attachment 12651 [details]
homepage

My home page on mac with FF has all the sidebars at the bottom ...
Comment 68 Nicole C. Engard 2012-10-02 19:04:48 UTC
Created attachment 12652 [details]
patron menu at bottom

Same on my patron details
Comment 69 Nicole C. Engard 2012-10-02 19:08:17 UTC
(In reply to comment #67)
> Created attachment 12651 [details]
> homepage
> 
> My home page on mac with FF has all the sidebars at the bottom ...

It's the same on Mac and Chrome.
Comment 70 Paul Poulain 2012-10-08 10:21:26 UTC
(In reply to comment #69)
> (In reply to comment #67)
> > Created attachment 12651 [details]
> > homepage
> > 
> > My home page on mac with FF has all the sidebars at the bottom ...
> 
> It's the same on Mac and Chrome.

It's fixed now. That was some YUI libraries that were missing for the ccsr theme
Comment 71 Robin Sheat 2013-03-01 01:18:25 UTC
*** Bug 9736 has been marked as a duplicate of this bug. ***