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

Boost: Linking directly to a block instance looks weird

    XMLWordPrintable

Details

    • Bug
    • Status: Closed
    • Minor
    • Resolution: Cannot Reproduce
    • 3.4
    • None
    • Themes
    • None
    • MOODLE_34_STABLE

    Description

      In MDL-58957 we are trying to implement block searching. In the Boost theme, linking to blocks looks weird. For example:

      1. Create a new course with default settings.
      2. Add a block, such as the Calendar block.
      3. Using browser developer tools or another method, determine the instance id of the block, for example inst52.
      4. Type #inst52 at the end of the URL

      See the two screenshots attached - one is 'normal' view, second is 'link to calendar' with #inst52. The Calendar block has a nice grey bar above it in the normal view, but appears to run directly into the content above when you apply #inst52 (there is still a faint 1 pixel line which is the block border but that's all).

      This is caused by these rules:

      :target {
          padding-top: 80px !important;
          margin-top: -50px !important;
      }

      These are designed to make the target appear just below the fixed header, rather than directly at the top of the page underneath the header.

      With blocks they make it look a bit odd - the block is white with a grey background between blocks. The 80px added padding is white, and the 50px negative margin removes the grey space between blocks (replaced by the last 30px of the padding). So the result is a block with more white space above it (intended although still weird) but also no grey border separating it from the previous block.

      I investigated some block-specific styling; this might be an option in the sense of making it look a bit better, but I had some trouble with borders, and I was concerned that the changes I would have to make to get it to look nice might well not work well on modified children of Boost theme, thus causing problems for themers.

      I think the best solution for this might be to have the Boost theme remove this CSS rule and instead use JavaScript to update the scroll position (for all cases not just blocks as it surely can make things look weird on other items too) - however this could have negative consequences such as making the page jump around on load, so it may not be simple to implement...

      Attachments

        1. link_to_calendar.png
          link_to_calendar.png
          85 kB
        2. MDL-59375.png
          MDL-59375.png
          89 kB
        3. normal.png
          normal.png
          85 kB

        Issue Links

          Activity

            People

              Unassigned Unassigned
              quen Sam Marshall
              Huong Nguyen, Bas Brands, Mathew May
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: