Skip to content

Commit

Permalink
Add site default and course 'sectiontitleingridbox' and 'sectionbadge…
Browse files Browse the repository at this point in the history
…ingridbox' settings, to show the section title and section badges inside the grid box respectively. Both 'Yes' by default.
  • Loading branch information
gjb2048 committed Oct 2, 2024
1 parent 070d6cf commit 8bf8169
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 7 deletions.
2 changes: 2 additions & 0 deletions Changes.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ Version 402.2.6 - In development
--------------------------------
1. Fix 'Orphaned sections problem when adding sections', a regression caused by
'Use section anchors in links when editing - pt 2' - #223.
2. Add site default and course 'sectiontitleingridbox' and 'sectionbadgeingridbox' settings, to show
the section title and section badges inside the grid box respectively. Both 'Yes' by default.

Version 402.2.5.5 - 28/09/2024
------------------------------
Expand Down
6 changes: 6 additions & 0 deletions classes/output/courseformat/content.php
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,12 @@ public function export_for_template(\renderer_base $output) {
// Image resize is crop.
$data->imageresizemethodcrop = ($coursesettings['imageresizemethod'] == 2);

// Section title in grid box.
$data->sectiontitleingridbox = ($coursesettings['sectiontitleingridbox'] == 2);

// Section badge in grid box.
$data->sectionbadgeingridbox = ($coursesettings['sectionbadgeingridbox'] == 2);

// Popup.
if (!$editing) {
$data->popup = false;
Expand Down
10 changes: 10 additions & 0 deletions lang/en/format_grid.php
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,16 @@
$string['defaultpopup'] = 'Use a popup';
$string['defaultpopup_desc'] = 'Display the section in a popup instead of navigating to a single section page.';

// Grid section title / badges.
$string['sectiontitleingridbox'] = 'Section title in grid box';
$string['sectiontitleingridbox_help'] = 'Show the section title in the grid box';
$string['defaultsectiontitleingridbox'] = 'Section title in grid box';
$string['defaultsectiontitleingridbox_desc'] = 'Show the section title in the grid box.';
$string['sectionbadgeingridbox'] = 'Section badge in grid box';
$string['sectionbadgeingridbox_help'] = 'Show the section badge in the grid box';
$string['defaultsectionbadgeingridbox'] = 'Section badge in grid box';
$string['defaultsectionbadgeingridbox_desc'] = 'Show the section badge in the grid box.';

// Completion.
$string['showcompletion'] = 'Show completion';
$string['showcompletion_help'] = 'Show the completion of the section on the grid';
Expand Down
40 changes: 40 additions & 0 deletions lib.php
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,14 @@ public function course_format_options($foreditform = false) {
'default' => 0,
'type' => PARAM_INT,
],
'sectiontitleingridbox' => [
'default' => 0,
'type' => PARAM_INT,
],
'sectionbadgeingridbox' => [
'default' => 0,
'type' => PARAM_INT,
],
'showcompletion' => [
'default' => 0,
'type' => PARAM_INT,
Expand Down Expand Up @@ -533,6 +541,38 @@ public function course_format_options($foreditform = false) {
'element_attributes' => [$imageresizemethodvalues],
];

$sectiontitleingridboxvalues = $this->generate_default_entry(
'sectiontitleingridbox',
0,
[
1 => new lang_string('no'),
2 => new lang_string('yes'),
],
);
$courseformatoptionsedit['sectiontitleingridbox'] = [
'label' => new lang_string('sectiontitleingridbox', 'format_grid'),
'help' => 'sectiontitleingridbox',
'help_component' => 'format_grid',
'element_type' => 'select',
'element_attributes' => [$sectiontitleingridboxvalues],
];

$sectionbadgeingridboxvalues = $this->generate_default_entry(
'sectionbadgeingridbox',
0,
[
1 => new lang_string('no'),
2 => new lang_string('yes'),
],
);
$courseformatoptionsedit['sectionbadgeingridbox'] = [
'label' => new lang_string('sectionbadgeingridbox', 'format_grid'),
'help' => 'sectionbadgeingridbox',
'help_component' => 'format_grid',
'element_type' => 'select',
'element_attributes' => [$sectionbadgeingridboxvalues],
];

$showcompletionvalues = $this->generate_default_entry(
'showcompletion',
0,
Expand Down
22 changes: 22 additions & 0 deletions settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,28 @@
$setting->set_updatedcallback('format_grid::update_displayed_images_callback');
$page->add($setting);

// Section title in grid box.
$name = 'format_grid/defaultsectiontitleingridbox';
$title = get_string('defaultsectiontitleingridbox', 'format_grid');
$description = get_string('defaultsectiontitleingridbox_desc', 'format_grid');
$default = 2;
$choices = [
1 => new lang_string('no'),
2 => new lang_string('yes'),
];
$page->add(new admin_setting_configselect($name, $title, $description, $default, $choices));

// Section badge in grid box.
$name = 'format_grid/defaultsectionbadgeingridbox';
$title = get_string('defaultsectionbadgeingridbox', 'format_grid');
$description = get_string('defaultsectionbadgeingridbox_desc', 'format_grid');
$default = 2;
$choices = [
1 => new lang_string('no'),
2 => new lang_string('yes'),
];
$page->add(new admin_setting_configselect($name, $title, $description, $default, $choices));

// Completion.
$name = 'format_grid/defaultshowcompletion';
$title = get_string('defaultshowcompletion', 'format_grid');
Expand Down
27 changes: 25 additions & 2 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,18 @@
width: 210px;
}

.format-grid .thegrid .grid-section.card {
border-width: 2px;
}

.format-grid .thegrid .grid-section.currentgridsection {
border: 2px solid var(--primary);
}

.format-grid .thegrid .grid-section-inner .card-body {
min-height: 0;
}

.format-grid .thegrid .grid-image-container {
height: 140px;
}
Expand All @@ -90,6 +98,21 @@
}
/*rtl:end:ignore*/

.format-grid .thegrid .grid-image .grid-badge-middle {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}

.format-grid .thegrid .grid-image .grid-badge-bottom {
bottom: 1.5rem;
left: 0;
position: absolute;
right: 0;
}

.format-grid .thegrid .grid-generatedimage {
background-size: contain;
height: 100%;
Expand Down Expand Up @@ -117,14 +140,14 @@
border-radius: 45px;
border-style: solid;
border-width: 3px;
bottom: 8%;
bottom: 1rem;
display: flex;
flex-direction: column;
height: 42px;
justify-content: center;
padding: 4px;
position: absolute;
right: 8%;
right: 0.5rem;
width: 42px;
}

Expand Down
30 changes: 25 additions & 5 deletions templates/grid.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
* sectionbreakheading - Section break heading.
* number - Section number.
* imageresizemethodcrop - Image resize method is crop.
* sectiontitleingridbox - Show the section title?
* sectionbadgeingridbox - Show the section bagde if any?
* iscurrent - Current section?
* sectionurl - Section URL.
* sectionname - Section name.
Expand Down Expand Up @@ -63,6 +65,8 @@
}
],
"imageresizemethodcrop": true,
"sectiontitleingridbox": true,
"sectionbadgeingridbox": true,
"showcompletion": true
}
}}
Expand All @@ -84,26 +88,42 @@
<div class="grid-modal grid-section-inner d-flex flex-column h-100" data-toggle="modal" data-target="#gridPopup" data-section="{{number}}" tabindex="0">
{{/popup}}
<div class="card-body p-0">
{{#sectiontitleingridbox}}
<div class="card-header h-100">
<h3 class="h4 text-truncate">{{{sectionname}}}</h3>
{{#hasbadge}}
{{#sectionbadgeingridbox}}{{#hasbadge}}
<div data-region="sectionbadges" class="sectionbadges d-flex">
{{$ core_courseformat/local/content/section/badges }}
{{> core_courseformat/local/content/section/badges }}
{{/ core_courseformat/local/content/section/badges }}
</div>
{{/hasbadge}}
{{/hasbadge}}{{/sectionbadgeingridbox}}
</div>
{{/sectiontitleingridbox}}
</div>
<div class="grid-image-container">
{{#imageuri}}
<div class="grid-image{{^imageresizemethodcrop}} grid-scaled{{/imageresizemethodcrop}} text-center">
<img{{#imageresizemethodcrop}} class="card-img-bottom" {{/imageresizemethodcrop}} src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
<img{{#imageresizemethodcrop}} class="card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}}"{{/imageresizemethodcrop}} src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
{{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
<div data-region="sectionbadges" class="sectionbadges d-flex {{^sectioncompletionmarkup}}justify-content-center align-items-center grid-badge-middle{{/sectioncompletionmarkup}}{{#sectioncompletionmarkup}}ml-2 align-items-end grid-badge-bottom{{/sectioncompletionmarkup}}">
{{$ core_courseformat/local/content/section/badges }}
{{> core_courseformat/local/content/section/badges }}
{{/ core_courseformat/local/content/section/badges }}
</div>
{{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
{{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
</div>
{{/imageuri}}
{{#generatedimageuri}}
<div class="grid-generatedimage card-img-bottom text-center" style="background-image: url('{{generatedimageuri}}');">
<div class="grid-generatedimage card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center" style="background-image: url('{{generatedimageuri}}');">
{{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
<div data-region="sectionbadges" class="sectionbadges d-flex justify-content-center align-items-center h-100">
{{$ core_courseformat/local/content/section/badges }}
{{> core_courseformat/local/content/section/badges }}
{{/ core_courseformat/local/content/section/badges }}
</div>
{{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
{{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
</div>
{{/generatedimageuri}}
Expand All @@ -112,7 +132,7 @@
<p><small>{{imageerror}}</small></p>
{{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
</div>
{{/imageerror}}
{{/imageerror}}
</div>
{{^popup}}
{{#notavailable}}</div>{{/notavailable}}
Expand Down

0 comments on commit 8bf8169

Please sign in to comment.