From 9698f2dcce4dff4c54d32d3d5a6af6ea90f21bdc Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Mon, 16 May 2016 13:54:07 +0800 Subject: [PATCH] MDL-54119 tool_lp: Modifications for progress bars Changes made in this patch include: * Reverting to the original look of having the percentage label of the progress bar inside it. * Setting a minimum width for the progress bar so the percentage label will still be visible even at 0%. * Replaced the blank space between the percent text and the percent sign with a non-breaking space. * Added relevant aria attributes for the progress bars. * I think that this is a good opportunity to use a single template for the progress bars so I created one that is basically based from the core template columns-1to2. Column 1 contains the progress text, while column2 contains the progress bar itself. --- admin/tool/lp/styles.css | 5 +- .../course_competency_statistics.mustache | 18 ++---- admin/tool/lp/templates/plan_page.mustache | 18 +++--- admin/tool/lp/templates/progress_bar.mustache | 57 ++++++++++++++++++ .../lp/templates/template_statistics.mustache | 58 ++++++------------- 5 files changed, 92 insertions(+), 64 deletions(-) create mode 100644 admin/tool/lp/templates/progress_bar.mustache diff --git a/admin/tool/lp/styles.css b/admin/tool/lp/styles.css index fab384d6daa..3faa631fdbd 100644 --- a/admin/tool/lp/styles.css +++ b/admin/tool/lp/styles.css @@ -6,13 +6,14 @@ } .path-admin-tool-lp .progresstext { display: inline-block; - height: 40px; vertical-align: top; } .path-admin-tool-lp .progress { width: 100%; display: inline-block; - margin-right: 2em; +} +.path-admin-tool-lp .progress .bar { + min-width: 3em; } .dir-rtl.path-admin-tool-lp .progress .bar { float: right; diff --git a/admin/tool/lp/templates/course_competency_statistics.mustache b/admin/tool/lp/templates/course_competency_statistics.mustache index e57159b656d..437bd53e9c1 100644 --- a/admin/tool/lp/templates/course_competency_statistics.mustache +++ b/admin/tool/lp/templates/course_competency_statistics.mustache @@ -45,19 +45,13 @@ {{#competencycount}}
{{#canbegradedincourse}} -
-
-
+ {{< tool_lp/progress_bar}} + {{$progresstext}} {{#str}}xcompetenciesproficientoutofyincourse, tool_lp, { "x": "{{proficientcompetencycount}}", "y": "{{competencycount}}" } {{/str}} -
-
-
- {{proficientcompetencypercentageformatted}} % -
-
-
-
-
+ {{/progresstext}} + {{$percentage}}{{proficientcompetencypercentage}}{{/percentage}} + {{$percentlabel}}{{proficientcompetencypercentageformatted}} %{{/percentlabel}} + {{/tool_lp/progress_bar}} {{/canbegradedincourse}} {{#canmanagecoursecompetencies}} {{#leastproficientcount}} diff --git a/admin/tool/lp/templates/plan_page.mustache b/admin/tool/lp/templates/plan_page.mustache index ee25b5cf6d7..6cd51cd147e 100644 --- a/admin/tool/lp/templates/plan_page.mustache +++ b/admin/tool/lp/templates/plan_page.mustache @@ -91,17 +91,13 @@ {{/description}}
{{#str}}progress, tool_lp{{/str}}
-
-
- {{#str}}xcompetenciesproficientoutofy, tool_lp, { "x": "{{proficientcompetencycount}}", "y": "{{competencycount}}" }{{/str}} -
-
-
- {{proficientcompetencypercentageformatted}} % -
-
-
-
+ {{< tool_lp/progress_bar}} + {{$progresstext}} + {{#str}}xcompetenciesproficientoutofy, tool_lp, { "x": "{{proficientcompetencycount}}", "y": "{{competencycount}}" }{{/str}} + {{/progresstext}} + {{$percentage}}{{proficientcompetencypercentage}}{{/percentage}} + {{$percentlabel}}{{proficientcompetencypercentageformatted}} %{{/percentlabel}} + {{/tool_lp/progress_bar}}
diff --git a/admin/tool/lp/templates/progress_bar.mustache b/admin/tool/lp/templates/progress_bar.mustache new file mode 100644 index 00000000000..118f76188e5 --- /dev/null +++ b/admin/tool/lp/templates/progress_bar.mustache @@ -0,0 +1,57 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template tool_lp/progress_bar + + Moodle progress bar template for tool_lp. + + The purpose of this template is to render a progress bar with a brief description. + Inherits core/columns-1to2. + + Classes required for JS: + * none + + Data attributes required for JS: + * none + + Context variables required for this template: + * progresstextvalue A brief text that describes the progress bar. + * percentagevalue The numeric value for the progress bar's percentage. + * percentlabelvalue The progress bar's label that shows the percentage value. + + Example context (json): + { + "progresstextvalue": "Progress:", + "percentagevalue": "50", + "percentlabelvalue": "50.00 %" + } + +}} +
+
+
+ {{$progresstext}}{{progresstextvalue}}{{/progresstext}} +
+
+
+
+
+ {{$percentlabel}}{{percentlabelvalue}}{{/percentlabel}} +
+
+
+
diff --git a/admin/tool/lp/templates/template_statistics.mustache b/admin/tool/lp/templates/template_statistics.mustache index 0a8bdae6ed1..91b45127d45 100644 --- a/admin/tool/lp/templates/template_statistics.mustache +++ b/admin/tool/lp/templates/template_statistics.mustache @@ -46,50 +46,30 @@ }} {{#competencycount}}
-
-
-
- {{#str}}xcompetencieslinkedoutofy, tool_lp, { "x": "{{linkedcompetencycount}}", "y": "{{competencycount}}" } {{/str}} -
-
-
- {{linkedcompetencypercentageformatted}} % -
-
-
-
-
+ {{< tool_lp/progress_bar}} + {{$progresstext}} + {{#str}}xcompetencieslinkedoutofy, tool_lp, { "x": "{{linkedcompetencycount}}", "y": "{{competencycount}}" } {{/str}} + {{/progresstext}} + {{$percentage}}{{linkedcompetencypercentage}}{{/percentage}} + {{$percentlabel}}{{linkedcompetencypercentageformatted}} %{{/percentlabel}} + {{/tool_lp/progress_bar}} {{#plancount}} -
-
-
+ {{< tool_lp/progress_bar}} + {{$progresstext}} {{#str}}xplanscompletedoutofy, tool_lp, { "x": "{{completedplancount}}", "y": "{{plancount}}" } {{/str}} -
-
-
- {{completedplanpercentageformatted}} % -
-
- -
-
-
-
+ {{/progresstext}} + {{$percentage}}{{completedplanpercentage}}{{/percentage}} + {{$percentlabel}}{{completedplanpercentageformatted}} %{{/percentlabel}} + {{/tool_lp/progress_bar}} {{/plancount}} {{#usercompetencyplancount}} -
-
-
+ {{< tool_lp/progress_bar}} + {{$progresstext}} {{#str}}averageproficiencyrate, tool_lp, {{proficientusercompetencyplanpercentageformatted}} {{/str}} -
-
-
- {{proficientusercompetencyplanpercentageformatted}} % -
-
-
-
-
+ {{/progresstext}} + {{$percentage}}{{proficientusercompetencyplanpercentage}}{{/percentage}} + {{$percentlabel}}{{proficientusercompetencyplanpercentageformatted}} %{{/percentlabel}} + {{/tool_lp/progress_bar}} {{/usercompetencyplancount}} {{#leastproficientcount}}