Moodle
  1. Moodle
  2. MDL-38856

META: Issues around Bootstrapbase and Clean theme

    Details

    • Type: Epic Epic
    • Status: Closed
    • Priority: Critical Critical
    • Resolution: Fixed
    • Affects Version/s: 2.5
    • Fix Version/s: None
    • Component/s: Themes
    • Labels:
    • Affected Branches:
      MOODLE_25_STABLE
    • Epic Name:
      Bootstrap and Clean theme

      Description

      This is a META issue used to organise the integration of Bootstrap into Moodle and the subsequent issues that arise from that.

        Gliffy Diagrams

          Issue Links

          1.
          Add a Moodle bootstrap theme to Moodle CORE Sub-task Closed Bas Brands
           
          2.
          Remove JQuery dependencies in Bootstrap theme for core. Sub-task Closed Andrew Nicols
           
          3.
          Hide Bootstrap from Theme Selector Sub-task Closed Mary Evans
           
          4.
          Create a new /theme/simple theme based on bootstrap, for users, with settings. Sub-task Closed Mary Evans
           
          5.
          Bootstrap mobile / tablet issues Sub-task Closed Bas Brands
           
          6.
          Convert tab functions in weblib to a renderer Sub-task Closed Marina Glancy
           
          7.
          Bootstrap Theme: Problem with help button on assignment grading interface Sub-task Closed Martin Dougiamas
           
          8.
          Something odd about the javascript loading in this theme. Sub-task Closed Andrew Nicols
           
          9.
          Bootstrap theme does not show the custom menu items correctly Sub-task Closed Mary Evans
           
          10.
          Course listings CSS changes need to be ported to bootstrap theme Sub-task Closed Marina Glancy
           
          11.
          Bootstrap theme - Topics section highlighting seems more a section hidden or disabled Sub-task Closed David Scotson
           
          12.
          Replace Bootstrap screenshot with correct size image Sub-task Closed Mary Evans
           
          13.
          Error message on login should be a span, not a block Sub-task Closed David Scotson
           
          14.
          Bootstrap theme show more / less link does nothing. Sub-task Closed Mary Evans
           
          15.
          Bootstrap theme - text input in a block is wider than the block Sub-task Closed Bas Brands
           
          16.
          favicon.ico in simple theme should be standard moodle icon Sub-task Closed Mary Evans
           
          17.
          Bootstrap & Simple theme do not support block drag/drop Sub-task Closed Mary Evans
           
          18.
          The caching boxes that are present on all other themes are gone in bootstrap Sub-task Closed Jason Fowler
           
          19.
          Bootstrap layout file general.php region-bs-main Sub-task Closed Bas Brands
           
          20.
          Navigation missing icons in BS Sub-task Closed David Scotson
           
          21.
          Rename 'simple' theme to 'clean' Sub-task Closed Mary Evans
           
          22.
          Table header row not in thead section Sub-task Closed Jérôme Mouneyrac
           
          23.
          the main calendar overflows on to the right blocks Sub-task Closed Mary Evans
           
          24.
          Bootstrap theme - JS error with cachejs, yuicomboloading and useexternalyui settings disabled Sub-task Closed Bas Brands
           
          25.
          Bootstrap theme, cannot expand a node in the navigation without following the link. Sub-task Closed Bas Brands
           
          26.
          on settings pages, the setting variable name over flows in to the text describing the setting Sub-task Closed Mary Evans
           
          27.
          Need good documentation on using LESS for /theme/bootstrap Sub-task Closed Jason Fowler
           
          28.
          Missing styles with multiple tab rows Sub-task Closed David Scotson
           
          29.
          Forms in bootstrap are not wide enough on big screens! Sub-task Closed Jason Fowler
           
          30.
          Bootstrap theme shows no language menu Sub-task Closed David Scotson
           
          31.
          Students responses to some questions disappear when reviewing with Clean theme Sub-task Closed David Scotson
           
          32.
          Clean theme still has "Simple" all through the docs. Sub-task Closed Mary Evans
           
          33.
          Badges CSS missing from bootstrap Sub-task Closed Yuliya Bozhko
           
          34.
          Various Quiz form element issues with Bootstrap Sub-task Closed David Scotson
           
          35.
          Normalize .less => .css generation Sub-task Closed Damyon Wiese
           
          36.
          Update theme/bootstrap/style/generated.css after ALL changes have been made to Bootstrap theme Sub-task Closed Eloy Lafuente (stronk7)
           
          37.
          Rename 'bootstrap' theme to 'bootstrapbase' Sub-task Closed Damyon Wiese
           
          38.
          Bootstrap renderer for tabs Sub-task Closed Marina Glancy
           
          39.
          Missing icon on collapse/expand all action (Clean theme) Sub-task Closed Frédéric Massart
           
          40.
          Can not log out with Javascript disabled and the browser window size reduced Sub-task Closed Mary Evans
           
          41.
          Recent base CSS needs to be ported to bootstrap CSS Sub-task Closed David Scotson
           
          42.
          TinyMCE editor default font looks too small under Clean theme Sub-task Closed David Scotson
           
          43.
          Two singlebuttons in a row sit on top of each other Sub-task Closed David Scotson
           
          44.
          Change core.php to core_renderer.php in bootstrapbase/renderers Sub-task Closed Mary Evans
           
          45.
          The block region availability in bootstrapbase is widely different from base Sub-task Closed Jason Fowler
           
          46.
          Clean theme does not allow drag 'n' drop moving of course components/sections Sub-task Closed Jason Fowler
           
          47.
          In chrome, window resizing bugs Sub-task Closed Mary Evans
           
          48.
          Response history in Bootstrap set to gray alert rather than well Sub-task Closed Mary Evans
           
          49.
          Footer alignment issues in Clean Sub-task Closed Mary Evans
           
          50.
          Clean - Accessible chat window contains blocks Sub-task Closed Unassigned
           
          51.
          Clean is mangling the grader report if there is a hidden activity Sub-task Closed Marina Glancy
           
          52.
          Bootstrapbase $THEME->layouts need 'Maintenance' and is missing important options. Sub-task Closed Mary Evans
           
          53.
          Bootstrap Navbar search box needs to be inline. Sub-task Closed Mary Evans
           
          54.
          Missing a space between "Return to lesson" and "View grades" at the end of lesson page Sub-task Closed Rossiani Wijaya
           
          55.
          Improve alignment/layout for course participation reports Sub-task Closed Gareth J Barnard
           
          56.
          Fix icon alignment in filepicker Sub-task Closed Gareth J Barnard
           
          57.
          Inverse user name text is unreadable on navigation bar Sub-task Closed Gareth J Barnard
           
          58.
          Fix button alignment for form button on view badge page Sub-task Closed Gareth J Barnard
           
          59.
          .invisiblefieldset missing from bootstrapbase Sub-task Closed Mary Evans
           
          60.
          Turn editing on button misaligned on navigation bar Sub-task Closed Gareth J Barnard
           
          61.
          Bootstrap Clean Theme loses blocks when $THEME->layout side-pre and side-post are swapped Sub-task Closed Unassigned
           
          62.
          Bootstrap Theme always sends content to "side-pre", even when there isn't one Sub-task Closed Gareth J Barnard
           
          63.
          RTL/Clean theme: Misalignment of student name and profile image in grader Sub-task Closed Nadav Kavalerchik
           
          64.
          Maximum width of sidebars Sub-task Closed David Scotson
           
          65.
          Bootstrap print styles add urls to all links, even Moodle internal ones Sub-task Closed Gareth J Barnard
           
          66.
          Clean: Text fields in login block Sub-task Closed Mary Evans
           
          67.
          Change location of navbar (breadcumb) to below logo in Clean theme. Sub-task Closed Mary Evans
           
          68.
          Clean Theme README.txt needs updating Sub-task Closed Frédéric Massart
           
          69.
          Clean theme: blocks not responsive in my profile page Sub-task Closed Mary Evans
           

            Issues in Epic

              Activity

              Hide
              David Scotson added a comment -

              Is there somewhere to put "interesting but not for 2.5" stuff? The current #2 on this list (MDL-38160) fits into that category.

              Show
              David Scotson added a comment - Is there somewhere to put "interesting but not for 2.5" stuff? The current #2 on this list ( MDL-38160 ) fits into that category.
              Hide
              Mary Evans added a comment - - edited

              Removed sub-task MDL-38160 and added as a link.

              Show
              Mary Evans added a comment - - edited Removed sub-task MDL-38160 and added as a link.
              Hide
              Tim Hunt added a comment -

              Why are we trying to convert Moodle to consisten boostrap theming without integrating MDL-36558 first?

              The element library is supposed to

              1. Provide a single place to check the visual style of all the key Moodle UI elements.
              2. Provide documentation so we konw wha the standard Moodle UI elements are, and how they should be used.
              3. Document these things in a way that is kept up-to-date as these things change.

              All these things strike me as essential things to be doing as we move to boostrap. I was actualy tempted to make MDL-36558 a blocker, but I will let someone else do that.

              Show
              Tim Hunt added a comment - Why are we trying to convert Moodle to consisten boostrap theming without integrating MDL-36558 first? The element library is supposed to Provide a single place to check the visual style of all the key Moodle UI elements. Provide documentation so we konw wha the standard Moodle UI elements are, and how they should be used. Document these things in a way that is kept up-to-date as these things change. All these things strike me as essential things to be doing as we move to boostrap. I was actualy tempted to make MDL-36558 a blocker, but I will let someone else do that.
              Hide
              Martin Dougiamas added a comment -

              Unfortunately the element library needs a LOT more work and won't make it for 2.5. Agreed that it should be a focus for 2.6 though.

              Show
              Martin Dougiamas added a comment - Unfortunately the element library needs a LOT more work and won't make it for 2.5. Agreed that it should be a focus for 2.6 though.
              Hide
              Michael de Raadt added a comment -

              Thanks to everyone who has been working on this. It has come very far very quickly.

              I'm reviewing the issues that are marked as "Must fix for 2.5", including this issue. I'm shifting it off that backlog for a few reasons. Being a meta-issue, it probably shouldn't be there. The remaining sub-tasks of this issue are mostly minor; at least there are no remaining issues that are significant enough to block the release by my reckoning.

              It's likely that there will be more similar issues that arise when this theme is more widely adopted.

              At present I think the Bootstrap themes are ready for release with a few issues to work on in future. It will be wise to state in the release notes that there are a few "rough edges" in order to set expectations appropriately.

              Show
              Michael de Raadt added a comment - Thanks to everyone who has been working on this. It has come very far very quickly. I'm reviewing the issues that are marked as "Must fix for 2.5", including this issue. I'm shifting it off that backlog for a few reasons. Being a meta-issue, it probably shouldn't be there. The remaining sub-tasks of this issue are mostly minor; at least there are no remaining issues that are significant enough to block the release by my reckoning. It's likely that there will be more similar issues that arise when this theme is more widely adopted. At present I think the Bootstrap themes are ready for release with a few issues to work on in future. It will be wise to state in the release notes that there are a few "rough edges" in order to set expectations appropriately.
              Hide
              Ray Lawrence added a comment -

              Indeed. It would be useful to provide specific information on what the rough edge are and their impact.

              Show
              Ray Lawrence added a comment - Indeed. It would be useful to provide specific information on what the rough edge are and their impact.
              Hide
              Joseph Rézeau added a comment -

              Using Moodle 2.5+ (Build: 20130606), Clean theme based on Bootstrapbase, Firefox 21.
              The font-size of all headers (h1, h2, etc) is out of proportion, much too HUGE!

              Show
              Joseph Rézeau added a comment - Using Moodle 2.5+ (Build: 20130606), Clean theme based on Bootstrapbase, Firefox 21. The font-size of all headers (h1, h2, etc) is out of proportion, much too HUGE!
              Hide
              Joseph Rézeau added a comment -

              Using Moodle 2.5+ (Build: 20130606), Clean theme based on Bootstrapbase, Firefox 21.
              Questionnaire add-on for its report pages uses small gif images 1px wide x 9 px high. Upon report display the width of those images is dynamically stretched. Unfortunately, there is a CSS rule in Bootstrapbase which sets the height of IMG to auto, which ruins the result, as shown on referred screenshots in the Questionnaire forum discussion. There was a similar problem in the aardvark theme, which has been fixed, see this discussion: https://moodle.org/mod/forum/discuss.php?d=219854.

              Please either change the Bootstrapbase css rule OR advise on how I can change the report graph display in Questionnaire.

              May I also point out that a new graph/chart library is very much needed in Moodle, and requests for it have not made much progress. See MDL-35686.

              Joseph

              Show
              Joseph Rézeau added a comment - Using Moodle 2.5+ (Build: 20130606), Clean theme based on Bootstrapbase, Firefox 21. Questionnaire add-on for its report pages uses small gif images 1px wide x 9 px high. Upon report display the width of those images is dynamically stretched. Unfortunately, there is a CSS rule in Bootstrapbase which sets the height of IMG to auto, which ruins the result, as shown on referred screenshots in the Questionnaire forum discussion. There was a similar problem in the aardvark theme, which has been fixed, see this discussion: https://moodle.org/mod/forum/discuss.php?d=219854 . Please either change the Bootstrapbase css rule OR advise on how I can change the report graph display in Questionnaire. May I also point out that a new graph/chart library is very much needed in Moodle, and requests for it have not made much progress. See MDL-35686 . Joseph
              Hide
              Mary Evans added a comment - - edited

              @Joseph, can you please open a new bug report for this as a Sub-Task of this META issue?

              Or perhaps not as Questionnaire is a Plugin if I am correct?

              Thank you.

              Show
              Mary Evans added a comment - - edited @Joseph, can you please open a new bug report for this as a Sub-Task of this META issue? Or perhaps not as Questionnaire is a Plugin if I am correct? Thank you.
              Hide
              Mary Evans added a comment -

              Sorry Joseph I missed reading the part where you ask for advice on how to fix the graph image. If the graph needs to be only a certain height, you should be able to add some style in the questionnaire/style.css if it exists.

              On the other hand I don't know why .region-content img needs to be height: auto, do you?

              Show
              Mary Evans added a comment - Sorry Joseph I missed reading the part where you ask for advice on how to fix the graph image. If the graph needs to be only a certain height, you should be able to add some style in the questionnaire/style.css if it exists. On the other hand I don't know why .region-content img needs to be height: auto, do you?
              Hide
              David Scotson added a comment -

              I'm sure I've looked at the questionnaire bug before. As I recall it's loading single color images for some strange reason, rather than just coloring a div's background via CSS. A proper fix would be good but as Mary says setting the height and width via CSS should do the job.

              Show
              David Scotson added a comment - I'm sure I've looked at the questionnaire bug before. As I recall it's loading single color images for some strange reason, rather than just coloring a div's background via CSS. A proper fix would be good but as Mary says setting the height and width via CSS should do the job.
              Hide
              David Scotson added a comment -

              Sorry I was getting questionnaire mixed up with Feedback, which appears to suffer from a similar issue:

              https://tracker.moodle.org/browse/MDL-37754

              Show
              David Scotson added a comment - Sorry I was getting questionnaire mixed up with Feedback, which appears to suffer from a similar issue: https://tracker.moodle.org/browse/MDL-37754
              Hide
              Michael de Raadt added a comment -

              I've converted this issue to an Epic and most of its sub-tasks to stand-alone issues so they can be ranked and worked on independently.

              Show
              Michael de Raadt added a comment - I've converted this issue to an Epic and most of its sub-tasks to stand-alone issues so they can be ranked and worked on independently.
              Hide
              David Scotson added a comment -

              I asked this on another META bug, but there's more watchers here so:

              How do I sign up to get notifications when new bugs get added to this META bug? I'm already "watching" (and in fact I appear to the "assignee" too) but as far as I can tell I'm not getting emails when new bugs get tagged as belonging to this META.

              Show
              David Scotson added a comment - I asked this on another META bug, but there's more watchers here so: How do I sign up to get notifications when new bugs get added to this META bug? I'm already "watching" (and in fact I appear to the "assignee" too) but as far as I can tell I'm not getting emails when new bugs get tagged as belonging to this META.
              Hide
              Mary Evans added a comment -

              If you are not receiving Notifications of activity in any of the issues you are watching, then it depends largely in the way you set up your profile.

              As a Watcher to any BUG issue you should get notification. As soon as you comment I think you are listed as a Watcher also. You can Add yourself to any Moodle tracker issue as a Watcher and should receive notices accordingly.

              Show
              Mary Evans added a comment - If you are not receiving Notifications of activity in any of the issues you are watching, then it depends largely in the way you set up your profile. As a Watcher to any BUG issue you should get notification. As soon as you comment I think you are listed as a Watcher also. You can Add yourself to any Moodle tracker issue as a Watcher and should receive notices accordingly.
              Hide
              Mary Evans added a comment - - edited

              Hi David,
              To change your Profile click on the arrow beside your name in the header (top right).
              Then SELECT Profile from the top of the pop-up list.

              Then CLICK the Edit icon (pencil top right) of Preferences

              You can then change the setting for Autowatch to receive notification.
              I have mine set to "Inherit from global settings".

              Hope that helps?

              Show
              Mary Evans added a comment - - edited Hi David, To change your Profile click on the arrow beside your name in the header (top right). Then SELECT Profile from the top of the pop-up list. Then CLICK the Edit icon (pencil top right) of Preferences You can then change the setting for Autowatch to receive notification. I have mine set to "Inherit from global settings". Hope that helps?
              Hide
              Gareth J Barnard added a comment -

              Hi all,

              With reference to https://moodle.org/mod/forum/discuss.php?d=232359 - is Bootstrap collapse YUI code working as 'bootstrap.js' has:

              // FIXME This is deliberately wrong because of a breaking issue in the upstream library.
              TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]',
              

              ??

              Thanks,

              Gareth

              Show
              Gareth J Barnard added a comment - Hi all, With reference to https://moodle.org/mod/forum/discuss.php?d=232359 - is Bootstrap collapse YUI code working as 'bootstrap.js' has: // FIXME This is deliberately wrong because of a breaking issue in the upstream library. TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]', ?? Thanks, Gareth
              Hide
              Ralf Krause added a comment -

              How can I move MDL-40602 into this META.

              Show
              Ralf Krause added a comment - How can I move MDL-40602 into this META.
              Hide
              Gareth J Barnard added a comment -

              Dear Ralf Krause,

              It looks like MDL-40602 already is within this META.

              Cheers,

              Gareth

              Show
              Gareth J Barnard added a comment - Dear Ralf Krause , It looks like MDL-40602 already is within this META. Cheers, Gareth
              Hide
              Michael de Raadt added a comment -

              As Clean has now been integrated into core and is now the default theme, this issue's purpose has been served.

              There were some remaining issues that were not completed, mostly because they were not high-priority issues. I have detached those issues from this epic issue and we can deal with them independently.

              Thanks to all the people who have worked on this issue. A lot of work has been done.

              Show
              Michael de Raadt added a comment - As Clean has now been integrated into core and is now the default theme, this issue's purpose has been served. There were some remaining issues that were not completed, mostly because they were not high-priority issues. I have detached those issues from this epic issue and we can deal with them independently. Thanks to all the people who have worked on this issue. A lot of work has been done.

                People

                • Votes:
                  9 Vote for this issue
                  Watchers:
                  25 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: