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

badge, tag, label CSS mixed up in Boost

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.5
    • Fix Version/s: None
    • Component/s: HTML and CSS, Themes
    • Labels:
    • Difficulty:
      Moderate
    • Affected Branches:
      MOODLE_35_STABLE

      Description

      The items known as badge/tag/label have changed names a few times over Bootstrap versions, so they show up in the comaptability files

      theme/boost/moodle/bs2-compat.scss
      theme/boost/moodle/bs4alphacompat.scss

      Some of this compatability CSS comes after the main Bootstrap CSS and stops the badges looking as they should:

      Here's some links to the original docs as it is a bit confusing the way they've changed over the versions:

      http://getbootstrap.com/2.3.2/components.html#labels-badges
      https://getbootstrap.com/docs/3.3/components/#labels
      https://v4-alpha.getbootstrap.com/components/badge/
      https://getbootstrap.com/docs/4.1/components/badge/

      So in v2 and 3 .badge meant the more rounded version, and .label was the squarer one.
      In the v4 alpha and v4 .badge-pill was used for rounded ones, and .badge was what was previously called .label

      v4 has some extra color-variations, v2 let you use just .badge or .label on it's own to get the default and the red one changed from .badge-error to .badge-danger in version 3 too.

      I think there's too much overlap to get perfect compatability, but I think just using the latest badge code for everything that was previously .label or .badge makes sense.

      .label has issues as it is used elsewhere in Moodle code, so if that could be avoided having styles on it directly that would be good.

      Finally, it would be good to wrap these compatability layers in variables so that people can opt-in or out of them e.g. @if $enabled-bs2-compat { (on the assumption that core code will phase this stuff out, a task that having a simple switch helps the testing of, but that then later some sites may want to continue with the backwards compatability for their content)

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              bawjaws David Scotson
              Participants:
              Component watchers:
              Amy Groshek, David Scotson, Amaia Anabitarte, Bas Brands, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón, Amaia Anabitarte, Bas Brands, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated: