Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-44486

progress bar is ugly and hard to style

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Place the attached test.php into your dirroot
      2. Visit the page
        • Confirm that the bar looks like a progress bar and moves (it's now using bootstrapbase styling)
        • Confirm that it works
        • Confirm absence of JS errors
      3. Go to language setting and language customisation
      4. Open a language for editing - you'll get a progress bar
        • Confirm that it works
        • Confirm absence of JS errors
      5. Create a course backup
        • At the final stage you'll get a progress bar at the end, this time with a "wibbler" below it.
        • Confirm that it works
        • Confirm absence of JS errors
      6. Try with any other progress bars that you're aware of
      Show
      Place the attached test.php into your dirroot Visit the page Confirm that the bar looks like a progress bar and moves (it's now using bootstrapbase styling) Confirm that it works Confirm absence of JS errors Go to language setting and language customisation Open a language for editing - you'll get a progress bar Confirm that it works Confirm absence of JS errors Create a course backup At the final stage you'll get a progress bar at the end, this time with a "wibbler" below it. Confirm that it works Confirm absence of JS errors Try with any other progress bars that you're aware of
    • Affected Branches:
      MOODLE_26_STABLE, MOODLE_27_STABLE
    • Fixed Branches:
      MOODLE_28_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-44486-master
    • Pull Master Diff URL:

      Description

      The progress bar (or at least the one at the following location, there seems to be several in Moodle, including some that show progress but aren't actually bars as such) is ugly and it's hard to fix this in a theme because the style is applied via a style tag in the HTML.

      https://github.com/moodle/moodle/blob/master/lib/weblib.php#L3001-L3012

      To overcome those styles you'd need to add !important to your CSS which is generally a sign you're doing something wrong.

      The fix is to remove all the unnecessary styles, and add a couple of class names so that styles can be attached via CSS.

      There's also a "wibbler", I'm not really sure what this, but it's also quite ugly and sometimes attached to the bottom of the progress bar so it might be able to be fixed at the same time.

      The easiest way to see a progress bar is to edit the language pack, but they pop up in other areas too like backup.

      There's also a few styles hard-coded into the javascript that animates the progress bar as well. They could probably just be deleted. They seem intended to change the color of the progress bar in order to show progress, but that's already well covered by the progress bar itself, and the textual display of the percentage progress. And since that javascript is loaded and processed by every page, it's probably best if it stuck to the basics.

        Attachments

          Activity

            People

            Assignee:
            dobedobedoh Andrew Nicols
            Reporter:
            bawjaws David Scotson
            Peer reviewer:
            Jetha Chan
            Integrator:
            Sam Hemelryk
            Tester:
            Michael de Raadt
            Participants:
            Component watchers:
            Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona), Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
            Votes:
            1 Vote for this issue
            Watchers:
            6 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Fix Release Date:
              10/Nov/14