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

Bootstrap Card Deck affected by Boost CSS

    XMLWordPrintable

    Details

    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_35_STABLE
    • Fixed Branches:
      MOODLE_35_STABLE
    • Pull from Repository:
    • Pull 3.5 Branch:

      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. card-deck-original.png
          card-deck-original.png
          252 kB
        2. card-deck-with-boost.png
          card-deck-with-boost.png
          220 kB
        3. before_after.png
          before_after.png
          207 kB

          Activity

            People

            • Assignee:
              lucaboesch Luca Bösch
              Reporter:
              bawjaws David Scotson
              Peer reviewer:
              Damyon Wiese
              Integrator:
              Eloy Lafuente (stronk7)
              Tester:
              Eloy Lafuente (stronk7)
              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:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Fix Release Date:
                11/Mar/19