mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 00:46:50 +02:00
9698f2dcce
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.
57 lines
2 KiB
Text
57 lines
2 KiB
Text
{{!
|
|
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>
|