fix: exclude style example blocks from banner styles #1103
Conversation
If the Vue School banner is open, the style example blocks on the Style Guide will have too much top margin and padding. Detail blocks directly above a style example block will also be unexpandable. This is because the styles in BannerTop.vue mistakenly apply top margin and padding to the header in style example blocks. This causes the blocks to be too tall, as well as oveflow their container, overlaying the detail block above and blocking clicks to the <detail> element. Let's fix the styles for headers in BannerTop.vue to exclude those in style example blocks.
There was a problem hiding this comment.
Thanks for the PR!
There's definitely a problem here. In addition to the Style Guide headings, the main heading on most pages is too close to the navbar.
@nicodevs Do you know what these styles are supposed to do? As far as I can tell everything looks better if these heading adjustments are just removed.
| h1, h2, h3, h4, h5, h6 | ||
| margin-top (0.5rem - $topBannerHeight - $navbarHeight) | ||
| padding-top ($navbarHeight + $topBannerHeight + 1rem) | ||
| :not(.style-example) |
There was a problem hiding this comment.
I'm not sure this fix is quite correct. This change will also impact other headings because the h1, etc. are usually direct children of the .theme-default-content, so there's no element for the :not(.style-example) to match.
There was a problem hiding this comment.
Hi @skirtles-code, thanks for the description, I can confirm the issue. There's an upcoming banner copy update, so a new PR will be submitted today. I will address this issue there.
There was a problem hiding this comment.
@skirtles-code here's the PR that updates the copy and solves this issue: #1108
|
The headings in the Style Guide should be fixed now: #1108. |
Description of Problem
If the Vue School banner is open, the style example blocks on the Style Guide will have too much top margin and padding. Detail blocks directly above a style example block will also be unexpandable.
This is because the styles in BannerTop.vue mistakenly apply top margin and padding to the header in style example blocks. This causes the blocks to be too tall, as well as oveflow their container, overlaying the detail block above and blocking clicks to the element.
Proposed Solution
Let's fix the styles for headers in BannerTop.vue to exclude those in style example blocks.