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

Boost: Linking directly to a block instance looks weird

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.4
    • Fix Version/s: None
    • Component/s: Themes
    • Labels:
      None
    • Affected Branches:
      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

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                quen Sam Marshall
                Participants:
                Component watchers:
                Bas Brands, Amaia Anabitarte, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón
              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated: