diff options
author | Mark Florian <markrian@gmail.com> | 2019-02-07 16:32:16 +0300 |
---|---|---|
committer | Mark Florian <mflorian@gitlab.com> | 2019-02-12 14:32:27 +0300 |
commit | 9848c1c97c5bad1300cc149d21a9780a5a60978e (patch) | |
tree | a087b06ab7b769eadd1c98b1c6993f404eb0e50d /log | |
parent | 885e2a9c93f85b5411a6f230b6e93aec502db64c (diff) |
Correctly align resolved discussion text
The header of the `NoteableDiscussion` component is really a media
object[1], but it didn't have the right DOM or styling to correctly
achieve it.
This change wraps all the children of the media object (except the
floated image) in a dedicated `.timeline-content` element, which is
styled to establish its own block formatting context[2]. This ensures
*all* of its children sit left-aligned to the right edge of the float.
In short, the DOM used to look like this:
.discussion-header
.timeline-icon
note-header
note-edited-text
and now it looks like this:
.discussion-header
.timeline-icon
.timeline-content (with own formatting context)
note-header
note-edited-text
This is also now more consistent with the DOM of `NoteableNote`, in that
`.timeline-icon` and `.timeline-content` seem to want to be siblings.
[1]: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
[2]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
Diffstat (limited to 'log')
0 files changed, 0 insertions, 0 deletions