Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Courses lists upgrade to 2.5: Difference between revisions

From MoodleDocs
Line 251: Line 251:
div.courses
div.courses
   div.paging /* pagination for courses */
   div.paging /* pagination for courses */
   div.coursebox.expanded.odd.first
   div.coursebox.odd.first
     h3.name
     div.info
      a[.dimmed]
      h3.name
    div.enrolmenticons
        a[.dimmed]
    div.moreinfo /* empty, maybe populated with JS */
      div.enrolmenticons
     div.summary
      div.moreinfo /* empty, maybe populated with JS */
    ul.teachers
     div.content
      li
      div.summary
    div.coursecat
      ul.teachers
      a[.dimmed]
        li
   div.coursebox.expanded.even
      div.coursecat
        a[.dimmed]
   div.coursebox.even
   ...
   ...
   div.coursebox.expanded(.odd|.even).last
   div.coursebox(.odd|.even).last
   div.paging /* pagination for courses or 'more' link */
   div.paging /* pagination for courses or 'more' link */
</code>
</code>
Line 272: Line 274:
! style="text-align:center" | Moodle 2.5
! style="text-align:center" | Moodle 2.5
|-
|-
| <span style="color:red">.coursebox</span>
| <span style="color:red">.coursebox > <b style="color:red">.info</b> > ul.teachers > li</span>
| <span style="color:green">.coursebox.expanded</span> ''(when applying big margin/padding)''
| <span style="color:green">.coursebox > <b style="color:green">.content</b> > ul.teachers > li</span>
|-
|-
| <span style="color:red">.coursebox > .info > .name > a</span>
| <span style="color:red">.coursebox > <b style="color:red">.summary</b></span>
| <span style="color:green">.coursebox > .name > a</span>
| <span style="color:green">.coursebox > <b style="color:green">.content > .summary</b></span>
|-
|-
| <span style="color:red">.coursebox > .info > ul.teachers > li</span>
| <span style="color:red">.coursebox > <b style="color:red">.summary</b> > p.category</span>
| <span style="color:green">.coursebox > ul.teachers > li</span>
| <span style="color:green">.coursebox > <b style="color:green">.content</b> > div.coursecat</span> ''(could not use word 'category' any more because it might cause CSS confusions)''
|-
|-
| <span style="color:red">.coursebox > .summary > p.category</span>
| <span style="color:red">.coursebox > <b style="color:red">.summary</b> > .enrolmenticons</span>
| <span style="color:green">.coursebox > div.coursecat</span> ''(could not use word 'category' any more because it might cause CSS confusions)''
| <span style="color:green">.coursebox > <b style="color:green">.info</b> > .enrolmenticons</span>
|-
| <span style="color:red">.coursebox > .summary > .enrolmenticons</span>
| <span style="color:green">.coursebox > .enrolmenticons</span>
|}
|}



Revision as of 01:08, 15 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

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

or div.coursebox.collapsed

 div.info
div.name /* Note that it is not

any more */ a div.enrolmenticons div.moreinfo /* contains link to /course/info.php or empty */ div.content

Also note that JS may be attached to switch between modes by hiding content or loading it via AJAX request. In this case the tag with class .name is not changing so the name does not change font size.

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[.collapsed].odd.first
   div.coursebox[.collapsed].even
   ...
   div.coursebox[.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]][.dimmed_category]
   div.header
[h3|h4].name /*

for nested categories */ a div.children /* always present even if empty */ 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 */
   div.controls
       div.addtoall.expandall
       div.removefromall.collapseall

Changes in CSS

Go through your .css files in the themes and look for the following styles: .coursebox .courseboxes .course_category_tree .categorylist table.category_subcategories .categorybox .categoryboxcontent

  1. page-course-info
  2. page-course-enrol /* also this is now #page-enrol-index */
  3. page-course-index
  4. page-course-category

If you found any of those unfortunately you will need to do changes to your theme.

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
   div.info
     h3.name
       a[.dimmed]
     div.enrolmenticons
     div.moreinfo /* empty */
   div.content
     div.summary
     ul.teachers
       li

Courses lists

  • search results
  • tagged courses
  • list of enrolled or available courses on the front page
  • category page where 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.courses

 div.paging /* pagination for courses */
 div.coursebox.odd.first
   div.info
     h3.name
       a[.dimmed]
     div.enrolmenticons
     div.moreinfo /* empty, maybe populated with JS */
   div.content
     div.summary
     ul.teachers
       li
     div.coursecat
       a[.dimmed]
 div.coursebox.even
 ...
 div.coursebox(.odd|.even).last
 div.paging /* pagination for courses or 'more' link */

CSS directives replacements
Moodle 2.4 Moodle 2.5
.coursebox > .info > ul.teachers > li .coursebox > .content > ul.teachers > li
.coursebox > .summary .coursebox > .content > .summary
.coursebox > .summary > p.category .coursebox > .content > div.coursecat (could not use word 'category' any more because it might cause CSS confusions)
.coursebox > .summary > .enrolmenticons .coursebox > .info > .enrolmenticons

Combo list on frontpage

Moodle 2.4 Moodle 2.5

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 */
     ... /* more div.category */
   div.courses
     div.course
       a.course_link
       div.course_info
          img, a img /* enrolment icons and link to /course/info.php */
     ... /* more div.course */

div.course_category_tree.frontpage-category-combo

 div.subcategories
   div.category[.with_children[.loaded[.collapsed]|.notloaded]][.dimmed_category]
     div.header
[h3|h4].name /*

for nested categories */ a div.children div.subcategories .... /* recursive */ div.courses ... /* see in the same example below */ ... /* more div.category */ div.paging.paging-viewmore /* 'more' link for categories */ div.courses div.coursebox.collapsed[.odd|.even|.first|.last] div.name /* Note that it is not

any more */ a[.dimmed] div.enrolmenticons div.moreinfo /* contains link to /course/info.php or empty */ ... /* more div.coursebox */ div.paging.paging-viewmore /* 'more' link for courses */ div.controls div.addtoall.expandall div.removefromall.collapseall

CSS directives replacements
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 > .enrolmenticons,

.course_category_tree .courses. > .coursebox > .moreinfo

.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
.course_category_tree .category > .subcategories .course_category_tree .category > .children > .subcategories
.course_category_tree .category > .courses .course_category_tree .category > .children > .courses

Categories lists

Moodle 2.4 Moodle 2.5
Categories list on the frontpage

div.box.generalbox.categorybox

 div.categorylist
   div.category
     a
     span.numberofcourse
   div.category
     div.indentation /* maybe several nested */
       a
       span.numberofcourse

div.course_category_tree.frontpage-category-names

 div.subcategories
   div.category[.with_children[.loaded[.collapsed]|.notloaded]][.dimmed_category]
     div.header
[h3|h4].name /*

for nested categories */ a span.numberofcourse div.children div.subcategories .... /* recursive */ ... /* more div.category */ div.paging.paging-viewmore /* 'more' link */ div.controls div.addtoall.expandall div.removefromall.collapseall

Categories list on /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 */

div.course_category_tree.category-browse.category-browse-0

 div.subcategories
   div.category[.with_children[.loaded[.collapsed]|.notloaded]][.dimmed_category]
     div.header
[h3|h4].name /*

for nested categories */ a div.children div.subcategories .... /* recursive */ div.courses div.coursebox.collapsed[.odd|.even|.first|.last] div.name a[.dimmed] div.enrolmenticons div.moreinfo /* contains link to /course/info.php or empty */ ... /* more div.coursebox */ div.paging.paging-viewmore /* 'more' link for courses */ ... /* more div.category */ div.paging.paging-viewmore /* 'more' link for categories */ div.controls div.addtoall.expandall div.removefromall.collapseall Note that by default categories content is not loaded, it may be loaded by AJAX request

CSS directives replacements
Moodle 2.4 Moodle 2.5
.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

Browsing category

Moodle 2.4 Moodle 2.5
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
     ...

div.course_category_tree.category-browse

 div.subcategories
   div.paging /* pagination for categories */
   div.category[.with_children[.loaded[.collapsed]|.notloaded]][.dimmed_category]
     div.header
[h3|h4].name /*

for nested categories */ a div.children div.subcategories .... /* recursive */ div.courses ... /* see in the same example below */ ... /* more div.category */ div.paging /* pagination for categories or 'more' link */ div.courses div.paging /* pagination for courses */ div.coursebox[.expanded|.collapsed][.odd|.even|.first|.last] div.name /* Note that it is not

any more */ a[.dimmed] div.enrolmenticons div.moreinfo /* contains link to /course/info.php or empty */ div.summary ul.teachers li ... /* more div.coursebox */ div.paging /* pagination for courses or 'more' link */ div.controls div.addtoall.expandall div.removefromall.collapseall Note that by default subcategory content is not loaded, it may be loaded by AJAX request If there are no more than $CFG->courseswithsummarieslimit courses, they will be displayed as div.coursebox.expanded, otherwise they will be displayed as div.coursebox.collapsed (without .summary and .teachers)

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
   ...

CSS directives replacements
Moodle 2.4 Moodle 2.5
.courseboxes .course_category_tree.category-browse
table.category_subcategories .course_category_tree .subcategories (no more tables!)
also see styles for Listings of courses