From 9848c1c97c5bad1300cc149d21a9780a5a60978e Mon Sep 17 00:00:00 2001
From: Mark Florian <markrian@gmail.com>
Date: Thu, 7 Feb 2019 13:32:16 +0000
Subject: 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
---
 .../notes/components/noteable_discussion.vue       | 50 +++++++++++-----------
 app/assets/stylesheets/pages/notes.scss            |  5 +++
 2 files changed, 31 insertions(+), 24 deletions(-)

(limited to 'app/assets')

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 {
-- 
cgit v1.2.3


From c7a8991e5ae00e0582ef9bb99ec1786aa83b04cf Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Thu, 14 Feb 2019 15:13:22 +0800
Subject: Allow wrapping of note headline

This prevents a horizontal scrollbar from appearing in Firefox in
certain situations. See the [merge request][1] for more details and
discussion.

[1]: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/25001#note_141208011
---
 app/assets/stylesheets/pages/notes.scss | 1 -
 1 file changed, 1 deletion(-)

(limited to 'app/assets')

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 0f1b326fb5f..093a880f52d 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -602,7 +602,6 @@ $note-form-margin-left: 72px;
 
 .note-headline-meta {
   display: inline-block;
-  white-space: nowrap;
 
   .system-note-message {
     white-space: normal;
-- 
cgit v1.2.3


From a14c9be19be270036df251b01fb26e9302c22f3c Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Fri, 15 Feb 2019 09:17:59 +0800
Subject: Prevent line breaks in note timestamp

For better readability.
---
 app/assets/stylesheets/pages/notes.scss | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'app/assets')

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 093a880f52d..adab2253365 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -611,6 +611,10 @@ $note-form-margin-left: 72px;
     color: $gl-text-color-disabled;
   }
 
+  .note-timestamp {
+    white-space: nowrap;
+  }
+
   a:hover {
     text-decoration: underline;
   }
-- 
cgit v1.2.3