Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR (if not technically, then spiritually) follows up #348 to try some smarter, subtle ways at keeping responsiveness good across screen dimensions and particularly long content.
Changes to the nav bar:
metatag('blockwrap')
use which turned out not to be useful. It's left since it simplifies a bit of the CSS, though it's debatable if the JS should be responsible for adding that.has-divider
class or not...)display: 'inline-block'
, ensuring words always remain together. This is not the same as using a blockwrap, because later nav-links are sibling inline-blocks (not descending ones). This basically means that if a nav link, on its own, takes up two lines then it occupies the entirety of those two lines, kicking the next link or content below. This doesn't often have an effect, but can make the nav layout feel more stable.accent
, and track nav links (previous/next/random) asnavBottomRowContent
, is unchanged. This is taken as a deliberate decision of the past which we try to uphold — allowing single-line navigation when an album name is sufficiently short or there aren't many "extra" links (gallery/commentary), but always placing track nav on its own row, to improve stability between track pages.display: inline-block
on sibling nav links means the accent of a nav link is now kicked down a row, if its main content (i.e. the link itself) is split across multiple lines. This is a notable improvement in stability for album pages, because previously the accent would just come after the last wrapped word; because the position of the split depends on the width of the screen, so too would the position of the accent. This meant nav links were arbitrarily horizontally shifting based on screen dimensions, which was a serious instance of resizing instability. Now the accent is always either aligned at the end of the full link, such that both the entire accent and the entire link are visible on one line; or beneath the nav link, aligned left with the start of the nav bar.display: block
, ensuring it's alone on its own line.html.isBlank()
works, essentially redefining the function to be more in line with its actual usage — checking if the content in question would be displayed as nothing on the page. Since rendering as an actualtoString()
is expensive (and that's how[html.onlyIfChildren]
worked), this now performs a relatively lazy search for non-empty string (or non-string primitive) content. The algorithm tries to avoid entering templates, since those involve computing agenerate()
function non-statically, but will do so if it can't find any other non-blank content (elsewhere in the immediately available tree).Changes to other content:
padding-right: 20px
in non-thin layout, keeping it from being literally overshadowed by the floating cover art; in thin layout it's still 10px, sufficient to separate from the small sticky cover art.