project: Moodle
summary: META: Mobile device issues (clean)
description: This is a meta-issue to collect bugs and improvements rising from exploratory tests of Moodle that related specifically to mobile devices (beyond themes).

1.summary: Full screen popup for mobile (filepicker/activitychooser)
description: Filepicker and activity chooser should be full-screen popup in mobile device. They should not be drag-able. Have a look if there are any other popup that should be fullscreen. The focus should be on: - the popup never moves whatever the user action happens inside the popup. - the popup fits the entire screen. Scroll down is allowed till the bottom of the screen is still the popup itself (i.e cant see the moodle site). - remove the rounded corner
2.summary: Make input boxes size consistent and not overlapping with the next level in Assignment advanced grading.
description: Using advanced grading: Add new criteria and edit the levels - the size of the input boxes for name and points are too wide and overlap with the next level. Add new level for the criteria - input text for the name is smaller than the point input text. The size of input boxes should be consistent. Testing this with iPod touch and iPhone4s. Replication steps: Create assignment Set grading method to rubric From side block select: assignment admin > Advanced grading > define rubric On rubric section, click the edit level and add level sections.
3.summary: Printer-friendly version link can be improved
description: Would be great if it auto-triggered the print function of the browser, and if the icon was a little nicer, and maybe had some text beside it to explain it better.
4.summary: Fullscreen activity chooser on tablet screens
description: The activity chooser is already designed for mobile. It skipped most information (icon + description) from the desktop version, and is just a select box. I dont think its an issue as most teacher probably knows what they are. I am just reporting it so we agree if the activity chooser needs works or not (we recently mentioned we needed to fix it but actually forgot it was already working quite well on mobile).
5.summary: Mobile-friendly way to display blocks on small screen
description: "Bootstrap" themes: define the way to display blocks on small screen. At the moment all blocks are displayed at the bottom of the page. In real usage it may be a minor issue (the user only scrolls there when a user needs to go there, so the issue frequency depends how many time a user need to access a block), but it doesnt feel mobile friendly. Possible alternatives to existing: all blocks could be move on a side bar on the right. The bar could be slided (left swipe or hamburger button). each block names could be integrated to a new mobile navigation menu (like the HTML5 mobile app). When you click on the block, it is displayed in one entire page.
6.summary: Enhance render_paging_bar renderer
description: edit: this is an old bug, but Ive just moved it to Mobile devices issues. As well as fixing some bugs and generally making the pagination bar look a bit nicer and making the HTML easier to theme, a primary impact of this change is to make the pagination links more finger friendly on touch based devices. While working on a theme I found that the existing paging bar used in Moodle had various issues, detailed here: I wrote a renderer (and some supporting code) to fix this, and Ill like to integrate the changes back into core Moodle. Just to be clear, Im more interested in getting it fixed than in my code being used. If you want to treat the following as a very specific and detailed bug report then feel free. On the other hand, as long as someone can point me in the right direction on how to do this "the Moodle way" Im happy to entirely rewrite the code to fit in with the core code guidelines. Im not sure which of the above choices is appropriate so for the time being Ill link to the code I wrote in a theme renderer. I went out of my way to avoid touching core code, some of which has bugs I needed to work around, basically reimplementing paging_bar within my theme so someone needs to re-write this before it can be included in core. So the actual renderer code is here: The code that decides which pages to link to (and which to leave out if space is tight) is here: And the code that takes that list of page numbers and turns it into a series of HTML list items with appropriate classnames and containing links is here: And, just for completeness the bit that wraps those in an appropriately classed ul tag is here: Theres unit tests for all of that too. I notice that theres some other bugs against paging_bar with work ongoing at the moment, Ill mark them as related to this. I also noticed that mod_glossary has its own implementation of this idea, with an added ALL button, so there should probably be some harmonisation done there.
7.summary: Book Navigation Particularly Bad With My Mobile Theme
description: When viewing a book on a phone or tablet, the navigation buttons are too small (IMHO) and too close together and to close to the edge of the screen to effectively navigate between pages. If you doubled the current size of the arrows more similar to most current Flip-books and centered (either center bottom or center top or both)with a little space in between the buttons then the usability would be improved dramatically across all devices.
8.summary: Horizontal choices should use inline-block style
description: Currently, if you choose to use the horizontal layout the choices are laid out as if they were one long string of text and any word gap will be used to break the line. It would be better if "display: inline-block" was used instead. In this case if we run out of room on one line it will split in between the different options, and a new line will always start with a radio button and a new option. This is particularly relevant on small screen mobile devices, where line-wrapping is more likely. The style is set on line 18 of mod/choice/styles.css Its probably like this for historical reasons. IE7 didnt support inline-block.
9.summary: Calendar needs to be made more mobile friendly
description: Including AJAX loading/submission of events
10.summary: Clean theme title bar should remain at the top of the screen as you scroll down the page
description: Rather than disappear off the top of the screen, the title and "hamburger" icon should remain at the top of the screen as you scroll down the page
11.summary: Login page is overly verbose for a mobile device
description: We could either hide some of the text, or redesign the page completely.
12.summary: Multiple Front Page Settings for Various Devices
description: If Moodle is really going to be responsive to devices it need different front page settings based on type of device. From a phone I dont want to scroll through news items to get to my courses. From a full-screen, I dont want to see 2/3 of the real estate on the left empty so I need to fill it with something that is ostensibly going to look stupid if its too short or make me scroll when Im on the phone.

Below is an instruction that describes a task, paired with an input that provides an epic with this format: 
"project": "Name of the project" 
"summary": "Summary of the epic user story" 
"description": "Description of the epic user story". Write a response that appropriately completes the request.### Instruction:
Break this epic user story into smaller tasks to help the developers understand the epic better, you can divide this epic into as much as you want depending on the complexity of the epic.
### Input:
project: Moodle
summary: META: Mobile device issues (clean)
description: This is a meta-issue to collect bugs and improvements rising from exploratory tests of Moodle that related specifically to mobile devices (beyond themes).

### Response:
1.summary: Full screen popup for mobile (filepicker/activitychooser)
description: Filepicker and activity chooser should be full-screen popup in mobile device. They should not be drag-able. Have a look if there are any other popup that should be fullscreen. The focus should be on: - the popup never moves whatever the user action happens inside the popup. - the popup fits the entire screen. Scroll down is allowed till the bottom of the screen is still the popup itself (i.e cant see the moodle site). - remove the rounded corner
2.summary: Make input boxes size consistent and not overlapping with the next level in Assignment advanced grading.
description: Using advanced grading: Add new criteria and edit the levels - the size of the input boxes for name and points are too wide and overlap with the next level. Add new level for the criteria - input text for the name is smaller than the point input text. The size of input boxes should be consistent. Testing this with iPod touch and iPhone4s. Replication steps: Create assignment Set grading method to rubric From side block select: assignment admin > Advanced grading > define rubric On rubric section, click the edit level and add level sections.
3.summary: Printer-friendly version link can be improved
description: Would be great if it auto-triggered the print function of the browser, and if the icon was a little nicer, and maybe had some text beside it to explain it better.
4.summary: Fullscreen activity chooser on tablet screens
description: The activity chooser is already designed for mobile. It skipped most information (icon + description) from the desktop version, and is just a select box. I dont think its an issue as most teacher probably knows what they are. I am just reporting it so we agree if the activity chooser needs works or not (we recently mentioned we needed to fix it but actually forgot it was already working quite well on mobile).
5.summary: Mobile-friendly way to display blocks on small screen
description: "Bootstrap" themes: define the way to display blocks on small screen. At the moment all blocks are displayed at the bottom of the page. In real usage it may be a minor issue (the user only scrolls there when a user needs to go there, so the issue frequency depends how many time a user need to access a block), but it doesnt feel mobile friendly. Possible alternatives to existing: all blocks could be move on a side bar on the right. The bar could be slided (left swipe or hamburger button). each block names could be integrated to a new mobile navigation menu (like the HTML5 mobile app). When you click on the block, it is displayed in one entire page.
6.summary: Enhance render_paging_bar renderer
description: edit: this is an old bug, but Ive just moved it to Mobile devices issues. As well as fixing some bugs and generally making the pagination bar look a bit nicer and making the HTML easier to theme, a primary impact of this change is to make the pagination links more finger friendly on touch based devices. While working on a theme I found that the existing paging bar used in Moodle had various issues, detailed here: I wrote a renderer (and some supporting code) to fix this, and Ill like to integrate the changes back into core Moodle. Just to be clear, Im more interested in getting it fixed than in my code being used. If you want to treat the following as a very specific and detailed bug report then feel free. On the other hand, as long as someone can point me in the right direction on how to do this "the Moodle way" Im happy to entirely rewrite the code to fit in with the core code guidelines. Im not sure which of the above choices is appropriate so for the time being Ill link to the code I wrote in a theme renderer. I went out of my way to avoid touching core code, some of which has bugs I needed to work around, basically reimplementing paging_bar within my theme so someone needs to re-write this before it can be included in core. So the actual renderer code is here: The code that decides which pages to link to (and which to leave out if space is tight) is here: And the code that takes that list of page numbers and turns it into a series of HTML list items with appropriate classnames and containing links is here: And, just for completeness the bit that wraps those in an appropriately classed ul tag is here: Theres unit tests for all of that too. I notice that theres some other bugs against paging_bar with work ongoing at the moment, Ill mark them as related to this. I also noticed that mod_glossary has its own implementation of this idea, with an added ALL button, so there should probably be some harmonisation done there.
7.summary: Book Navigation Particularly Bad With My Mobile Theme
description: When viewing a book on a phone or tablet, the navigation buttons are too small (IMHO) and too close together and to close to the edge of the screen to effectively navigate between pages. If you doubled the current size of the arrows more similar to most current Flip-books and centered (either center bottom or center top or both)with a little space in between the buttons then the usability would be improved dramatically across all devices.
8.summary: Horizontal choices should use inline-block style
description: Currently, if you choose to use the horizontal layout the choices are laid out as if they were one long string of text and any word gap will be used to break the line. It would be better if "display: inline-block" was used instead. In this case if we run out of room on one line it will split in between the different options, and a new line will always start with a radio button and a new option. This is particularly relevant on small screen mobile devices, where line-wrapping is more likely. The style is set on line 18 of mod/choice/styles.css Its probably like this for historical reasons. IE7 didnt support inline-block.
9.summary: Calendar needs to be made more mobile friendly
description: Including AJAX loading/submission of events
10.summary: Clean theme title bar should remain at the top of the screen as you scroll down the page
description: Rather than disappear off the top of the screen, the title and "hamburger" icon should remain at the top of the screen as you scroll down the page
11.summary: Login page is overly verbose for a mobile device
description: We could either hide some of the text, or redesign the page completely.
12.summary: Multiple Front Page Settings for Various Devices
description: If Moodle is really going to be responsive to devices it need different front page settings based on type of device. From a phone I dont want to scroll through news items to get to my courses. From a full-screen, I dont want to see 2/3 of the real estate on the left empty so I need to fill it with something that is ostensibly going to look stupid if its too short or make me scroll when Im on the phone.
