CSS conflicting with Moodle themes

[michael-milette]

Hi @amnuts ,

Thank you for sharing this really useful tool with the global Moodle community.

In case you were not aware, I would like to bring to your attention that when viewing Opcache management pages, some of its CSS appears to be affecting the theme. Some 3rd party themes are more affected than others. Here is an example where it is affecting the display of the Navigation Drawer. Here is a screenshot of how it is affecting the Navigation Drawer in Moodle 3.8.2 using the Boost theme:

Let me know if you have any questions or want me to review an updated version.

Best regards,

Michael Milette

[amnuts]

Thanks for reporting @michael-milette. Whereas this script wasn't designed specifically to embed into Moodle or other such systems, it did make quite a few opinionated choices about the html elements it would style, which were often just the core elements.

I've made changes so that it uses classes throughout and they are all namespaced under a class on the body tag. This should help resolve the issue you were seeing where it would change Moodle's navigation.

I'm not sure how you've integrated into Moodle, but if you can try out the theme branch of the opcache-gui and let me know how you get on, that'd be great.

[amnuts]

Actually, I'm just going to assume you're using the 'Opcache Management - tools_opcache' plugin for Moodle from the Ulm University. That plugin would need updated with the latest opcache-gui (it's currently a couple releases behind).

So I'm going to push out my updated version and submit a PR for that Moodle plugin. Hopefully that'll work out for you.

[michael-milette]

Thank you. Sorry for the confusion. I realize that they were two different plugins until I tried to clone the wrong one into another Moodle site. Thanks again for your understanding.

[amnuts]

Not a problem @michael-milette! I did submit a PR for the moodle plugin, so you could try my fork of that and see if it fixes your issues. You can check it out from https://github.com/amnuts/moodle-tool_opcache

[michael-milette]

Hi @amnuts , I think something went wrong in your latest update. While it no longer affects the page layout in Moodle, the two column layout of your dashboard is now displaying as just one really tall column. If I had to guess, I might say that some part of your code is probably no longer referencing the relevant CSS.

[amnuts]

I'll see if there's a Moodle docker image I can spin up at some point and have a look. 🙂

[michael-milette]

Haven't tried this myself but the following links might be helpful: https://github.com/moodlehq/moodle-docker https://moodle.org/mod/forum/discuss.php?d=351402#p1424156 https://git-academy.com/run-moodle-with-docker/

[amnuts]

Thanks for that; I ended up using https://hub.docker.com/r/bitnami/moodle/, but it allowed me to see that when the moodle plugin was displaying the opcache-gui it was only showing everything from within the body tag. I happened to put the namespacing class name on the body tag, so it effectively didn't style anything there but why it worked outside the plugin just fine.

I've made a change, pushed the latest opcache-gui, and submitted the PR to the Moodle plugin developers. If you use the zip file from my fork, you should end up with similar results so these screenshots taken from the docker Moodle install I had up and running:

[michael-milette]

Hi @amnuts ,

You got it! I tried it out with half a dozen Moodle themes in Moodle 3.8 and it works perfectly with each one. Well done!

Thank you again for all your quick work today. Very much appreciated. Closing the issue.

Best regards,

Michael

[abias]

Thank you @michael-milette for highlighting the issues with Moodle and thank you @amnuts for fixing them!

I have just merged https://github.com/moodleuulm/moodle-tool_opcache/pull/5 and will publish a new version of the Moodle plugin soon.