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

Bootstrap Card Deck affected by Boost CSS

    XMLWordPrintable

Details

    • MOODLE_35_STABLE
    • MOODLE_35_STABLE
    • Hide

      To be tested in MOODLE_35_STABLE only

      1. Already verified, .block_myoverview .card-dec .card selector is the applied now (versus .card-dec .card before the patch): Cross check that in the stylesheet .card-desk is preceeded by .block_myoverview.
      2. Login as a user enrolled in several courses.
      3. Verify on the dashboard, the list of courses in the myoverview block looks the same with and without the patch applied.
      Show
      To be tested in MOODLE_35_STABLE only Already verified, .block_myoverview .card-dec .card selector is the applied now (versus .card-dec .card before the patch): Cross check that in the stylesheet .card-desk is preceeded by .block_myoverview. Login as a user enrolled in several courses. Verify on the dashboard, the list of courses in the myoverview block looks the same with and without the patch applied.

    Description

      Some CSS in Boost interferes with the standard Bootstrap Card Deck layout.

      in theme/boost/scss/moodl/blocks.scss the following code overwrites all uses of card-deck

      .card-deck {
          .card {
              $card-gutter : $card-deck-margin * 2;
              flex-grow: 0;
              flex-shrink: 0;
              flex-basis: calc(50% - #{$card-gutter});
          }
          .myoverviewimg {
              height: 150px;
              &.courseimage {
                  background-position: center;
                  background-size: cover;
              }
          }
      }
      

      This changes it from something that can display 2/3/4 equal sized items in a row to something that displays multiple rows of items, with 2 per row. I'm guessing this was done for the block_myoverview widget on the dashboard, but could probably have been done with a row of col-lg-6 or similar instead or by targetting card-decks only with an extra class to specify that something different is wanted.

      Card Decks are a little bit weird, but it's a good policy to not change core Bootstrap items so that people who are familiar with Bootstrap can make the most of their existing knowledge.

      Attachments

        1. before_after.png
          before_after.png
          207 kB
        2. card-deck-original.png
          card-deck-original.png
          252 kB
        3. card-deck-with-boost.png
          card-deck-with-boost.png
          220 kB

        Activity

          People

            lucaboesch Luca Bösch
            bawjaws David Scotson
            Damyon Wiese Damyon Wiese
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:
              11/Mar/19