Alternative paragraph spacing rule (modalEmailCollection spacing is incorrect) #2202

New issue

Closed

opened 2019-01-16 22:41:52 +01:00 by kauffj · 4 comments

kauffj commented

2019-01-16 22:41:52 +01:00

(Migrated from github.com)

modalEmailCollection has is missing spacing below the last paragraph due to this rule:

lbryio/lbry-desktop@bed9b1f95f/src/renderer/scss/component/_card.scss (L86)

I understand the utility of a p:not(:last-child) rule but IMO p:not(:last-of-type) makes this spacing tough to fix.

With :not(:last-child), I can eliminate spacing on a <p> element by wrapping it and any relevant ancestors in <div>. With :not(:last-of-type), I'm not sure what change you could even make to this markup to get the paragraph to have spacing.

`modalEmailCollection` has is missing spacing below the last paragraph due to this rule: https://github.com/lbryio/lbry-desktop/blob/bed9b1f95f6af3beb3df01db57e5dea44be773ae/src/renderer/scss/component/_card.scss#L86 I understand the utility of a `p:not(:last-child)` rule but IMO `p:not(:last-of-type)` makes this spacing tough to fix. With `:not(:last-child)`, I can eliminate spacing on a `<p>` element by wrapping it and any relevant ancestors in `<div>`. With `:not(:last-of-type)`, I'm not sure what change you could even make to this markup to get the paragraph to have spacing.

neb-b commented

2019-01-16 23:55:42 +01:00

(Migrated from github.com)

Hm. Yeah this is one of the tricky things with using margin-bottom. Wrapping each group in a .card__content should fix it, and wouldn't be that crazy since they are separate element groups. But I'm not a super big fan of that.

Hm. Yeah this is one of the tricky things with using `margin-bottom`. Wrapping each group in a `.card__content` should fix it, and wouldn't be _that_ crazy since they are separate element groups. But I'm not a super big fan of that.

kauffj commented

2019-01-17 00:05:13 +01:00

(Migrated from github.com)

I think this is why :not(:last-child) instead of :not(:last-of-type) ends up being better.

When you have a <p> that is a last-child and you still want spacing below it, it can be provided by the parent <section> or <div>. When you have a set of sibling elements and you have a <p> that you don't want a margin-bottom on, you can wrap that <p> (plus possibly some of it's previous siblings) in a single unandorned <div>.

Alternatively, you can be explicit about which <p> elements do and do not get spacing, but I think that's probably silly.

I think this is why `:not(:last-child)` instead of `:not(:last-of-type)` ends up being better. When you have a `<p>` that is a last-child and you still want spacing below it, it can be provided by the parent `<section>` or `<div>`. When you have a set of sibling elements and you have a `<p>` that you don't want a margin-bottom on, you can wrap that `<p>` (plus possibly some of it's previous siblings) in a single unandorned `<div>`. Alternatively, you can be explicit about which `<p>` elements do and do not get spacing, but I think that's probably silly.

neb-b commented

2019-01-17 00:09:36 +01:00

(Migrated from github.com)

Yeah I just messed with it a bit. I guess I was confused.

I agree, :not(:last-child) is better. Will fix and include in the next release.

Yeah I just messed with it a bit. I guess I was confused. I agree, `:not(:last-child)` is better. Will fix and include in the next release.

neb-b commented

2019-01-17 07:38:00 +01:00

(Migrated from github.com)

Changed to :last-child in https://github.com/lbryio/lbry-desktop/pull/2206

Changed to `:last-child` in https://github.com/lbryio/lbry-desktop/pull/2206