diff options
| author | Mark Florian <markrian@gmail.com> | 2019-02-07 13:32:16 +0000 |
|---|---|---|
| committer | Mark Florian <mflorian@gitlab.com> | 2019-02-12 19:32:27 +0800 |
| commit | 9848c1c97c5bad1300cc149d21a9780a5a60978e (patch) | |
| tree | a087b06ab7b769eadd1c98b1c6993f404eb0e50d | |
| parent | 885e2a9c93f85b5411a6f230b6e93aec502db64c (diff) | |
| download | gitlab-ce-9848c1c97c5bad1300cc149d21a9780a5a60978e.tar.gz | |
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
| -rw-r--r-- | app/assets/javascripts/notes/components/noteable_discussion.vue | 50 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 5 |
2 files changed, 31 insertions, 24 deletions
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index b7e9f7c2028..d787db64383 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -358,30 +358,32 @@ Please check your network connection and try again.`; :img-size="40" /> </div> - <note-header - :author="author" - :created-at="initialDiscussion.created_at" - :note-id="initialDiscussion.id" - :include-toggle="true" - :expanded="discussion.expanded" - @toggleHandler="toggleDiscussionHandler" - > - <span v-html="actionText"></span> - </note-header> - <note-edited-text - v-if="discussion.resolved" - :edited-at="discussion.resolved_at" - :edited-by="discussion.resolved_by" - :action-text="resolvedText" - class-name="discussion-headline-light js-discussion-headline" - /> - <note-edited-text - v-else-if="lastUpdatedAt" - :edited-at="lastUpdatedAt" - :edited-by="lastUpdatedBy" - action-text="Last updated" - class-name="discussion-headline-light js-discussion-headline" - /> + <div class="timeline-content"> + <note-header + :author="author" + :created-at="initialDiscussion.created_at" + :note-id="initialDiscussion.id" + :include-toggle="true" + :expanded="discussion.expanded" + @toggleHandler="toggleDiscussionHandler" + > + <span v-html="actionText"></span> + </note-header> + <note-edited-text + v-if="discussion.resolved" + :edited-at="discussion.resolved_at" + :edited-by="discussion.resolved_by" + :action-text="resolvedText" + class-name="discussion-headline-light js-discussion-headline" + /> + <note-edited-text + v-else-if="lastUpdatedAt" + :edited-at="lastUpdatedAt" + :edited-by="lastUpdatedBy" + action-text="Last updated" + class-name="discussion-headline-light js-discussion-headline" + /> + </div> </div> <div v-if="shouldShowDiscussions" class="discussion-body"> <component diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 23b9e4f9416..0f1b326fb5f 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -550,6 +550,11 @@ $note-form-margin-left: 72px; .note-header-info { padding-bottom: 0; } + + .timeline-content { + overflow-x: auto; + overflow-y: hidden; + } } .unresolved { |