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

New "Boost" Bootstrap 4 theme

XMLWordPrintable

    • 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.

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

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

            damyon Damyon Wiese
            damyon Damyon Wiese
            Dan Poltawski Dan Poltawski
            Rajesh Taneja Rajesh Taneja
            Votes:
            6 Vote for this issue
            Watchers:
            21 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.