Details
-
Type:
Bug
-
Status: Closed
-
Priority:
Minor
-
Resolution: Fixed
-
Affects Version/s: 3.3.1
-
Fix Version/s: 3.3.2
-
Component/s: Courses
-
Labels:
-
Testing Instructions:
- Test this with an old device with Android 4.3, and a new device.
- On Prototype 3.2 or 3.3.
- Go to the new dashboard and change to the list style.
- Check courses show the horizontal progress bar correctly.
-
Affected Branches:MOODLE_33_STABLE
-
Fixed Branches:MOODLE_33_STABLE
-
Pull from Repository:git@github.com:crazyserver/moodlemobile2.git
-
Pull Master Branch:
-
Sprint:Moodle Mobile 3.3.2
Description
I ran the app on Android 4.3 and the progressbar HTML element does not display.
Here is a solution based on https://css-tricks.com/html5-progress-element/.
<progress min="0" max="100" value="{{ percentage }}" class="mma-xp-progress-bar">
|
<div class="progress-bar-fallback" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ percentage }}">
|
<span style="width: {{ percentage }}%;"></span>
|
</div>
|
</progress>
|
// Progress-bar.
|
.mma-xp-progress-bar {
|
height: $mma-xp-progress-bar-height;
|
|
|
.progress-bar-fallback {
|
background-color: whiteSmoke;
|
border-radius: 2px;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
|
width: 100%;
|
height: $mma-xp-progress-bar-height;
|
display: block;
|
position: relative;
|
|
|
span {
|
background-color: $mma-xp-energized;
|
height: $mma-xp-progress-bar-height;
|
display: block;
|
border-radius: 2px;
|
}
|
}
|
}
|
