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

New "Boost" Bootstrap 4 theme

    XMLWordPrintable

Details

    • MOODLE_32_STABLE
    • MOODLE_32_STABLE
    • MDL-55071-rebased
    • Hide

      LTR Testing admin settings, mforms, general

      Repeat this test in "clean" and "boost" themes
      Change language to hebrew
      View 5 random admin settings pages and verify they look correct for RTL. "Correct" means that everything is flipped for RTL "Except" technical settings like file patches, ip address, hostname etc.
      View 5 "mforms" in Moodle and verify they look correct for RTL.
      View the course page. Verify all parts of the UI are correctly flipped for RTL. This does include navigation course page etc.

      CSS post processing
      Add $THEME->csstreepostprocessor = 'theme_clean_css_tree_post_processor'; to theme_clean config.php
      Enable themedesigner mode

      Add this function to theme/clean/lib.php

      function theme_clean_css_tree_post_processor($tree, $this) {  
          $tree->expandShorthands();                                                                      
      } 
      

      Use curl to get a stylesheet:

      curl 'http://damyon.per.in.moodle.com/stable_master/theme/styles_debug.php?sheet=custom&theme=clean&type=theme'

      Modify the function to this:

      function theme_clean_css_tree_post_processor($tree, $this) {  
          $tree->createShorthands();                                                                      
      } 
      

      Use curl to get the same stylesheet:

      curl 'http://damyon.per.in.moodle.com/stable_master/theme/styles_debug.php?sheet=custom&theme=clean&type=theme'

      You should see the difference before / after in the margin properties.

      Test activity chooser in both themes

      Test the activity chooser in both themes. Report any wierdness.

      Test the question bank chooser in both themes. Report any wierdness.

      Test mforms changes

      View 5 mforms in each theme and verify they are functioning correctly. Specifically test "disabledIf" fields and form validation errors.

      Test the mobile app

      Test the mobile app against the new theme and report any errors.

      Lesson Module

      Do the QA tests for mod_lesson in the new theme

      Boost theme settings

      Verify you get a new look by changing the "preset" for the boost theme

      Verify changing the branding color changes many things like link text colors,

      Verify you can add a scss variable "$enable-shadows: true;" to enable / disable shadows in the theme.

      Verify you can add a chunk of SCSS to be appended to the styles for the theme.

      body {
          background-color: $brand-primary;
      }
      

      Try importing a bootswatch

      Read the instructions for theme/boost/cli/import-bootswatch.php

      Try it!

      Responsive design of new theme

      Test the new theme at different screen sizes. Report any reasonable problems. (If you are unsure what is reasonable, compare it to clean).
      Report any visual glitches as bugs in the MDL-55070 epic.

      CSS changes from csslint and friends

      Test the following with/without the 7 commits following "MDL-55071 theme/output: PHPCS fixes for new theme branch"

      Go to the course management page, and view the item actions against the courses, ensure they are fixed after the patch

      Go to the search form at the bottom of the course management page, ensure is the same after the patch

      Go to the Enrolled users page - ensure the filter form at the top looks the same or better after the patch

      Add a numerical question - ensure the answer form looks the same before and after the patch

      Go to the course particpation report - ensure the form looks the same before and after the patch

      Look at file picker on screen smaller than 480px - ensure the upload form looks the same afer patch

      Add the login block to the front page, logout - ensure the login button looks the same before and after the patch

      b. Try installing moodle through web installer in RTL and LTR language.

      Show
      LTR Testing admin settings, mforms, general Repeat this test in "clean" and "boost" themes Change language to hebrew View 5 random admin settings pages and verify they look correct for RTL. "Correct" means that everything is flipped for RTL "Except" technical settings like file patches, ip address, hostname etc. View 5 "mforms" in Moodle and verify they look correct for RTL. View the course page. Verify all parts of the UI are correctly flipped for RTL. This does include navigation course page etc. CSS post processing Add $THEME->csstreepostprocessor = 'theme_clean_css_tree_post_processor'; to theme_clean config.php Enable themedesigner mode Add this function to theme/clean/lib.php function theme_clean_css_tree_post_processor($tree, $this) { $tree->expandShorthands(); } Use curl to get a stylesheet: curl 'http://damyon.per.in.moodle.com/stable_master/theme/styles_debug.php?sheet=custom&theme=clean&type=theme' Modify the function to this: function theme_clean_css_tree_post_processor($tree, $this) { $tree->createShorthands(); } Use curl to get the same stylesheet: curl 'http://damyon.per.in.moodle.com/stable_master/theme/styles_debug.php?sheet=custom&theme=clean&type=theme' You should see the difference before / after in the margin properties. Test activity chooser in both themes Test the activity chooser in both themes. Report any wierdness. Test the question bank chooser in both themes. Report any wierdness. Test mforms changes View 5 mforms in each theme and verify they are functioning correctly. Specifically test "disabledIf" fields and form validation errors. Test the mobile app Test the mobile app against the new theme and report any errors. Lesson Module Do the QA tests for mod_lesson in the new theme Boost theme settings Verify you get a new look by changing the "preset" for the boost theme Verify changing the branding color changes many things like link text colors, Verify you can add a scss variable "$enable-shadows: true;" to enable / disable shadows in the theme. Verify you can add a chunk of SCSS to be appended to the styles for the theme. body { background-color: $brand-primary; } Try importing a bootswatch Read the instructions for theme/boost/cli/import-bootswatch.php Try it! Responsive design of new theme Test the new theme at different screen sizes. Report any reasonable problems. (If you are unsure what is reasonable, compare it to clean). Report any visual glitches as bugs in the MDL-55070 epic. CSS changes from csslint and friends Test the following with/without the 7 commits following " MDL-55071 theme/output: PHPCS fixes for new theme branch" Go to the course management page, and view the item actions against the courses, ensure they are fixed after the patch Go to the search form at the bottom of the course management page, ensure is the same after the patch Go to the Enrolled users page - ensure the filter form at the top looks the same or better after the patch Add a numerical question - ensure the answer form looks the same before and after the patch Go to the course particpation report - ensure the form looks the same before and after the patch Look at file picker on screen smaller than 480px - ensure the upload form looks the same afer patch Add the login block to the front page, logout - ensure the login button looks the same before and after the patch b. Try installing moodle through web installer in RTL and LTR language.

    Description

      Based on bootstrap4 with enhancements for accessibility, rtl support and tied into our grunt builder.

      Attachments

        1. Activity Chooser.ogv
          2.11 MB
          Rajesh Taneja
        2. Add restrictions.png
          79 kB
          Rajesh Taneja
        3. Add restrictions.png
          79 kB
          Rajesh Taneja
        4. Block name wrapped.png
          134 kB
          Rajesh Taneja
        5. Boost-Validation text below field is confusing.png
          444 kB
          Rajesh Taneja
        6. Editing Forum.png
          603 kB
          Rajesh Taneja
        7. Editing Forum.png
          603 kB
          Rajesh Taneja
        8. Filter Fields on Enrolled users.png
          188 kB
          Rajesh Taneja
        9. Forum name field is out of page content area.png
          131 kB
          Rajesh Taneja
        10. Login page.png
          207 kB
          Rajesh Taneja
        11. Navigation node images are left aligned.png
          179 kB
          Rajesh Taneja
        12. Restriction fields have border.png
          56 kB
          Rajesh Taneja
        13. RTL - labels and field spacing.png
          274 kB
          Rajesh Taneja
        14. screenshot-1.png
          134 kB
          Rajesh Taneja
        15. Screen Shot 2016-09-28 at 07.57.01.png
          50 kB
          Dan Poltawski
        16. Site name mis-aligned-with-other-then-default.png
          65 kB
          Rajesh Taneja

        Issue Links

          Activity

            People

              damyon Damyon Wiese
              damyon Damyon Wiese
              Dan Poltawski Dan Poltawski
              Rajesh Taneja Rajesh Taneja
              Huong Nguyen, Bas Brands, Mathew May
              Votes:
              6 Vote for this issue
              Watchers:
              21 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                5/Dec/16