MDL-71291 theme_boost: minimal frontpage styling tweaks

This commit is contained in:
Bas Brands 2021-11-23 15:53:18 +01:00
parent 51149a78cc
commit 5b76eb6900
8 changed files with 146 additions and 304 deletions

View File

@ -1191,8 +1191,8 @@ class core_course_renderer extends plugin_renderer_base {
$rolenames = array_map(function ($role) {
return $role->displayname;
}, $coursecontact['roles']);
$name = implode(", ", $rolenames).': '.
html_writer::link(new moodle_url('/user/view.php',
$name = html_writer::tag('span', implode(", ", $rolenames).': ', ['class' => 'font-weight-bold']);
$name .= html_writer::link(new moodle_url('/user/view.php',
['id' => $coursecontact['user']->id, 'course' => SITEID]),
$coursecontact['username']);
$content .= html_writer::tag('li', $name);
@ -1246,8 +1246,8 @@ class core_course_renderer extends plugin_renderer_base {
if ($chelper->get_show_courses() == self::COURSECAT_SHOW_COURSES_EXPANDED_WITH_CAT) {
if ($cat = core_course_category::get($course->category, IGNORE_MISSING)) {
$content .= html_writer::start_tag('div', ['class' => 'coursecat']);
$content .= get_string('category').': '.
html_writer::link(new moodle_url('/course/index.php', ['categoryid' => $cat->id]),
$content .= html_writer::tag('span', get_string('category').': ', ['class' => 'font-weight-bold']);
$content .= html_writer::link(new moodle_url('/course/index.php', ['categoryid' => $cat->id]),
$cat->get_formatted_name(), ['class' => $cat->visible ? '' : 'dimmed']);
$content .= html_writer::end_tag('div');
}
@ -1287,11 +1287,15 @@ class core_course_renderer extends plugin_renderer_base {
if ($course instanceof stdClass) {
$course = new core_course_list_element($course);
}
$content = $this->course_summary($chelper, $course);
$content = \html_writer::start_tag('div', ['class' => 'd-flex']);
$content .= $this->course_overview_files($course);
$content .= \html_writer::start_tag('div', ['class' => 'flex-grow-1']);
$content .= $this->course_summary($chelper, $course);
$content .= $this->course_contacts($course);
$content .= $this->course_category_name($chelper, $course);
$content .= $this->course_custom_fields($course);
$content .= \html_writer::end_tag('div');
$content .= \html_writer::end_tag('div');
return $content;
}
@ -1348,8 +1352,11 @@ class core_course_renderer extends plugin_renderer_base {
} else if ($viewmoreurl = $chelper->get_courses_display_option('viewmoreurl')) {
// the option for 'View more' link was specified, display more link
$viewmoretext = $chelper->get_courses_display_option('viewmoretext', new lang_string('viewmore'));
$morelink = html_writer::tag('div', html_writer::link($viewmoreurl, $viewmoretext),
array('class' => 'paging paging-morelink'));
$morelink = html_writer::tag(
'div',
html_writer::link($viewmoreurl, $viewmoretext, ['class' => 'btn btn-secondary']),
['class' => 'paging paging-morelink']
);
}
} else if (($totalcount > $CFG->coursesperpage) && $paginationurl && $paginationallowall) {
// there are more than one page of results and we are in 'view all' mode, suggest to go back to paginated view mode
@ -1684,7 +1691,7 @@ class core_course_renderer extends plugin_renderer_base {
$output .= html_writer::start_tag('div', array('class' => 'categorypicker'));
$select = new single_select(new moodle_url('/course/index.php'), 'categoryid',
core_course_category::make_categories_list(), $coursecat->id, null, 'switchcategory');
$select->set_label(get_string('categories').':');
$select->set_label(get_string('categories').':', ['class' => 'sr-only']);
$output .= $this->render($select);
$output .= html_writer::end_tag('div'); // .categorypicker
}
@ -1943,7 +1950,7 @@ class core_course_renderer extends plugin_renderer_base {
$output = '';
$output .= html_writer::start_tag('div', array('class' => 'coursebox remotecoursebox clearfix'));
$output .= html_writer::start_tag('div', array('class' => 'info'));
$output .= html_writer::start_tag('h3', array('class' => 'name'));
$output .= html_writer::start_tag('h3', array('class' => 'coursename'));
$output .= html_writer::link($url, format_string($course->fullname), array('title' => get_string('entercourse')));
$output .= html_writer::end_tag('h3'); // .name
$output .= html_writer::tag('div', '', array('class' => 'moreinfo'));

View File

@ -36,7 +36,7 @@ var CSS = {
COLLAPSEEXPAND: '.collapseexpand',
COURSEBOX: '.coursebox',
COURSEBOXLISTENLINK: '.coursebox .moreinfo',
COURSEBOXSPINNERLOCATION: '.coursename a',
COURSEBOXSPINNERLOCATION: '.info .moreinfo',
COURSECATEGORYTREE: '.course_category_tree',
PARENTWITHCHILDREN: '.category'
},

File diff suppressed because one or more lines are too long

View File

@ -36,7 +36,7 @@ var CSS = {
COLLAPSEEXPAND: '.collapseexpand',
COURSEBOX: '.coursebox',
COURSEBOXLISTENLINK: '.coursebox .moreinfo',
COURSEBOXSPINNERLOCATION: '.coursename a',
COURSEBOXSPINNERLOCATION: '.info .moreinfo',
COURSECATEGORYTREE: '.course_category_tree',
PARENTWITHCHILDREN: '.category'
},

View File

@ -34,7 +34,7 @@ var CSS = {
COLLAPSEEXPAND: '.collapseexpand',
COURSEBOX: '.coursebox',
COURSEBOXLISTENLINK: '.coursebox .moreinfo',
COURSEBOXSPINNERLOCATION: '.coursename a',
COURSEBOXSPINNERLOCATION: '.info .moreinfo',
COURSECATEGORYTREE: '.course_category_tree',
PARENTWITHCHILDREN: '.category'
},

View File

@ -705,38 +705,42 @@ span.editinstructions {
}
.coursebox {
padding: $spacer / 2;
display: flex;
flex-direction: column;
.info {
display: flex;
align-items: center;
}
}
.coursebox > .info > .coursename a {
display: block;
background-image: url([[pix:moodle|i/course]]);
background-repeat: no-repeat;
padding-left: 21px;
background-position: left 0.2em;
#frontpage-available-course-list,
#frontpage-course-list,
.course-search-result {
margin-top: $spacer / 2;
.coursebox {
padding: $spacer / 2;
border: $border-width solid $border-color;
margin-bottom: $spacer / 2;
@include border-radius();
}
}
.coursebox > .info > .coursename,
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .customfields-container {
float: left;
clear: left;
}
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .customfields-container {
width: 40%;
}
.coursebox > .info > h3.coursename {
margin: 5px;
.subcategories,
#frontpage-category-names,
#frontpage-category-combo {
.coursebox > .info > .coursename a {
display: block;
background-image: url([[pix:moodle|i/course]]);
background-repeat: no-repeat;
padding-left: 21px;
background-position: left 0.2em;
}
}
.coursebox > .info > .coursename {
font-size: $font-size-base;
font-weight: normal;
margin: 5px;
padding: 0;
}
@ -747,34 +751,9 @@ span.editinstructions {
margin: 0;
}
.coursebox .moreinfo,
.coursebox .enrolmenticons {
padding: 3px 0;
float: right;
}
.coursebox .moreinfo img {
margin: 0 .2em;
}
.coursebox .content {
clear: both;
}
.coursebox .content .summary,
.coursebox .content .coursecat {
float: right;
width: 55%;
}
.coursebox .content .coursecat {
text-align: right;
clear: right;
}
.coursebox.remotecoursebox .remotecourseinfo {
float: left;
width: 40%;
.coursebox .customfieldname,
.coursebox .customfieldseparator {
font-weight: $font-weight-bold;
}
.coursebox .content .courseimage img {
@ -793,29 +772,22 @@ span.editinstructions {
padding: 0;
}
.coursebox.remotehost > .info > .categoryname a {
background-image: url([[pix:moodle|i/mnethost]]);
}
.coursebox.collapsed {
margin-bottom: 0;
.category-browse {
.coursebox .content .coursecat,
.coursebox .content .summary,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .teachers,
.coursebox.remotecoursebox .remotecourseinfo,
.coursebox .content .customfields-container {
margin-top: 0;
}
}
.coursebox.collapsed > .content {
display: none;
}
.courses .coursebox {
&.collapsed {
padding-top: $spacer / 2;
padding-bottom: $spacer / 2;
}
&.even {
background-color: $table-accent-bg;
}
}
.courses > .paging.paging-morelink {
text-align: center;
padding: $spacer;
@ -825,36 +797,11 @@ span.editinstructions {
font-size: $font-size-sm;
}
.course_category_tree .controls {
visibility: hidden;
}
.course_category_tree .controls div {
display: inline;
cursor: pointer;
}
.jsenabled .course_category_tree .controls {
visibility: visible;
}
.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 > .info > .categoryname {
background-image: url([[pix:moodle|t/collapsed_empty]]);
background-repeat: no-repeat;
margin: 5px;
font-size: $font-size-base;
font-weight: normal;
padding: 2px 18px;
margin: 3px;
background-position: center left;
}
/* rtl:raw:
.course_category_tree .category > .info > .categoryname {
@ -863,7 +810,8 @@ span.editinstructions {
*/
.course_category_tree .category.with_children > .info > .categoryname {
background-image: url([[pix:moodle|t/expanded]]);
cursor: pointer;
background-repeat: no-repeat;
background-position: center left;
}
.course_category_tree .category.with_children.collapsed > .info > .categoryname {
@ -878,24 +826,11 @@ span.editinstructions {
display: none;
}
.course_category_tree .category > .info {
clear: both;
}
.course_category_tree .category > .content {
padding-left: 16px;
}
#page-course-index-category .generalbox.info {
margin-bottom: 15px;
border: 1px dotted #ddd;
@include border-radius(4px);
padding: 5px;
}
#page-course-index-category .categorypicker {
text-align: center;
margin: 10px 0 20px;
}
@ -1311,4 +1246,4 @@ span.editinstructions {
#changenumsections {
border-top: $border-width solid $primary-light-border;
}
}

View File

@ -14177,33 +14177,36 @@ span.editinstructions {
white-space: nowrap; }
.coursebox {
padding: 0.5rem; }
display: flex;
flex-direction: column; }
.coursebox .info {
display: flex;
align-items: center; }
.coursebox > .info > .coursename a {
#frontpage-available-course-list,
#frontpage-course-list,
.course-search-result {
margin-top: 0.5rem; }
#frontpage-available-course-list .coursebox,
#frontpage-course-list .coursebox,
.course-search-result .coursebox {
padding: 0.5rem;
border: 1px solid #dee2e6;
margin-bottom: 0.5rem;
border-radius: 0.25rem; }
.subcategories .coursebox > .info > .coursename a,
#frontpage-category-names .coursebox > .info > .coursename a,
#frontpage-category-combo .coursebox > .info > .coursename a {
display: block;
background-image: url([[pix:moodle|i/course]]);
background-repeat: no-repeat;
padding-left: 21px;
background-position: left 0.2em; }
.coursebox > .info > .coursename,
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .customfields-container {
float: left;
clear: left; }
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .customfields-container {
width: 40%; }
.coursebox > .info > h3.coursename {
margin: 5px; }
.coursebox > .info > .coursename {
font-size: 0.9375rem;
font-weight: normal;
margin: 5px;
padding: 0; }
@ -14212,29 +14215,9 @@ span.editinstructions {
padding: 0;
margin: 0; }
.coursebox .moreinfo,
.coursebox .enrolmenticons {
padding: 3px 0;
float: right; }
.coursebox .moreinfo img {
margin: 0 .2em; }
.coursebox .content {
clear: both; }
.coursebox .content .summary,
.coursebox .content .coursecat {
float: right;
width: 55%; }
.coursebox .content .coursecat {
text-align: right;
clear: right; }
.coursebox.remotecoursebox .remotecourseinfo {
float: left;
width: 40%; }
.coursebox .customfieldname,
.coursebox .customfieldseparator {
font-weight: 700; }
.coursebox .content .courseimage img {
max-width: 100px;
@ -14250,22 +14233,18 @@ span.editinstructions {
margin: 15px 5px 5px;
padding: 0; }
.coursebox.remotehost > .info > .categoryname a {
background-image: url([[pix:moodle|i/mnethost]]); }
.coursebox.collapsed {
margin-bottom: 0; }
.category-browse .coursebox .content .coursecat,
.category-browse .coursebox .content .summary,
.category-browse .coursebox .content .courseimage,
.category-browse .coursebox .content .coursefile,
.category-browse .coursebox .content .teachers,
.category-browse .coursebox.remotecoursebox .remotecourseinfo,
.category-browse .coursebox .content .customfields-container {
margin-top: 0; }
.coursebox.collapsed > .content {
display: none; }
.courses .coursebox.collapsed {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.courses .coursebox.even {
background-color: rgba(0, 0, 0, 0.03); }
.courses > .paging.paging-morelink {
text-align: center;
padding: 1rem; }
@ -14273,31 +14252,11 @@ span.editinstructions {
.course_category_tree .category .numberofcourse {
font-size: 0.8203125rem; }
.course_category_tree .controls {
visibility: hidden; }
.course_category_tree .controls div {
display: inline;
cursor: pointer; }
.jsenabled .course_category_tree .controls {
visibility: visible; }
.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 > .info > .categoryname {
background-image: url([[pix:moodle|t/collapsed_empty]]);
background-repeat: no-repeat;
padding: 2px 18px;
margin: 3px;
background-position: center left; }
margin: 5px;
font-size: 0.9375rem;
font-weight: normal;
padding: 2px 18px; }
/* rtl:raw:
.course_category_tree .category > .info > .categoryname {
@ -14306,7 +14265,8 @@ span.editinstructions {
*/
.course_category_tree .category.with_children > .info > .categoryname {
background-image: url([[pix:moodle|t/expanded]]);
cursor: pointer; }
background-repeat: no-repeat;
background-position: center left; }
.course_category_tree .category.with_children.collapsed > .info > .categoryname {
background-image: url([[pix:moodle|t/collapsed]]); }
@ -14319,20 +14279,10 @@ span.editinstructions {
.course_category_tree .category.collapsed > .content {
display: none; }
.course_category_tree .category > .info {
clear: both; }
.course_category_tree .category > .content {
padding-left: 16px; }
#page-course-index-category .generalbox.info {
margin-bottom: 15px;
border: 1px dotted #ddd;
border-radius: 4px;
padding: 5px; }
#page-course-index-category .categorypicker {
text-align: center;
margin: 10px 0 20px; }
/**

View File

@ -14177,33 +14177,36 @@ span.editinstructions {
white-space: nowrap; }
.coursebox {
padding: 0.5rem; }
display: flex;
flex-direction: column; }
.coursebox .info {
display: flex;
align-items: center; }
.coursebox > .info > .coursename a {
#frontpage-available-course-list,
#frontpage-course-list,
.course-search-result {
margin-top: 0.5rem; }
#frontpage-available-course-list .coursebox,
#frontpage-course-list .coursebox,
.course-search-result .coursebox {
padding: 0.5rem;
border: 1px solid #dee2e6;
margin-bottom: 0.5rem;
border-radius: 0.25rem; }
.subcategories .coursebox > .info > .coursename a,
#frontpage-category-names .coursebox > .info > .coursename a,
#frontpage-category-combo .coursebox > .info > .coursename a {
display: block;
background-image: url([[pix:moodle|i/course]]);
background-repeat: no-repeat;
padding-left: 21px;
background-position: left 0.2em; }
.coursebox > .info > .coursename,
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .customfields-container {
float: left;
clear: left; }
.coursebox .content .teachers,
.coursebox .content .courseimage,
.coursebox .content .coursefile,
.coursebox .content .customfields-container {
width: 40%; }
.coursebox > .info > h3.coursename {
margin: 5px; }
.coursebox > .info > .coursename {
font-size: 0.9375rem;
font-weight: normal;
margin: 5px;
padding: 0; }
@ -14212,29 +14215,9 @@ span.editinstructions {
padding: 0;
margin: 0; }
.coursebox .moreinfo,
.coursebox .enrolmenticons {
padding: 3px 0;
float: right; }
.coursebox .moreinfo img {
margin: 0 .2em; }
.coursebox .content {
clear: both; }
.coursebox .content .summary,
.coursebox .content .coursecat {
float: right;
width: 55%; }
.coursebox .content .coursecat {
text-align: right;
clear: right; }
.coursebox.remotecoursebox .remotecourseinfo {
float: left;
width: 40%; }
.coursebox .customfieldname,
.coursebox .customfieldseparator {
font-weight: 700; }
.coursebox .content .courseimage img {
max-width: 100px;
@ -14250,22 +14233,18 @@ span.editinstructions {
margin: 15px 5px 5px;
padding: 0; }
.coursebox.remotehost > .info > .categoryname a {
background-image: url([[pix:moodle|i/mnethost]]); }
.coursebox.collapsed {
margin-bottom: 0; }
.category-browse .coursebox .content .coursecat,
.category-browse .coursebox .content .summary,
.category-browse .coursebox .content .courseimage,
.category-browse .coursebox .content .coursefile,
.category-browse .coursebox .content .teachers,
.category-browse .coursebox.remotecoursebox .remotecourseinfo,
.category-browse .coursebox .content .customfields-container {
margin-top: 0; }
.coursebox.collapsed > .content {
display: none; }
.courses .coursebox.collapsed {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.courses .coursebox.even {
background-color: rgba(0, 0, 0, 0.03); }
.courses > .paging.paging-morelink {
text-align: center;
padding: 1rem; }
@ -14273,31 +14252,11 @@ span.editinstructions {
.course_category_tree .category .numberofcourse {
font-size: 0.8203125rem; }
.course_category_tree .controls {
visibility: hidden; }
.course_category_tree .controls div {
display: inline;
cursor: pointer; }
.jsenabled .course_category_tree .controls {
visibility: visible; }
.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 > .info > .categoryname {
background-image: url([[pix:moodle|t/collapsed_empty]]);
background-repeat: no-repeat;
padding: 2px 18px;
margin: 3px;
background-position: center left; }
margin: 5px;
font-size: 0.9375rem;
font-weight: normal;
padding: 2px 18px; }
/* rtl:raw:
.course_category_tree .category > .info > .categoryname {
@ -14306,7 +14265,8 @@ span.editinstructions {
*/
.course_category_tree .category.with_children > .info > .categoryname {
background-image: url([[pix:moodle|t/expanded]]);
cursor: pointer; }
background-repeat: no-repeat;
background-position: center left; }
.course_category_tree .category.with_children.collapsed > .info > .categoryname {
background-image: url([[pix:moodle|t/collapsed]]); }
@ -14319,20 +14279,10 @@ span.editinstructions {
.course_category_tree .category.collapsed > .content {
display: none; }
.course_category_tree .category > .info {
clear: both; }
.course_category_tree .category > .content {
padding-left: 16px; }
#page-course-index-category .generalbox.info {
margin-bottom: 15px;
border: 1px dotted #ddd;
border-radius: 4px;
padding: 5px; }
#page-course-index-category .categorypicker {
text-align: center;
margin: 10px 0 20px; }
/**