Resume layout on mobile devices

[Corey Wallis]

Hi,

We are using a Mahara theme that adapts to screen resolutions / sizes, which especially targets mobile devices. The main content of the page is rendered within a narrow column.

The current layout of information in the resume page contains information that is rendered within a table. This table is too wide to fit in a narrow column when viewed on mobile devices. You can see this in the attached screenshot.

While the use of a table for the layout of information works on desktop and larger devices in a narrow column the rows are too long.

Is there any way to have a mobile specific template which could render the information in a narrow column friendly format? Perhaps as a series of lists rather than table rows?

If so where in the code would be a good place to start looking to implement such a template?

With thanks.

-Corey

[Corey Wallis (corey-wallis)]

Please note that this issue also exists for the My Notes page. A screen shot is attached.

I believe this issue exists where any page uses a table to render content and that content is too big to fit in a narrow column theme that would be used for mobile devices.

Being able to change the template used for rendering such pages when displayed on a mobile theme would be very useful.

[Aaron Wells (u-aaronw)]

Hi Corey,

For the resume screens, the layout of the page is controlled by the page templates stored under htdocs/artefact/resume/theme/raw/fragments/ .

You can provide your own alternate files to override these for a custom theme, by creating files of the same names under htdocs/artefact/resume/theme/YOURTHEME/fragments/

Likewise, the "My Notes" page is htdocs/artefact/internal/theme/raw/notes.tpl, and you can override it by creating an htdocs/artefact/internal/theme/YOURTHEME/notes.tpl

It's kind of annoying that you have to put the custom theme override inside the plugin directory, rather than under the /theme directory. I've already filed a bug to fix that: https://bugs.launchpad.net/mahara/+bug/1231755

[Corey Wallis (corey-wallis)]

Hi Aaron,

Thanks for the additional information. I can see the templates and can see how they're used. So a follow up question would be.

Is it possible to load a template dependent on device detection?

For example if the client is using a desktop browser load this template:

htdocs/artefact/resume/theme/raw/fragments/educationhistory.tpl

And if the client is using a mobile browser load this template:

htdocs/artefact/resume/theme/mobile/fragments/educationhistory.tpl

If this is possible, how would you do it?

With thanks.

-Corey

[Aaron Wells (u-aaronw)]

Hi Corey,

There's a flag you can use within a .tpl template to see whether the current user is on a mobile device or not. Two flags, actually.

- $HANDHELD_DEVICE will be true if the user is on a tablet or phone.
- $MOBILE will be true if the user is on a phone.

You can use these in a template file like so:

 {if $HANDHELD_DEVICE}<div>mobile content!</div>{else}<div>desktop content!</div>{/if}

We detect mobile devices using the MobileDetect library (http://mobiledetect.net/ ). It's worth noting that there's a site configuration option to let users disable device detection, in which case if a user disables it, $HANDHELD_DEVICE and $MOBILE will always be false.

We can also detect whether the user is, specifically, on a tablet device, but we're not currently passing that info through to the templates. Though if that's necessary, we could do so pretty easily.

... on the other hand, your specific question was about whether you can change the template file that gets displayed, based on the device detection. And the answer to that, is no, you can't. The specific template file Mahara shows, will always be the one from the user's theme (or, if their theme doesn't provide a copy of that template, it'll show the inherited template from the theme's parent, all the way up to the "raw" theme which is the root parent of all themes.)

Cheers,
Aaron

[Corey Wallis (corey-wallis)]

Hi Aaron,

I've been looking into this again today and I think the issue is more complicated than just changing the template.

I've created a new template, matching the theme name, and can confirm that is being loaded. However each time I load the page the content in the table is exactly the same.

On a whim I deleted the entire table contents in the template, reloaded the page, and the table was still created! In order to see the empty table I needed to disable JavaScript.

Therefore this leads me to believe that there are two things going on here:

1. The template file generates HTML which is sent to the browser.

2. There is JavaScript which is running and at the very least is augmenting the HTML output in the template, and it would appear in this case actually adding content into the template if the content is missing.

With this in mind, do I also need to change the JavaScript that is being loaded on this page and if so where is this JavaScript located?

With thanks.

-Corey

[Jono M (jonom)]

Yes, in Content -> Resume the table is loaded with JavaScript, which is found in htdocs/artefact/resume/lib.php - as far as I can tell the table in the template is (confusingly) only used in the Resume blocktype

Anyway, the table is actually constructed in lines 1029-1078 of that file - it uses the get_tablerenderer_js function in the subclasses (ArtefactTypeEmploymentHistory etc.) to create the actual rows. I guess the advantage of that is that the same function can be used to create new rows ...

[Jono M (jonom)]

Question: Could we move all JS which actually creates layouts into the .tpl files? That would give theme designers the ability to customise the layout while keeping the usability enhancements JS provides.

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/3048

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/3048
Committed: http://gitorious.org/mahara/mahara/commit/70295037f6fb52aa64441c5a570f0297ecdfaba0
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 70295037f6fb52aa64441c5a570f0297ecdfaba0
Author: Jono Mingard <email address hidden>
Date: Wed Feb 26 15:02:10 2014 +1300

Simplify layout of Resume composite tables (Bug #1271779)

Removed date columns, putting the date under the title instead, changed
attachments table to use the new expander style and styled edit buttons
to stack on top of each other for small screens

Change-Id: I1d0d737661c88af95449b6a713d0ce318128b89f
Signed-off-by: Jono Mingard <email address hidden>