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

Main container width of Boost pages

    XMLWordPrintable

Details

    • Task
    • Status: Closed
    • Blocker
    • Resolution: Fixed
    • 4.0
    • 4.0
    • Themes
    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72095-master-3
    • Hide

      Setup for testing

      1. Login as admin
      2. Create a new course based on the attached "all activities" backup and enrol yourself
      3. Create a few additional courses (at least 5) and enrol yourself
      4. Navigate to the site home and click edit settings for the cog menu
      5. In field "Front page items when logged in" configure"
      • list of courses
      • list fo categories
      1. Save changes and return to the site home

      Home page width

      1. Verify the home page width is never bigger than 800px wide
      2. On the homepage add the "logged in user" block
      3. Verify you see the drawer toggle and verify you can open the drawer and see the "Logged in user" block

      Categories page width

      1. On the front page click a category in Course categories
      2. on the category page verify the home page width is never bigger than 800px wide

      Profile page width

      1. Navigate to your profile page
      2. Verify the maximum page width is 800px wide

      Test the activity pages

      1. Navigate to the all activities page
      2. Verify the page widths match the table below:
      3. Please not if an activity subpage contains a html table it is okay to go full width, for example the choice responses page.

      Dashboard blocks width for boost

      1. Navigate to your dashboard
      2. Resize the browser from 1400px wide to 500px wide
      3. Scroll down and observe the course overview block
      4. Verify the number of course cards is 3 in one row at sizes up to 840px
      5. Verify the number of course cards is 2 in one row at sizes up to 576px
      6. Verify the number of course cards is 1 in one row at sizes below 576px

      Tests for theme classic

      Dashboard blocks width for classic

      1. Change your theme to the classic theme
      2. Navigate to your dashboard
      3. Make sure the dash dashboard has a 3 column layout
      4. Scroll down and observe the course overview block
      5. Resize the browser from 1400px wide to 500px wide
      6. Verify the number of course cards is 4 in one row at sizes up to 1360px
      7. Verify the number of course cards is 3 in one row at sizes up to 1200px
      8. Verify the number of course cards is 2 in one row at sizes up to 992px
      9. Verify the number of course cards is 1 in one row at sizes below 992px

      Dashboard blocks width for classic with one block area

      1. Turn editing on in the dashboard and move all left blocks to the right column
      2. Turn editing off again
      3. Repeat the steps from the previous test and verify the brackpoints are the same

      Dashboard blocks width for classic with no block area

      1. Turn editing on in the dashboard and move all blocks to the centre column
      2. Turn editing off again
      3. Scroll down and observe the course overview block
      4. Verify the number of course cards is 5 in one row at sizes up to 1360px
      5. Verify the number of course cards is 4 in one row at sizes up to 1200px
      6. Verify the number of course cards is 3 in one row at sizes up to 992px
      7. Verify the number of course cards is 2 in one row at sizes up to 576px
      8. Verify the number of course cards is 1 in one row at sizes below 576px
      Show
      Setup for testing Login as admin Create a new course based on the attached "all activities" backup and enrol yourself Create a few additional courses (at least 5) and enrol yourself Navigate to the site home and click edit settings for the cog menu In field "Front page items when logged in" configure" list of courses list fo categories Save changes and return to the site home Home page width Verify the home page width is never bigger than 800px wide On the homepage add the "logged in user" block Verify you see the drawer toggle and verify you can open the drawer and see the "Logged in user" block Categories page width On the front page click a category in Course categories on the category page verify the home page width is never bigger than 800px wide Profile page width Navigate to your profile page Verify the maximum page width is 800px wide Test the activity pages Navigate to the all activities page Verify the page widths match the table below: Please not if an activity subpage contains a html table it is okay to go full width, for example the choice responses page. Dashboard blocks width for boost Navigate to your dashboard Resize the browser from 1400px wide to 500px wide Scroll down and observe the course overview block Verify the number of course cards is 3 in one row at sizes up to 840px Verify the number of course cards is 2 in one row at sizes up to 576px Verify the number of course cards is 1 in one row at sizes below 576px Tests for theme classic Dashboard blocks width for classic Change your theme to the classic theme Navigate to your dashboard Make sure the dash dashboard has a 3 column layout Scroll down and observe the course overview block Resize the browser from 1400px wide to 500px wide Verify the number of course cards is 4 in one row at sizes up to 1360px Verify the number of course cards is 3 in one row at sizes up to 1200px Verify the number of course cards is 2 in one row at sizes up to 992px Verify the number of course cards is 1 in one row at sizes below 992px Dashboard blocks width for classic with one block area Turn editing on in the dashboard and move all left blocks to the right column Turn editing off again Repeat the steps from the previous test and verify the brackpoints are the same Dashboard blocks width for classic with no block area Turn editing on in the dashboard and move all blocks to the centre column Turn editing off again Scroll down and observe the course overview block Verify the number of course cards is 5 in one row at sizes up to 1360px Verify the number of course cards is 4 in one row at sizes up to 1200px Verify the number of course cards is 3 in one row at sizes up to 992px Verify the number of course cards is 2 in one row at sizes up to 576px Verify the number of course cards is 1 in one row at sizes below 576px

    Description

      With the introduction of the drawers layout, the course content now has a fixed width. If possible other pages should have the same width.

      Plugin pages need to have a way of choosing between a full page width or a fixed width.

      EDIT: must-fix for 4.0 to meet UX designs

      Attachments

        1. all-activities.mbz
          1.68 MB
          Bas Brands
        2. forum-discussion.png
          810 kB
          Bas Brands
        3. horizontal.png
          713 kB
          Bas Brands
        4. MDL-72095_activity pages_survey.png
          60 kB
          Angelia Dela Cruz
        5. MDL-72095_activity pages.webm
          23.00 MB
          Angelia Dela Cruz
        6. MDL-72095_categories page width.png
          177 kB
          Angelia Dela Cruz
        7. MDL-72095_dashboard blocks width_boost.webm
          167 kB
          Angelia Dela Cruz
        8. MDL-72095_dashboard blocks width_classic.webm
          207 kB
          Angelia Dela Cruz
        9. MDL-72095_Dashboard blocks width for classic with no block area.webm
          469 kB
          Angelia Dela Cruz
        10. MDL-72095_Dashboard blocks width for classic with one block area.webm
          182 kB
          Angelia Dela Cruz
        11. MDL-72095_home page width.png
          150 kB
          Angelia Dela Cruz
        12. MDL-72095_home page width 2.png
          93 kB
          Angelia Dela Cruz
        13. MDL-72095_profile page width.png
          170 kB
          Angelia Dela Cruz
        14. MDL-72095_Re-test the activity pages_survey.png
          182 kB
          Angelia Dela Cruz
        15. pagewidths.png
          159 kB
          Bas Brands
        16. scroll on scorm.png
          1.21 MB
          Bas Brands
        17. verticall.png
          670 kB
          Bas Brands

        Issue Links

          Activity

            People

              basbrands Bas Brands
              basbrands Bas Brands
              Huong Nguyen Huong Nguyen
              Ilya Tregubov Ilya Tregubov
              Angelia Dela Cruz Angelia Dela Cruz
              Huong Nguyen, Bas Brands, Mathew May
              Votes:
              1 Vote for this issue
              Watchers:
              12 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                19/Apr/22

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 days, 3 hours, 3 minutes
                  4d 3h 3m