From f079f61d7ce0078ce6fbfec44aa51acbcb8534af Mon Sep 17 00:00:00 2001 From: Gareth Barnard <1058419+gjb2048@users.noreply.github.com> Date: Mon, 19 Aug 2024 18:18:45 +0100 Subject: [PATCH] Grid section title / badges - work in progress. --- classes/output/courseformat/content.php | 6 ++++ lang/en/format_grid.php | 10 +++++++ lib.php | 40 +++++++++++++++++++++++++ settings.php | 22 ++++++++++++++ styles.css | 28 +++++++++++++++-- templates/coursestyles.mustache | 1 + templates/grid.mustache | 30 +++++++++++++++---- 7 files changed, 130 insertions(+), 7 deletions(-) diff --git a/classes/output/courseformat/content.php b/classes/output/courseformat/content.php index 3f928905..ba8c6f66 100644 --- a/classes/output/courseformat/content.php +++ b/classes/output/courseformat/content.php @@ -157,6 +157,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; diff --git a/lang/en/format_grid.php b/lang/en/format_grid.php index a5026cbd..dc0a4c26 100644 --- a/lang/en/format_grid.php +++ b/lang/en/format_grid.php @@ -134,6 +134,16 @@ $string['defaultsectionzeroingrid'] = 'Section zero in grid'; $string['defaultsectionzeroingrid_desc'] = 'Place section zero in the grid.'; +// 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'; diff --git a/lib.php b/lib.php index 56f267fb..1d0646cc 100755 --- a/lib.php +++ b/lib.php @@ -424,6 +424,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, @@ -554,6 +562,38 @@ public function course_format_options($foreditform = false) { 'element_attributes' => [$sectionzeroingridvalues], ]; + $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, diff --git a/settings.php b/settings.php index 65606c6d..2d308e5e 100644 --- a/settings.php +++ b/settings.php @@ -158,6 +158,28 @@ ]; $page->add(new admin_setting_configselect($name, $title, $description, $default, $choices)); + // 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'); diff --git a/styles.css b/styles.css index 52dac12a..de78f11d 100644 --- a/styles.css +++ b/styles.css @@ -65,12 +65,21 @@ 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; + min-height: 140px; } .format-grid .thegrid .grid-image { @@ -90,6 +99,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%; @@ -117,14 +141,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; } diff --git a/templates/coursestyles.mustache b/templates/coursestyles.mustache index f86ca0b1..bdc496da 100644 --- a/templates/coursestyles.mustache +++ b/templates/coursestyles.mustache @@ -36,6 +36,7 @@ /* -- Grid -- */ .format-grid .thegrid .grid-image-container { height: {{height}}px; + min-height: {{height}}px; } .format-grid .thegrid .grid-section { diff --git a/templates/grid.mustache b/templates/grid.mustache index f7986552..e7313b52 100644 --- a/templates/grid.mustache +++ b/templates/grid.mustache @@ -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. @@ -63,6 +65,8 @@ } ], "imageresizemethodcrop": true, + "sectiontitleingridbox": true, + "sectionbadgeingridbox": true, "showcompletion": true } }} @@ -84,26 +88,42 @@
{{/popup}}
+ {{#sectiontitleingridbox}}

{{{sectionname}}}

- {{#hasbadge}} + {{#sectionbadgeingridbox}}{{#hasbadge}}
{{$ core_courseformat/local/content/section/badges }} {{> core_courseformat/local/content/section/badges }} {{/ core_courseformat/local/content/section/badges }}
- {{/hasbadge}} + {{/hasbadge}}{{/sectionbadgeingridbox}}
+ {{/sectiontitleingridbox}}
{{#imageuri}}
- + + {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}} +
+ {{$ core_courseformat/local/content/section/badges }} + {{> core_courseformat/local/content/section/badges }} + {{/ core_courseformat/local/content/section/badges }} +
+ {{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}} {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
{{/imageuri}} {{#generatedimageuri}} -
+
+ {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}} +
+ {{$ core_courseformat/local/content/section/badges }} + {{> core_courseformat/local/content/section/badges }} + {{/ core_courseformat/local/content/section/badges }} +
+ {{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}} {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
{{/generatedimageuri}} @@ -112,7 +132,7 @@

{{imageerror}}

{{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
- {{/imageerror}} + {{/imageerror}}
{{^popup}} {{#notavailable}}
{{/notavailable}}