L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-54119 tool_lp: Modifications for progress bars

Browse Source 
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.
This commit is contained in:
Jun Pataleta
2016-05-17 16:01:30 +08:00
parent 65cbefc403
commit 9698f2dcce
5 changed files with 92 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/tool/lp/styles.css
+3 -2
View File
@@ -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;
admin/tool/lp/templates/course_competency_statistics.mustache
+6 -12
View File
@@ -45,19 +45,13 @@
{{#competencycount}}
<div data-region="coursecompetencystatistics" class="well">
{{#canbegradedincourse}}
<div class="clearfix">
<div class="span6">
<div class="progresstext">
{{< tool_lp/progress_bar}}
{{$progresstext}}
{{#str}}xcompetenciesproficientoutofyincourse, tool_lp, { "x": "{{proficientcompetencycount}}", "y": "{{competencycount}}" } {{/str}}
</div>
</div>
<div class="span6">
<span class="pull-right label label-info">{{proficientcompetencypercentageformatted}} %</span>
<div class="progress">
<div class="bar" style="width: {{proficientcompetencypercentage}}%;"></div>
</div>
</div>
</div>
{{/progresstext}}
{{$percentage}}{{proficientcompetencypercentage}}{{/percentage}}
{{$percentlabel}}{{proficientcompetencypercentageformatted}}&nbsp;%{{/percentlabel}}
{{/tool_lp/progress_bar}}
{{/canbegradedincourse}}
{{#canmanagecoursecompetencies}}
{{#leastproficientcount}}
admin/tool/lp/templates/plan_page.mustache
+7 -11
View File
@@ -91,17 +91,13 @@
{{/description}}
<dt>{{#str}}progress, tool_lp{{/str}}</dt>
<dd>
<div class="span4">
<div class="progresstext">
{{#str}}xcompetenciesproficientoutofy, tool_lp, { "x": "{{proficientcompetencycount}}", "y": "{{competencycount}}" }{{/str}}
</div>
</div>
<div class="span4">
<span class="pull-right label label-info">{{proficientcompetencypercentageformatted}} %</span>
<div class="progress">
<div class="bar" style="width: {{proficientcompetencypercentage}}%;"></div>
</div>
</div>
{{< tool_lp/progress_bar}}
{{$progresstext}}
{{#str}}xcompetenciesproficientoutofy, tool_lp, { "x": "{{proficientcompetencycount}}", "y": "{{competencycount}}" }{{/str}}
{{/progresstext}}
{{$percentage}}{{proficientcompetencypercentage}}{{/percentage}}
{{$percentlabel}}{{proficientcompetencypercentageformatted}}&nbsp;%{{/percentlabel}}
{{/tool_lp/progress_bar}}
</dd>
</dl>
</div>
admin/tool/lp/templates/progress_bar.mustache
+57
View File
@@ -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 <http://www.gnu.org/licenses/>.
}}
{{!
@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 %"
}
}}
<div class="row-fluid rtl-compatible">
<div class="span4">
<div class="progresstext">
{{$progresstext}}{{progresstextvalue}}{{/progresstext}}
</div>
</div>
<div class="span8">
<div class="progress">
<div class="bar" style="width: {{$percentage}}{{percentagevalue}}{{/percentage}}%;" role="progressbar" aria-valuenow="{{$percentage}}{{percentagevalue}}{{/percentage}}" aria-valuemin="0" aria-valuemax="100">
{{$percentlabel}}{{percentlabelvalue}}{{/percentlabel}}
</div>
</div>
</div>
</div>
admin/tool/lp/templates/template_statistics.mustache
+19 -39
View File
@@ -46,50 +46,30 @@
}}
{{#competencycount}}
<div data-region="templatestatistics" class="well">
<div class="clearfix">
<div class="span4">
<div class="progresstext">
{{#str}}xcompetencieslinkedoutofy, tool_lp, { "x": "{{linkedcompetencycount}}", "y": "{{competencycount}}" } {{/str}}
</div>
</div>
<div class="span6">
<span class="pull-right label label-info">{{linkedcompetencypercentageformatted}} %</span>
<div class="progress">
<div class="bar" style="width: {{linkedcompetencypercentage}}%;"></div>
</div>
</div>
</div>
{{< tool_lp/progress_bar}}
{{$progresstext}}
{{#str}}xcompetencieslinkedoutofy, tool_lp, { "x": "{{linkedcompetencycount}}", "y": "{{competencycount}}" } {{/str}}
{{/progresstext}}
{{$percentage}}{{linkedcompetencypercentage}}{{/percentage}}
{{$percentlabel}}{{linkedcompetencypercentageformatted}}&nbsp;%{{/percentlabel}}
{{/tool_lp/progress_bar}}
{{#plancount}}
<div class="clearfix">
<div class="span4">
<div class="progresstext">
{{< tool_lp/progress_bar}}
{{$progresstext}}
{{#str}}xplanscompletedoutofy, tool_lp, { "x": "{{completedplancount}}", "y": "{{plancount}}" } {{/str}}
</div>
</div>
<div class="span6">
<span class="pull-right label label-info">{{completedplanpercentageformatted}} %</span>
<div class="progress">
<div class="bar" style="width: {{completedplanpercentage}}%;">
</div>
</div>
</div>
</div>
{{/progresstext}}
{{$percentage}}{{completedplanpercentage}}{{/percentage}}
{{$percentlabel}}{{completedplanpercentageformatted}}&nbsp;%{{/percentlabel}}
{{/tool_lp/progress_bar}}
{{/plancount}}
{{#usercompetencyplancount}}
<div class="clearfix">
<div class="span4">
<div class="progresstext">
{{< tool_lp/progress_bar}}
{{$progresstext}}
{{#str}}averageproficiencyrate, tool_lp, {{proficientusercompetencyplanpercentageformatted}} {{/str}}
</div>
</div>
<div class="span6">
<span class="pull-right label label-info">{{proficientusercompetencyplanpercentageformatted}} %</span>
<div class="progress">
<div class="bar" style="width: {{proficientusercompetencyplanpercentage}}%;"></div>
</div>
</div>
</div>
{{/progresstext}}
{{$percentage}}{{proficientusercompetencyplanpercentage}}{{/percentage}}
{{$percentlabel}}{{proficientusercompetencyplanpercentageformatted}}&nbsp;%{{/percentlabel}}
{{/tool_lp/progress_bar}}
{{/usercompetencyplancount}}
{{#leastproficientcount}}
<div>