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

Update the Moodle frontpage styles

    XMLWordPrintable

Details

    • Improvement
    • Status: Closed
    • Blocker
    • Resolution: Fixed
    • 4.0
    • 4.0
    • Themes
    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-71291-master
    • Hide

      Setup

      1. Navigate to Site Administration > Courses > Manage courses and Categories
      2. Create a few new categories on the top level
      3. Within one of the categories create a subcategory
      4. Create 4 courses in one of the categories that does not have a subcategory
      5. Create 4 courses in the category that has a subcategory
      6. Add a description to this category
      7. Add a course image, and a course description in each of these courses
      8. Enrol yourself in 4 courses as teacher
      9. Configure 2 courses to have self-enrolment
      10. Configure 2 courses to have guest-access enrolment
      1. Navigate to Site Administration > Frontpage Settings
      2. In Field frontpageloggedin configure:
      3. - List of courses
      4. - Enrolled courses
      5. - List of categories
      6. - Combolist
      7. - Course search box

      Testing 'Available courses'

      1. Verify that the design for the courses match the figma designs:
      2. - course descriptions are alined with the course images (if added)
      3. - course names use the body font size
      4. - enrolment icons are aligned to the left
      5. - teachers for courses are aligned to the left

      Testing 'My courses'

      1. The design for your enrolled courses should match the design of the courses listed in 'Available courses'. See the previous step

      Testing 'Course categories'

      1. Verify that the design for the courses match the figma designs:
      2. - You should see a collapse / expand icon for categories with children only

      Testing 'Courses' (the combo list)

      1. Verify that the design for the courses match the figma designs:
      2. - You should see a collapse / expand icon for categories with children only
      3. - All course icons (info, lock, guest access) should be aligned to the left
      4. - Clicking the info icon should show the course description and image
      5. - Course descriptions should be aligned with the images

      Testing the /course page

      1. In the 'Course categories' list click on a Category name that has a child category and some courses
      2. On the /course page verify you see
      3. The top category select box is aligned to the left
      4. The category description is aligned to the left and has no border
      5. There is a subcategory shown
      6. There are courses lists, these courses should not have a border

      Testing the search results

      1. In the 'Search Courses' search. Type the name of one of your courses
      2. Verify you see the course listed, the course should have a border
      3. Verify you see the course category name with the word Category in bold

      Testing custom course fields

      1. Navigate Site Administration > Courses > Custom course fields
      2. Create a new coures field of type 'Date and time'
      3. Name the field 'Course will start'
      4. Navigate to one of your courses
      5. Go to the course settings tab
      6. Configure the Custom course field to a random date
      7. Navigate to the Site homepage
      8. Verify you see your course and the 'Course will start' date
      9. Verify the 'Course will start' string is bolded
      Show
      Setup Navigate to Site Administration > Courses > Manage courses and Categories Create a few new categories on the top level Within one of the categories create a subcategory Create 4 courses in one of the categories that does not have a subcategory Create 4 courses in the category that has a subcategory Add a description to this category Add a course image, and a course description in each of these courses Enrol yourself in 4 courses as teacher Configure 2 courses to have self-enrolment Configure 2 courses to have guest-access enrolment Navigate to Site Administration > Frontpage Settings In Field frontpageloggedin configure: - List of courses - Enrolled courses - List of categories - Combolist - Course search box Testing 'Available courses' Verify that the design for the courses match the figma designs: - course descriptions are alined with the course images (if added) - course names use the body font size - enrolment icons are aligned to the left - teachers for courses are aligned to the left Testing 'My courses' The design for your enrolled courses should match the design of the courses listed in 'Available courses'. See the previous step Testing 'Course categories' Verify that the design for the courses match the figma designs: - You should see a collapse / expand icon for categories with children only Testing 'Courses' (the combo list) Verify that the design for the courses match the figma designs: - You should see a collapse / expand icon for categories with children only - All course icons (info, lock, guest access) should be aligned to the left - Clicking the info icon should show the course description and image - Course descriptions should be aligned with the images Testing the /course page In the 'Course categories' list click on a Category name that has a child category and some courses On the /course page verify you see The top category select box is aligned to the left The category description is aligned to the left and has no border There is a subcategory shown There are courses lists, these courses should not have a border Testing the search results In the 'Search Courses' search. Type the name of one of your courses Verify you see the course listed, the course should have a border Verify you see the course category name with the word Category in bold Testing custom course fields Navigate Site Administration > Courses > Custom course fields Create a new coures field of type 'Date and time' Name the field 'Course will start' Navigate to one of your courses Go to the course settings tab Configure the Custom course field to a random date Navigate to the Site homepage Verify you see your course and the 'Course will start' date Verify the 'Course will start' string is bolded

    Description

      Use course cards for the frontpage items

      • list of courses
      • list of categories
      • combolist
      • enrolled courses

      Update the search to show suggestions on typing

      Figma prototype:
      https://www.figma.com/proto/YgOnIt36A9IK672crB5I1q/4.0-UX-Demo-V3?node-id=2356%3A27868&scaling=scale-down&page-id=1253%3A4212&starting-point-node-id=2394%3A15559

      Attachments

        1. course-folder.png
          course-folder.png
          879 kB
        2. course-folder-1.png
          course-folder-1.png
          879 kB
        3. list-of-courses.png
          list-of-courses.png
          1.12 MB
        4. list-of-course-with-progress.png
          list-of-course-with-progress.png
          1.04 MB
        5. MDL-71291_1.webm
          3.18 MB
        6. MDL-71291_2.png
          MDL-71291_2.png
          217 kB
        7. MDL-71291_3.png
          MDL-71291_3.png
          217 kB
        8. MDL-71291_4.png
          MDL-71291_4.png
          247 kB
        9. top-level-categories.png
          top-level-categories.png
          1019 kB

        Activity

          People

            basbrands Bas Brands
            basbrands Bas Brands
            Mathew May Mathew May
            Ilya Tregubov Ilya Tregubov
            Angelia Dela Cruz Angelia Dela Cruz
            Huong Nguyen, Bas Brands, Mathew May
            Votes:
            0 Vote for this issue
            Watchers:
            11 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 - 1 day, 4 hours
                1d 4h