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

Make the completion button styles more generic

XMLWordPrintable

    • MOODLE_500_STABLE
    • MOODLE_500_STABLE
    • MDL-84346-main
    • Hide

      Setup

      1. Build the componentlibrary

        grunt componentlibrary
        

      2. Login as administrator
      3. Create a course
      4. Enrol an student in the course
      5. Create 2 assignment activities in the course
        1. One with "Students must manually mark the activity as done" completion condition
        2. One with "View the activity" Requirement completion condition

      Test component library

      1. Go to Site administration > Development > UI Component library
      2. Navigate to Moodle > Moodle components > Buttons
      3. Confirm there is a "Subtle buttons" section

      Test course page

      1. Login as student
      2. Access the course
      3. Confirm that the completion buttons are displayed as the following:
      4. Click on "Mark as done"
      5. Confirm that the completion buttons are displayed as the following:

      6. Access the second assignment and go back to the course page
      7. Confirm that the completion buttons are displayed as the following:

      Test activity page

      1. Access the first assignment
      2. Confirm that the completion buttons are displayed as the following:
      Show
      Setup Build the componentlibrary grunt componentlibrary Login as administrator Create a course Enrol an student in the course Create 2 assignment activities in the course One with "Students must manually mark the activity as done" completion condition One with "View the activity" Requirement completion condition Test component library Go to Site administration > Development > UI Component library Navigate to Moodle > Moodle components > Buttons Confirm there is a "Subtle buttons" section Test course page Login as student Access the course Confirm that the completion buttons are displayed as the following: Click on "Mark as done" Confirm that the completion buttons are displayed as the following: Access the second assignment and go back to the course page Confirm that the completion buttons are displayed as the following: Test activity page Access the first assignment Confirm that the completion buttons are displayed as the following:
    • Hide

      Code verified against automated checks.

      Checked MDL-84346 using repository: https://github.com/roland04/moodle.git

      More information about this report

      Built on: Mon Feb 24 12:20:04 PM UTC 2025

      Show
      Code verified against automated checks. Checked MDL-84346 using repository: https://github.com/roland04/moodle.git main (0 errors / 0 warnings) [branch: MDL-84346-main | CI Job ] More information about this report Built on: Mon Feb 24 12:20:04 PM UTC 2025
    • 2
    • HQ 2025 Sprint I1.2 Moppies

      The course page shows a nice interactable completion button; however, when the same buttons are used on another page (for example, the course overview), the same HTML looks completely different.

      The reason is that the button has many CSS exceptions that only apply to the course page.

      This is how it looks in the course:

      This is when the same element is used in the activities overview page:

      The completion button is rendered using the course/format/classes/output/local/content/cm/completion.php class.

      This issue is about:

      • Improving the button SCSS to unify the styles
      • Try using core\output\local\properties\button for the different stylings

        1. (1) 3 Passed -- (Main)MDL-84346.png
          (1) 3 Passed -- (Main)MDL-84346.png
          64 kB
        2. (2) 3 Passed -- (Main)MDL-84346.png
          (2) 3 Passed -- (Main)MDL-84346.png
          59 kB
        3. (2) 5 Passed -- (Main)MDL-84346.png
          (2) 5 Passed -- (Main)MDL-84346.png
          53 kB
        4. (2) 7 Passed -- (Main)MDL-84346.png
          (2) 7 Passed -- (Main)MDL-84346.png
          45 kB
        5. (3) 2 Passed -- (Main)MDL-84346.png
          (3) 2 Passed -- (Main)MDL-84346.png
          32 kB
        6. image-2025-02-24-13-07-52-514.png
          image-2025-02-24-13-07-52-514.png
          55 kB
        7. screenshot-1.png
          screenshot-1.png
          45 kB
        8. screenshot-2.png
          screenshot-2.png
          38 kB
        9. screenshot-3.png
          screenshot-3.png
          43 kB
        10. screenshot-4.png
          screenshot-4.png
          38 kB
        11. screenshot-5.png
          screenshot-5.png
          42 kB
        12. screenshot-6.png
          screenshot-6.png
          41 kB
        13. screenshot-7.png
          screenshot-7.png
          47 kB
        14. screenshot-8.png
          screenshot-8.png
          27 kB
        15. screenshot-9.png
          screenshot-9.png
          55 kB

            mikelmartíncorrales Mikel Martín Corrales
            tusefomal Ferran Recio
            Carlos Escobedo Carlos Escobedo
            Ferran Recio Ferran Recio
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 1 hour, 30 minutes
                1d 1h 30m

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