MDL-37009 new course listings: changes to canvas and other themes:

canvas-based themes: formal_white, magazine, splash

theme/canvas/style/course.css

@@ -4,20 +4,12 @@
     border-style: solid;
 }
 
-.coursebox .name {
-    font-size: 1.1em;
-}
-
 .coursebox .teachers {
     margin: 0 0 0 0.75em;
 }
 
-.categorybox {
-    border: none;
-}
-
-.categorybox .categorylist td {
-    padding: 2px;
+.dir-rtl .coursebox .teachers {
+    margin: 0 0.75em 0 0;
 }
 
 .categorypicker {
@@ -34,11 +26,7 @@
     margin: 0 5px 0 0;
 }
 
-#page-course-category .rolelink {
-    text-align: right;
-}
-
-#page-course-category .generalbox {
+#page-course-category .generalbox.info {
     margin: 25px auto 30px;
     width: 75%;
     padding: 10px;

theme/formal_white/style/course.css

@@ -10,11 +10,16 @@
 
 /** Course **/
 .coursebox {border:1px solid #DDD;border-color:#DDDDDD;}
-.coursebox .info {margin:5px;font-size:100%;}
-.coursebox .info .name {margin:3px 0;}
-.coursebox .info .teachers {margin:0 1em;font-size:90%;}
-.coursebox .cost {font-size:90%;padding-top:20px;}
-.coursebox .summary {margin:5px;font-size:90%;}
+#page-enrol-index .generalbox.info,
+#page-course-info .generalbox.info {border:none;}
+.coursebox .info {margin:0;font-size:100%;}
+.coursebox .name {margin:5px;}
+.coursebox .content {font-size:90%;}
+.coursebox .teachers {margin:5px 1em;}
+.coursebox .summary,
+.coursebox .coursecat {margin:5px;}
+.coursebox > .content:after,
+.coursebox > .info:after {clear:both;content:".";display:block;height:0;min-width:0;visibility:hidden;}
 
 #page-course-recent h2.main {font-size:110%;}
 #page-course-recent .user {font-size:75%;}
@@ -57,8 +62,6 @@
 .weeks .content,
 .topics .content {padding:5px;}
 
-.categoryboxcontent {border-color:#DDDDDD;}
-
 #page-report-outline-user .section {border-color:#AAAAAA;}
 
 #page-admin-report .plugin,
@@ -68,8 +71,7 @@
 .path-course-view .unread {background:#E3DFD4;}
 .path-course-view .completionprogress {font-size:80%; padding:8px 26px 5px 5px;}
 
-#page-course-category .courseboxes,
-#page-course-index .courseboxes {padding:20px;}
+.course_category_tree.category-browse {padding:20px;}
 
 #page-report #content {padding-top:15px;padding-bottom:15px;}
 
@@ -83,34 +85,22 @@
 #page-report-log-index .logselectform,
 #page-report-participation-index .participationselectform {text-align:center;}
 
-.addcoursebutton {text-align:center;}
 .categorypicker {text-align:center;margin-bottom:10px;}
 .path-report-outline .loginfo {text-align:center;margin:1em;}
-.categorylist {width:90%;margin:0 auto;text-align:left;}
-.categorylist .category .info,
-.categorylist .category .indentation,
-.categorylist .category .name,
-.categorylist .category .image,
-.categorylist .course .name,
-.categorylist .course .info {margin: 0.1em;}
-
-/* Course and category combo list on front page */
+
+/* Course and category listings */
 .course_category_tree .controls {margin-bottom:5px;text-align:right;float:right;}
 .course_category_tree .controls div {padding-right:2em;font-size:75%;}
-.course_category_tree .category {background-color:#FFF;background-image:url([[pix:theme|hgradient]]);background-repeat:repeat-x;border:1px solid #ddd;margin-bottom:10px;}
-.course_category_tree .category .subcategories {background-color:inherit;padding-left:11px;border-width:1px 0 1px 1px;border-color:#FFF;border-style:solid;margin-top:8px;}
-.course_category_tree .category.with_children .category_label {background-position:3px 3px;margin-left:6px;}
-.course_category_tree .category_link .category_link {font-size:95%;}
-.course_category_tree .category_label {padding-left:13px;}
-.course_category_tree .category_link {display:block;margin:5px;font-size:120%;font-weight:bold;}
-.course_category_tree .category .courses {background-color:inherit;}
-.course_category_tree .category .courses .course_link {margin:5px;margin-right:100px;}
-.course_category_tree .category .course {border:1px solid #f9f9f9;border-bottom-color:#eee;border-right-width:0;}
-.course_category_tree .category .course:last-child {border-bottom-color:#f6f6f6;}
-.course_category_tree .category .course.even {background-color:#f6f6f6;border-color:#eee;border-top-color:#f9f9f9;}
-.course_category_tree .category .course_info {right:3px;top:3px;}
-.course_category_tree .category .course:hover {background-color:#eee;}
-.course_category_tree .category .category {margin:5px 0 5px 5px;border-right:0 transparent none;border-left:0 transparent none;border-bottom:1px transparent solid;}
+.course_category_tree .category > .info {background-color:#FFF;background-image:url([[pix:theme|hgradient]]);background-repeat:repeat-x;border:1px solid #ddd;}
+.course_category_tree.frontpage-category-names .category > .info {background:none;border:none;}
+.course_category_tree .category > .info {margin: 5px 0;}
+.course_category_tree .category > .info .name {margin:5px;padding-left:16px;}
+.dir-rtl .course_category_tree .category > .info .name {padding-left:0;padding-right:16px;}
+.courses .coursebox.even {background-color:#f6f6f6;border-color:#eee;}
+.courses .coursebox:hover,
+.course_category_tree .courses > .paging:hover {background-color:#eee;}
+.course_category_tree .courses > .paging,
+.course_category_tree .subcategories > .paging {padding:5px;}
 
 /* Publication */
 #page-course-publish-metadata .metadatatext {width:400px;}

theme/magazine/style/core.css

@@ -875,7 +875,7 @@ table.rolecap td.risk {
     border-left: 1px solid #dadada;
 }
 
-/** Coursebox and category box stuff for front page **/
+/** Course and category listings **/
 
 ul.unlist, ul.unlist li, ul.unlist li div, ul.unlist li div ul, ul.unlist li div ul li {
     list-style-type: none;
@@ -884,109 +884,72 @@ ul.unlist, ul.unlist li, ul.unlist li div, ul.unlist li div ul, ul.unlist li div
 }
 
 div.coursebox {
-    padding-bottom: 7px !important;
-    margin-bottom: 7px !important;
-    border-bottom: 1px solid #eee;
+    margin-bottom: 7px;
+    border-color: #eeeeee;
 }
 
-div.coursebox h3.name {
-    margin-top: 0px;
-    margin-bottom: 0px;
+div.coursebox.collapsed {
+    margin-bottom: 0;
+}
+
+div.coursebox > .info .name a {
+    font-weight: inherit;
+}
+div.coursebox .name {
+    margin: 5px;
 }
 
 div.coursebox h3.name a {
     font-size: 16px;
     font-weight: 400;
 }
 
-.unlist div.summary {
+.courses .coursebox div.summary {
     font-size: 14px;
     color: #666666;
     font-style: italic;
 }
 
-.unlist ul.teachers {
+.courses .coursebox ul.teachers {
     display: block;
     padding-left: 5px !important;
 }
 
-.dir-rtl .unlist ul.teachers {
+.dir-rtl .courses .coursebox ul.teachers {
     padding-right: 5px;
 }
 
-.unlist ul.teachers li {
+.courses .coursebox ul.teachers li {
     font-size: 10px;
 }
 
-.unlist ul.teachers li a {
+.courses .coursebox ul.teachers li a {
     font-size: 11px;
 }
 
-div.categorybox {
-    border: none !important;
-    margin-top: 0;
-}
-
-td.category.name a {
-    padding-left: 20px;
-    background: url([[pix:theme|jcourse]]) no-repeat 0 50%;
-    font-weight: 400;
-    font-size: 16px;
-}
-
-#course-index td.category.name a {
-    padding-left: 0px;
-    background-image: none;
-}
-
-table.categorylist td {
-    padding: 0;
-}
-
-div.course_category_tree a {
+div.course_category_tree .category > .info a {
     font-size: 16px;
     font-weight: 400;
     text-decoration: none;
 }
 
-div.course_category_tree div.category,div.course_category_tree div.category_label,div.course_category_tree div.courses {
+div.course_category_tree div.category,
+div.course_category_tree div.category > .info,
+div.course_category_tree div.courses {
     margin-bottom: 8px;
 }
 
-div.course_category_tree div.category.with_children div.category_label {
-    background-position: 0 55% !important;
-}
-.dir-rtl div.course_category_tree div.category.with_children div.category_label {
-    background-position: right center !important;
-}
-
-div.course_category_tree div.course.odd {
+div.course_category_tree div.coursebox.odd {
     background: #eee;
 }
 
-div.course_category_tree div.course a {
+div.course_category_tree div.coursebox a {
     font-size: 14px;
 }
 
-div.category.subcategory.with_children {
-    margin-left: 20px;
-}
-
-.dir-rtl div.category.subcategory.with_children {
-    margin-right: 20px;
-}
-
-.dir-rtl .course_category_tree .category .course_info {
-    padding-right: 20px;
-}
-
-.dir-rtl.jsenabled .course_category_tree .category.with_children.collapsed .category_label {
-    background-position: right center !important;
-}
-
-.dir-rtl .course_category_tree .category_label,
-.dir-rtl .course_category_tree .category .course {
-    padding-right: 35px;
+div.course_category_tree .courses > .paging,
+div.course_category_tree .subcategories > .paging {
+    margin:5px;
 }
 
 div.course_category_tree div.controls {

theme/splash/style/core.css

@@ -332,23 +332,25 @@ img.icon {
     padding:0;
     margin:0;
 }
-.categorybox .category {
-    font-size: 100%;
-    font-weight: normal;
-    padding: 0px 0px 0px 10px;
+#region-main .course_category_tree .category > .info h3.name,
+#region-main .course_category_tree .category > .info h4.name {
+    padding-left: 16px;
+}
+.dir-rtl #region-main .course_category_tree .category > .info h3.name,
+.dir-rtl #region-main .course_category_tree .category > .info h4.name {
+    padding-right: 16px;
+    padding-left: 0px;
 }
 li.activity {
     padding-bottom:5px;
 }
-.categorylist {
-    padding-bottom:10px;
-}
-.course {
-    padding-bottom:25px;
+.coursebox .name, #region-main .coursebox h3.name {
+    padding:0;
+    margin:5px 0;
 }
-.course_category_tree .category .courses .course_link {
-    padding:10px 18px;
-    background-position: 0 5px;
+.coursebox .name a {
+    padding-top: 5px;
+    padding-bottom: 5px;
 }
 .coursebox .summary{
     padding: 10px 0;

theme/splash/style/pagelayout.css

@@ -248,7 +248,7 @@ a:hover,
 }
 #region-main h4{
     font-size:1.2em;
-    font-weight:700;
+    font-weight:400;
     line-height:1.2em;
     padding:10px 0;
 }
@@ -479,9 +479,6 @@ input[type=text],textarea,select,input[type=password]{
     font-weight:700;
     padding:10px 0 0;
 }
-.course_category_tree .category .course{
-    padding-bottom:20px;
-}
 .coursebox{
     border:none;
     padding-bottom:20px;

theme/splash/style/red.css

@@ -70,6 +70,9 @@ a:hover {
 .tabtree .here ul .here a.nolink:hover {
     color:#853650;
 }
+.coursebox {
+    border-bottom: 1px dashed #cbd3d6;
+}
 .path-mod-quiz .qnbutton {
     background:#853650;
     color:#fff;