Difference between revisions of "Courses lists upgrade to 2.5"

Jump to: navigation, search
(One course: core_course_renderer::coursecat_coursebox())
(Pages, displaying information about one course only)
Line 382: Line 382:
 
   br /* plus short course name in parenthesis */
 
   br /* plus short course name in parenthesis */
 
div.box.generalbox.info
 
div.box.generalbox.info
   div.no-overflow
+
   div.no-overflow /* missing if there is no summary */
 
   ul.teachers
 
   ul.teachers
 
     li
 
     li
 
</code>
 
</code>
 
| <code css>
 
| <code css>
div.course-info-box
+
div.box.generalbox.info
    div.course
+
  div.coursebox.expanded
        h3.course_name /* never <div> */
+
    h3.name
            a.course_link
+
      a[.dimmed]
        div.course_info
+
  div.enrolmenticons
        div.course_summary
+
  div.moreinfo /* empty */
        ul.course_contacts
+
  div.summary
            li
+
  ul.teachers
 +
    li
 
</code>
 
</code>
 
|}
 
|}

Revision as of 04:40, 13 March 2013

There are significant changes in course-related functions and UI in 2.5. This document is aimed to assist migration from 2.4 to 2.5. This is NOT a complete documentation on 2.5 features.

Theme developers

All course listings are now performed through the same renderer functions.

There are significant changes to CSS classes used

Pages that are affected by the new renderer functions

To test your theme make sure that your site has several course categories with courses. Also some courses have summaries. Some courses should have enrollment methods other than manual (i.e. self enrollment). Some courses should have enrolled users with roles listed in $CFG->coursecontact. See screenshots attached to MDL-37009

Pages and responsible renderer functions:

  • Courses lists on frontpage (see $CFG->frontpage, $CFG->frontpageloggedin) - core_course_renderer::courses_list_frontpage()
    • List of courses where user is enrolled (please note, this is no longer recommended setting, use 'my' page instead!)
    • List of all available courses
    • Categories list ($CFG->maxcategorydepth will affect how many subcategories levels to display)
    • Combo list ($CFG->maxcategorydepth will affect how many subcategories levels to display)
  • View courses (/course/index.php, /course/category.php) - core_course_renderer::course_category()
    • Category is empty
    • Category has only subcategories
    • Category has only subcategories and there are more than $CFG->coursesperpage of them
    • Category has only courses and there are less courses than $CFG->courseswithsummarieslimit
    • Category has only courses and there are more than $CFG->courseswithsummarieslimit but less than $CFG->coursesperpage
    • Category has only courses and there are more than $CFG->coursesperpage
    • Category has both courses and categories and at least one of the lists is bigger than $CFG->coursesperpage (make sure to click "more" link for both courses and categories list).
  • Search courses - core_course_renderer::search_courses()
    • No courses found
    • Less than $CFG->coursesperpage courses found
    • More than $CFG->coursesperpage courses found
  • Courses with tag - core_course_renderer::tagged_courses()
    • Enable tag functionality, tag some courses with the same tag, add Tags block, click on tag name, the list of tagged courses is displayed (this is very similar to search results)
  • Course information (.course-info-box) - core_course_renderer::course_info_box()
    • If course has self enrollment, when student clicks on course name he is redirected to /enrol/index.php
    • In collapsed courses listing there is an "i" icon next to the course name, click on it, /course/info.php is opened

Hint. To change $CFG->xxx type xxx in the search box in Administration block.

New renderer functions

One course: core_course_renderer::coursecat_coursebox()

How to use What you get (HTML/CSS)
This function is used to render courses lists, print course information and/or display courses and categories trees in many places.

To print information about one course on php page:

$renderer = $PAGE->get_renderer('core', 'course');
echo $renderer->course_info_box($course);

Function course_info_box() also existed in Moodle 2.4.

Remember that function print_course() is deprecated in 2.5.

div.coursebox.expanded
    h3.name
        a[.dimmed]
    div.enrolmenticons
    div.moreinfo /* empty, may be populated with JS */
    div.summary
    div.coursecat
        a[.dimmed]
    ul.teachers
        li

or

div.coursebox.collapsed
    div.name /* Note that it is not <h3> any more */
        a
    div.enrolmenticons
    div.moreinfo /* contains link to /course/info.php or empty */

List of courses: core_course_renderer::coursecat_courses()

How to use What you get (HTML/CSS)
Also is already used in many course listings.

To print custom list of courses on php page:

$renderer = $PAGE->get_renderer('core', 'course');
echo $renderer->courses_list($courses);

Remember that function print_courses() is deprecated.

CSS classes
div.courses
    div.paging /* pagination for courses */
    div.coursebox(.expanded|.collapsed).odd.first
    div.coursebox(.expanded|.collapsed).even
    ...
    div.coursebox(.expanded|.collapsed)(.odd|.even).last
    div.paging /* pagination for courses or 'more' link */

List of subcategories: core_course_renderer::coursecat_subcategories()

How to use What you get (HTML/CSS)
Can be used only as part of tree CSS classes
div.subcategories
    div.paging /* pagination for categories */
    div.category[.with_children[.loaded[.collapsed]|.notloaded]]
        div.header
            [h3|h4].name /* <h4> for nested categories */
                a
        div.subcategories
            .... /* recursive */
        div.courses
            ... /* see above */
    div.category
    div.category
    ...
    div.paging /* pagination for categories or 'more' link */

Courses and categories tree: core_course_renderer::render_coursecat_renderable()

How to use What you get (HTML/CSS)
Can be called as $renderer->render($coursecat) but since the class coursecat_renderable is defined inside /course/renderer.php it is not recommended to use it from outside of the class.

Used in functions:

$renderer = $PAGE->get_renderer('core', 'course');
echo $renderer->courses_list_frontpage($displaymode);
echo $renderer->search_courses($searchcriteria);
echo $renderer->tagged_courses($tagid);
echo $renderer->course_category($id);
div.course_category_tree /* plus extra class for each particular listing */
    div.subcategories
        ... /* see above */
    div.courses
        ... /* see above */

CSS classes hierarchy

Listings of courses only where courses information is expanded:

  • search results
  • tagged courses
  • list of enrolled or available courses on the front page
  • category page where category does not have subcategories and number of courses is less than $CFG->courseswithsummarieslimit
Moodle 2.4 Moodle 2.5
div.box.courseboxes /* category view only */
  ul.unlist /* category view and frontpage */
    li /* category view and frontpage */
      div.coursebox
        div.info
          h3.name
            a
          ul.teachers
            li
        div.summary
          div.no-overflow
             ...
             p.category /* search results only */
          div.enrolmenticons
             img
div.course_category_tree.courses-only
  div.courses
    div.paging /* pagination */
    div.course
      h3.course_name /* never <div> */
        a.course_link /* has background image 'course' */
      div.course_info
        img, a img /* enrolmenticons */
      div.course_summary
      div.course-category /* search results and tagged courses */
      ul.course_contacts
        li
    div.course
    div.course
    ...
    div.paging /* may be pagination or 'more' link */

Tree of categories and courses

  • category page (except case listed above)
  • 'Courses' page (/course/index.php without specifying category id)
  • categories tree on the front page
  • combo list on the front page

All those listings show not only courses but also subcategories, either expanded or not.

Moodle 2.4 Moodle 2.5 Comments
Combo list on frontpage
div.course_category_tree
  div.category[.with_children] /* in some themes has background image with gradient */
    div.category_label /* has background image 'collapsed'/'expanded' */
      a.category_link
    div.subcategories
      div.category
        ... /* recursive */
    div.courses
      div.course
        a.course_link
        div.course_info
           img, a img /* enrolment icons and link to /course/info.php */
div.course_category_tree
    div.subcategories
        div.paging /* pagination */
        div.category[.with_children[.loaded[.collapsed]|.notloaded]] /* does NOT have background image any more */
            div.category_label /* in some themes has background image with gradient */
                [h3|h4].category_name /* <h4> for nested categories; has background image 'collapsed'/'expanded' */
                    a.category_link
            div.subcategories
                .... /* recursive */
            div.courses
                ....
        div.category
        div.category
        ...
        div.paging /* may be pagination or 'more' link */
    div.courses
        div.paging /* pagination */
        div.course
            [div|h3].course_name /* In this listing type it is usually <div>. May be <h3> if course is shown expanded, with summary and contacts */
                a.course_link /* has background image 'course' */
            div.course_info
            div.course_summary /* usually not present in this listing */
            ul.course_contacts /* usually not present in this listing */
                li
        div.course
        div.course
        ...
        div.paging /* may be pagination or 'more' link */
Categories list on frontpage
div.box.generalbox.categorybox
  div.categorylist
    div.category
      a
      span.numberofcourse
    div.category
      div.indentation /* maybe several nested */
        a
        span.numberofcourse
Category view with subcategories
table.generalbox.boxaligncenter.category_subcategories
  thead
    tr
      th /* 'Sub-categories' */
  tbody
    tr
      td
        a
    tr
    ...
div.box.courseboxes
  ul.unlist
    li
      div.coursebox
        div.info
          h3.name
            a
          ul.teachers
            li
        div.summary
          div.no-overflow
             ...
             p.category /* search results only */
          div.enrolmenticons
             img
      div.coursebox
      ...
Category view with paginated courses

or category with more than $CFG->courseswithsummarieslimit courses

table.generalbox.boxaligncenter.category_subcategories
  ... /* see above */
div.paging /* applies to courses only! */
table.generalbox.boxaligncenter
  tbody
    tr
      th /* 'Courses' */
      th /* empty */
    tr
      td
        a /* link to course */
      td
        img, a img /* enrolment icons and link to /course/info.php */
    tr
    ...
/course/index.php
div.box.categorybox
  div.categorylist
    div.category
      div.image
        img /* 'i/course' */
      div.name
        a
    div.clearfloat /* empty */
    div.course /* note that it is not nested in .category */
      div.indentation
        div.name
          img /* enrolment icon */
          a /* link to course */
        div.info
          a /* link to /course/info.php */
            img
    div.course
    ... /* other courses */
  div.categorylist
    div.category
      div.indentation /* indicates that this category is nested */
        div.image
        div.name
    div.course
      div.indentation
        div.indentation
          div.name
          div.info
    ... /* other courses */
  ... /* other categories */

Pages, displaying information about one course only

  • /course/info.php
  • /enrol/index.php (in Moodle 2.4 had url /course/enrol.php)
Moodle 2.4 Moodle 2.5
h2.main /* course/info.php only */
  a /* link to course */
  br /* plus short course name in parenthesis */
div.box.generalbox.info
  div.no-overflow /* missing if there is no summary */
  ul.teachers
    li
div.box.generalbox.info
  div.coursebox.expanded
    h3.name
      a[.dimmed]
  div.enrolmenticons
  div.moreinfo /* empty */
  div.summary
  ul.teachers
    li

Some common CSS rules that need to be changed

Moodle 2.4 Moodle 2.5
.course_category_tree .courses. > .course .course_category_tree .courses. > .coursebox (or .coursebox.collapsed)
.course_category_tree .courses. > .course > .course-info .course_category_tree .courses. > .coursebox > .icons
.course_category_tree .courses. > .course > .course_link .course_category_tree .courses. > .coursebox > .name > a
.course_category_tree .category > .category_label > .category_link .course_category_tree .category > .header > .name > a
.coursebox .coursebox.expanded (when applying big margin/padding)
.coursebox > .info > .name > a .coursebox > .name > a
.coursebox > .info > ul.teachers > li .coursebox > ul.teachers > li
.coursebox > .summary > p.category .coursebox > div.coursecat (could not use word 'category' any more because it might cause CSS confusions)
.coursebox > .summary > .enrolmenticons .coursebox > div.icons
.categorylist > .category div.name > a .course_category_tree .subcategories > .category > div.header > .name > a
.categorylist > .category .image does not exist anymore, if you want to add an icon for category add it as background for .category .name > a
.categorylist .indentation does not exist anymore, all subcategories and courses are nested div's now
.categorylist .course .course_category_tree .courses. > .coursebox
.courseboxes .category-browse
table.category_subcategories .course_category_tree .subcategories (no more tables!)