Moodle
  1. Moodle
  2. MDL-38856

META: Issues around Bootstrapbase and Clean theme

    Details

    • Type: Epic Epic
    • Status: Open
    • Priority: Critical Critical
    • Resolution: Unresolved
    • Affects Version/s: 2.5
    • Fix Version/s: FRONTEND
    • Component/s: Themes
    • Labels:
    • Affected Branches:
      MOODLE_25_STABLE
    • Epic Name:
      Bootstrap and Clean theme
    • Rank:
      48940

      Description

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

        Issue Links

        Progress
        Resolved Sub-Tasks Unresolved Sub-Tasks

        Sub-Tasks

        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. Make Course listings responsive Sub-task Development in progress David Scotson
         
        69. Enrolment icons are displayed wrongly in courses list in Clean theme Sub-task Open Mary Evans
         
        70. Clean Theme README.txt needs updating Sub-task Open Unassigned
         
        71.
        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

              People

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

                Dates

                • Created:
                  Updated: