thoughtbot / carnival

An unobtrusive, developer-friendly way to add comments
MIT License
499 stars 30 forks source link

Comments misaligned depending on title-length #201

Closed pbrisbin closed 9 years ago

pbrisbin commented 9 years ago

Seems the absolute-top was decided using a two-line title:

https://robots.thoughtbot.com/blog-in-markdown-deploy-with-webhooks

If the title is not two lines (more or less), the comments become mis-aligned:

https://robots.thoughtbot.com/announcing-pick

pbrisbin commented 9 years ago

So the issue is elements between the article and the p:

<article>
  <h1>
  <div>
  <div>
    <p>

When applying the indicator's offsetTop as the top for the comments (which are direct children of <article>), it's off by the distance between <article> and the <p>'s direct parent. The robot blog hard-codes a 225px adjustment, but that value is what's assuming a two-line title.

pbrisbin commented 9 years ago

Ultimately, we should make Carnival smart enough to handle this scenario. But I think one near-term solution may be to customize not the block_selector, but the article_selector on the robots blog. By treating the direct parent as the article (rather than looking for non-direct child blocks), the alignment should work without the hard-coded 225px padding or its title-length-based issues.

pbrisbin commented 9 years ago

Going to close this issue as it's robots-blog specific and will be fixed there. Will add a new one for generic "multiple levels of nesting between article and block" problems.