Feature #6111
JQuery Mobile template
Description
Testing out a mobile version of Chamilo using JQuery Mobile by updating the default template (copying default/ to jqm/).
Related issues
Associated revisions
Fixing default template settings see #6111
Added JQuery Mobile template first draft - refs #6111
Removed top bar and help buttons from mobile template - refs #6111
Removed hot courses block from mobile template - refs #6111
Using the app.template_style instead of a harcoded value of default see #6111
History
Updated by Yannick Warnier over 6 years ago
Updated by - Status changed from New to Needs more info
- Assignee set to Julio Montoya
Julio, I've changed the template name in global.inc.php ( + in template.lib.php + I've put my server in test mode, but it's still not taking my new template directory into account. Any idea why this might be?
There's no content in my temp/twig/ dir.
Updated by Julio Montoya over 6 years ago
Updated by - Assignee changed from Julio Montoya to Yannick Warnier
1. Did you create a folder with your modified files?
main/templates/jqm
2. I sent some fixes now you can change the setting in global.inc.php
$app['template_style'] = 'default';
If you change it to 'experimental' it will load the 'default/layout/experimental' folder
Updated by Yannick Warnier over 6 years ago
- Assignee changed from Yannick Warnier to Julio Montoya
It still looks like it loads the layout files from the templates/default/layout/ directory.
When I select "experimental" in global.inc.php and I load the homepage (as anonymous), I still get the default template.
When I connect and get to http://my.chamilo.net/web/userportal, I get "500 - Template "experimental/userportal/index.tpl" is not defined (). " (which is alright, I can live with that).
However, what I did is the following: I copied the template/default/ directory to template/jqm/ and I added a <link> line in template/jqm/layout/head.tpl, just below the viewport line (to make it easy to spot).
Whatever I do, it seems like the template used is never 'jqm'... (maybe it is for jqm/userportal/index.tpl, but then I would expect it to load "all" tpls from my folder, not just a few random ones...
Updated by Yannick Warnier over 6 years ago
And when I add the same <link> line to main/template/default/layout/head.tpl, I can see the change straight away, which proves that it is not a problem of not refreshing the tpl, it is just a problem of loading the default instead of the template defined.
Updated by Julio Montoya over 6 years ago
Yannick Warnier wrote:
It still looks like it loads the layout files from the templates/default/layout/ directory.
When I select "experimental" in global.inc.php and I load the homepage (as anonymous), I still get the default template.
When I connect and get to http://my.chamilo.net/web/userportal, I get "500 - Template "experimental/userportal/index.tpl" is not defined (). " (which is alright, I can live with that).However, what I did is the following: I copied the template/default/ directory to template/jqm/ and I added a <link> line in template/jqm/layout/head.tpl, just below the viewport line (to make it easy to spot).
Whatever I do, it seems like the template used is never 'jqm'... (maybe it is for jqm/userportal/index.tpl, but then I would expect it to load "all" tpls from my folder, not just a few random ones...
You have to edit this file: layout/jqm/main_header.tpl and change this: with your jqm template
{% include "default/layout/head.tpl" %}
to this:
{% include "jqm/layout/head.tpl" %}
Updated by Julio Montoya over 6 years ago
I think that is not random is hardcoded in the templates using this includes:
{% include "default/layout/head.tpl" %}
A good idea to improve this is to create a twig variable and use this everywhere something like
{% set style = 'default' %}
Updated by Yannick Warnier over 6 years ago
Yes, that is a good idea (although I think it should be theme_dir, not style). "random" was a way of speaking :-)
If you use set theme_dir='default', how do you use it in an include afterwards?
{% include $theme_dir."/layout/head.tpl" %}
?
The way it works now is a bit weird (to have to indicate the template directory to include other files of the same template).
Updated by Yannick Warnier over 6 years ago
- % Done changed from 0 to 10
It's nice to see how just including the JQM library and a few data-* tags make your site look more "mobily" :-)
Updated by Julio Montoya over 6 years ago
"jqm" is too techy you could use just "mobile" or "jquery_mobile" ...
Updated by Yannick Warnier over 6 years ago
- Status changed from Needs more info to Assigned
- Assignee changed from Julio Montoya to Yannick Warnier
True, true...
Updated by Julio Montoya over 6 years ago
This could help too:
When using jqm with bootstrap:
https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme
demo:
http://andymatthews.net/code/jQuery-Mobile-Bootstrap-Theme/listviews.html
Updated by Yannick Warnier over 6 years ago
Apparently this library is the best way to go to detect mobile devices' properties: https://github.com/serbanghita/Mobile-Detect
Removed hardcoded template dir - refs #6111