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

Refactor utility classes for layout and spacing renamed in Bootstrap 5

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_405_STABLE
    • MOODLE_405_STABLE
    • MDL-75671-main
    • Hide

      Setup

      1. Login as administrator
      2. Create a course and a user and enrol the user in the course

      Test

      1. Go to Site administration > Appearance > Themes
      2. Confirm the spacing is correct as the following:
      3. Using the browser inspector, confirm that the id="theme-settings-classic" element has the "ms-2" class, and both "ms-2" and "ml-2" are present in the styles as the following:
      4. Go to the course
      5. Click on Grades in the secondary navigation
      6. Select Single view in the tertiary navigation and search for the user
      7. Confirm "VIEW BY ..." is aligned to the right as the following:
      8. Reduce the browser size < 575px
      9. Confirm "VIEW BY ..." is aligned to the left as the following:
      10. Go to the Dashboard
      11. Confirm that in the "Calendar" block, the New event button is aligned to the right as the following:
      12. Using the browser inspector, confirm that the data-action="new-event-button" element has the "float-end" class, and both "float-end" and "float-right" are present in the styles as the following:
      13. Open the Messaging drawer
      14. *Confirm that Contacts is aligned to the right as the following:
      15. Using browser inspector, confirm that the parent element of data-route="view-contacts" element has the "text-end" class, and both "text-end" and "text-right" are present in the styles as the following:
      16. Log out and access the site as a guest
      17. *Confirm that a border separator is displayed before the Log in link as the following:
      18. Using the browser inspector, confirm that the parent element of class="divider" element has the "border-start" class, and both "border-start" and "border-left" are present in the styles as the following:
      Show
      Setup Login as administrator Create a course and a user and enrol the user in the course Test Go to Site administration > Appearance > Themes Confirm the spacing is correct as the following: Using the browser inspector, confirm that the id="theme-settings-classic" element has the "ms-2" class, and both "ms-2" and "ml-2" are present in the styles as the following: Go to the course Click on Grades in the secondary navigation Select Single view in the tertiary navigation and search for the user Confirm "VIEW BY ..." is aligned to the right as the following: Reduce the browser size < 575px Confirm "VIEW BY ..." is aligned to the left as the following: Go to the Dashboard Confirm that in the "Calendar" block, the New event button is aligned to the right as the following: Using the browser inspector, confirm that the data-action="new-event-button" element has the "float-end" class, and both "float-end" and "float-right" are present in the styles as the following: Open the Messaging drawer *Confirm that Contacts is aligned to the right as the following: Using browser inspector, confirm that the parent element of data-route="view-contacts" element has the "text-end" class, and both "text-end" and "text-right" are present in the styles as the following: Log out and access the site as a guest *Confirm that a border separator is displayed before the Log in link as the following: Using the browser inspector, confirm that the parent element of class="divider" element has the "border-start" class, and both "border-start" and "border-left" are present in the styles as the following:
    • 3
    • HQ 2024 Sprint I2.3 Moppies

      After upgrading to Bootstrap 5.2 some key utility classes used in our core mustache templates will be missing. For example the `.ml-3 utility` class ,used to add a margin of 1 rem to a container, which has been renamed to `ms-3`.

      Generate the needed SCSS code in bs5bridge.scss (so we can start using BS5 syntax) and refactor all the occurrences in the codebase.

      https://getbootstrap.com/docs/5.2/migration/:

      Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:

      • Renamed .left-* and .right-* to .start-* and .end-*.
      • Renamed .float-left and .float-right to .float-start and .float-end.
      • Renamed .border-left and .border-right to .border-start and .border-end.
      • Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
      • Renamed .ml-* and .mr-* to .ms-* and .me-*.
      • Renamed .pl-* and .pr-* to .ps-* and .pe-*.
      • Renamed .text-left and .text-right to .text-start and .text-end.

      This issue should also be included in the BS4 compatibility layer in MDL-80519

        1. MDL-75671.png
          MDL-75671.png
          1.28 MB
        2. screenshot-1.png
          screenshot-1.png
          74 kB
        3. screenshot-10.png
          screenshot-10.png
          35 kB
        4. screenshot-2.png
          screenshot-2.png
          40 kB
        5. screenshot-3.png
          screenshot-3.png
          48 kB
        6. screenshot-4.png
          screenshot-4.png
          40 kB
        7. screenshot-5.png
          screenshot-5.png
          42 kB
        8. screenshot-6.png
          screenshot-6.png
          34 kB
        9. screenshot-7.png
          screenshot-7.png
          24 kB
        10. screenshot-8.png
          screenshot-8.png
          23 kB
        11. screenshot-9.png
          screenshot-9.png
          10 kB

            mikelmartíncorrales Mikel Martín Corrales
            basbrands Bas Brands
            Laurent David Laurent David
            Amaia Anabitarte Amaia Anabitarte
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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