The completion icon gets overlapped by the photo tile text, when this text is very long (version 3.9 - 3.11)

[Julian.Tovar]

Good day team.

When using tiles with photo backgrounds, and the text of the tile is too long, it overlaps the completion icon (when all the activities of the tile have been marked as completed). This has been confirmed on Moodle v3.11 stable, and Tiles version 2020080629 (which is currently the latest version on the master branch).

Here is a quick show:

‌

As you can see, the completion icon, in the top right corner of the tile, is overlapped by the text of the tile, when the text is long.

STEPS TO REPLICATE:

1. In the Tiles plugin settings, Site Administration > Plugins > Course Formats > Tiles Format > Photo tiles, disable “Photo tiles alternative style” (make sure it is turned off).
2. Create a new course with the Tiles format.
3. Go to the course settings, under the “Course format” section, select an option for “Progress on each tile”. Either option will work as long as you do not select “hide”.  Click on ‘Save and display’.
4. In the course select “Turn editing on” at the top of the page.
5. Click the “Edit” dropdown to the right of any section (any tile), the click on “Edit section”.
6. Set the “Section name” value to a long string, for example: “a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ; a ;”
7. In the section settings, click on “Pick a new icon or background photo” and upload a photo and then save changes.
8. In the same section, add any activity with completion settings set.  “Students can manually mark the activity as complete” works for testing.
9. Turn editing off on the main course page.
10. Open up the section where the activity was added and toggle the completion button to mark the activity as complete.

OBSERVED BEHAVIOR:
Once the activity is marked as complete the Progress bar on the Section tile changes to a Green Check mark that is placed in the upper right of the tile.  However, the check mark is covered up by the section title, as shown in the screenshot before.

EXPECTED BEHAVIOR: 
The green completion check mark should not be overlapped by the tile text. A possible solution could look like this:

‌

Make sure to test reloading the page and maintain the correct layout, and also please test the layout when setting ON the option “Photo tiles alternative style” on Tiles settings.

[Julian.Tovar]

The way I generated the image in the Expected behavior, is by subtracting 30px from the width of the tile text. This can be done through AMD, in file ‘amd/src/completion.js’… the problem is that when reloading the page, this change in width is lost (because the AMD only acts while the page is not reloaded)… so to set this width value in stone, so that the page remembers it when reloading, Mustache can be used, in particular the file ‘templates/multi_section_tile.mustache', in there, the data about the completion progress can be passed.

… The problem is that these things change Tiles architecture, for example, the isComplete Mustache variable, is exclusively used in one file (in the progress template), which suggests that there is a separation of concerns… I just wanted to mention, that the fix is possible but I’m not sure what approach would be best.

[David Watson]

Thanks for the report. As this is fixed in the Moodle 4.0 version, I will mark this ticket as 3.9+ for now. I may be able to come back to it depending on other priorities