Commit 9848c1c9 authored by Mark Florian's avatar Mark Florian Committed by Mark Florian

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
parent 885e2a9c
...@@ -358,30 +358,32 @@ Please check your network connection and try again.`; ...@@ -358,30 +358,32 @@ Please check your network connection and try again.`;
:img-size="40" :img-size="40"
/> />
</div> </div>
<note-header <div class="timeline-content">
:author="author" <note-header
:created-at="initialDiscussion.created_at" :author="author"
:note-id="initialDiscussion.id" :created-at="initialDiscussion.created_at"
:include-toggle="true" :note-id="initialDiscussion.id"
:expanded="discussion.expanded" :include-toggle="true"
@toggleHandler="toggleDiscussionHandler" :expanded="discussion.expanded"
> @toggleHandler="toggleDiscussionHandler"
<span v-html="actionText"></span> >
</note-header> <span v-html="actionText"></span>
<note-edited-text </note-header>
v-if="discussion.resolved" <note-edited-text
:edited-at="discussion.resolved_at" v-if="discussion.resolved"
:edited-by="discussion.resolved_by" :edited-at="discussion.resolved_at"
:action-text="resolvedText" :edited-by="discussion.resolved_by"
class-name="discussion-headline-light js-discussion-headline" :action-text="resolvedText"
/> class-name="discussion-headline-light js-discussion-headline"
<note-edited-text />
v-else-if="lastUpdatedAt" <note-edited-text
:edited-at="lastUpdatedAt" v-else-if="lastUpdatedAt"
:edited-by="lastUpdatedBy" :edited-at="lastUpdatedAt"
action-text="Last updated" :edited-by="lastUpdatedBy"
class-name="discussion-headline-light js-discussion-headline" action-text="Last updated"
/> class-name="discussion-headline-light js-discussion-headline"
/>
</div>
</div> </div>
<div v-if="shouldShowDiscussions" class="discussion-body"> <div v-if="shouldShowDiscussions" class="discussion-body">
<component <component
......
...@@ -550,6 +550,11 @@ $note-form-margin-left: 72px; ...@@ -550,6 +550,11 @@ $note-form-margin-left: 72px;
.note-header-info { .note-header-info {
padding-bottom: 0; padding-bottom: 0;
} }
.timeline-content {
overflow-x: auto;
overflow-y: hidden;
}
} }
.unresolved { .unresolved {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment