Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-53152

lessc Less compilation computes variable mathematics at a different time

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Maximise your browser's window.
      2. Go to Site administration ► Appearance ► Themes ► Theme settings.
      3. Make sure Theme designer mode is unchecked.
      4. Create some Custom menu items. You may use the the given example.
      5. Save the changes.
      6. Use the Clean theme. (Site administration ► Appearance ► Themes ► Theme selector)
        • Confirm that the nav bar with its menus are being properly displayed.
      7. Open your browser's inspector.
      8. Inspect the Styles associated with the div with the class "nav-collapse collapse"
        • Confirm that you can see the @media rule with a min-width set to 980px.
        • Confirm that enclosed in the @media rule, the following styles are listed:

          .nav-collapse.collapse {
              height: auto !important;
              overflow: visible !important;
          }
          

        • Confirm that the default .nav-collapse.collapse is being overridden by the .nav-collapse.collapse in the @media rule.
      9. Optionally, repeat the above tests using the More theme or other Bootstrap-based theme.
      Other variables
      1. Install grunt. (Click for more info)
      2. Copy test.less to theme/bootstrapbase/less.
      3. Replace your Moodle installation's Gruntfile.js with the attached Gruntfile.js.
      4. Open a terminal and go to your Moodle installation's root folder.
      5. Enter

        grunt css
        

      6. Check the generated test.css file in theme/bootstrapbase/style.
        • Confirm that test.css file is valid. (You can check for CSS validity here).
        • Search in the file for the following:

          +.*\d
          -.*\d
          %.*\d
          \\.*\d
          

          and friends - you shouldn't find them.

      Show
      Maximise your browser's window. Go to Site administration ► Appearance ► Themes ► Theme settings. Make sure Theme designer mode is unchecked. Create some Custom menu items. You may use the the given example. Save the changes. Use the Clean theme. (Site administration ► Appearance ► Themes ► Theme selector) Confirm that the nav bar with its menus are being properly displayed. Open your browser's inspector. Inspect the Styles associated with the div with the class " nav-collapse collapse " Confirm that you can see the @media rule with a min-width set to 980px . Confirm that enclosed in the @media rule, the following styles are listed: .nav-collapse.collapse { height: auto !important; overflow: visible !important; } Confirm that the default .nav-collapse.collapse is being overridden by the .nav-collapse.collapse in the @media rule. Optionally, repeat the above tests using the More theme or other Bootstrap-based theme. Other variables Install grunt. ( Click for more info ) Copy test.less to theme/bootstrapbase/less . Replace your Moodle installation's Gruntfile.js with the attached Gruntfile.js . Open a terminal and go to your Moodle installation's root folder. Enter grunt css Check the generated test.css file in theme/bootstrapbase/style . Confirm that test.css file is valid. (You can check for CSS validity here ). Search in the file for the following: +.*\d -.*\d %.*\d \\.*\d and friends - you shouldn't find them.
    • Difficulty:
      Difficult
    • Affected Branches:
      MOODLE_30_STABLE, MOODLE_31_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE, MOODLE_31_STABLE
    • Pull Master Branch:
      MDL-53152-master
    • Story Points:
      1
    • Sprint:
      3.1 Sprint 7, 3.2 Sprint 3
    • Issue size:
      Medium

      Description

      I use a moodle theme which is based on bootstrapbase. After upgraded the moodle from 2.9 to 3.0-latest, the dropdown menu cannot be shown correctly. Compared with 2.9, I found the 3.0 missed one css style which is defined in theme/bootstrapbase/style/moodle.css:
      @media (min-width:980px){.nav-collapse.collapse{height:auto !important;overflow:visible !important}}
      In 3.0 it changed to :
      @media (min-width:979px + 1){.nav-collapse.collapse{height:auto !important;overflow:visible !important}}

      It is generated from theme/bootstrapbase/less/bootstrap/responsive-navbar.less, in which the variable @navbarCollapseDesktopWidth is refered. And the @navbarCollapseDesktopWidth is defined in theme/bootstrapbase/less/bootstrap/variables.less, like:
      @navbarCollapseWidth: 979px;
      @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;

      The solution is adding parentheses for @navbarCollapseDesktopWidth in theme/bootstrapbase/less/bootstrap/responsive-navbar.less, like:
      @media (min-width: (@navbarCollapseDesktopWidth)) {
      then generating the moodle.css file again by using: grunt css.

        Attachments

        1. Gruntfile.js
          12 kB
        2. test.less
          0.8 kB

          Issue Links

            Activity

              People

              Assignee:
              jpataleta Jun Pataleta
              Reporter:
              wenqi Wenqi Ma
              Peer reviewer:
              cameron1729
              Integrator:
              Andrew Nicols
              Tester:
              Adrian Greeve
              Participants:
              Component watchers:
              Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              10 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                12/Sep/16