1 files changed, 246 insertions, 130 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 57cf8e136e2..4b15fc2bd82 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -16,6 +16,15 @@ ul.notes {
 
   .timeline-icon {
     float: left;
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: $gray-darkest;
+      position: absolute;
+      left: 0;
+      top: 16px;
+    }
   }
 
   .timeline-content {
@@ -33,11 +42,135 @@ ul.notes {
     white-space: nowrap;
   }
 
+  .discussion-body {
+    padding-top: 15px;
+  }
+
+  .discussion {
+    overflow: hidden;
+    display: block;
+    position: relative;
+  }
+
+  .note {
+    display: block;
+    position: relative;
+    border-bottom: 1px solid $white-normal;
+
+    &.being-posted {
+      pointer-events: none;
+      opacity: 0.5;
+
+      .dummy-avatar {
+        display: inline-block;
+        height: 40px;
+        width: 40px;
+        border-radius: 50%;
+        background-color: $kdb-border;
+        border: 1px solid darken($kdb-border, 25%);
+      }
+
+      .note-headline-light,
+      .fa-spinner {
+        margin-left: 3px;
+      }
+    }
+
+    &.note-discussion {
+      &.timeline-entry {
+        padding: 14px 10px;
+      }
+
+      .system-note {
+        padding: 0;
+      }
+    }
+
+    &.is-editing {
+      .note-header,
+      .note-text,
+      .edited-text {
+        display: none;
+      }
+
+      .note-edit-form {
+        display: block;
+
+        &.current-note-edit-form + .note-awards {
+          display: none;
+        }
+      }
+    }
+
+    .note-body {
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      .note-text {
+        word-wrap: break-word;
+        @include md-typography;
+        // Reset ul style types since we're nested inside a ul already
+        @include bulleted-list;
+        ul.task-list {
+          ul:not(.task-list) {
+            padding-left: 1.3em;
+          }
+        }
+
+        table {
+          @include markdown-table;
+        }
+      }
+    }
+
+    .note-awards {
+      .js-awards-block {
+        margin-bottom: 16px;
+      }
+    }
+
+    .note-header {
+
+      @media (max-width: $screen-xs-min) {
+        .inline {
+          display: block;
+        }
+      }
+    }
+
+    .note-emoji-button {
+      position: relative;
+      line-height: 1;
+
+      .fa-spinner {
+        display: none;
+      }
+
+      &.is-loading {
+        .fa-smile-o {
+          display: none;
+        }
+
+        .fa-spinner {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
   .system-note {
     font-size: 14px;
     padding: 0;
     clear: both;
 
+    @media (min-width: $screen-sm-min) {
+      margin-left: 65px;
+    }
+
+    .note-header {
+      padding-bottom: 0;
+    }
+
     &.timeline-entry::after {
       clear: none;
     }
@@ -66,6 +199,14 @@ ul.notes {
 
     .timeline-content {
       padding: 14px 10px;
+
+      @media (min-width: $screen-sm-min) {
+        margin-left: 20px;
+      }
+    }
+
+    .note-header {
+      padding-bottom: 0;
     }
 
     .note-body {
@@ -97,11 +238,6 @@ ul.notes {
 
           ul {
             margin: 3px 0 3px 16px !important;
-
-            .gfm-commit {
-              font-family: $monospace_font;
-              font-size: 12px;
-            }
           }
 
           p:first-child {
@@ -130,116 +266,6 @@ ul.notes {
         }
       }
     }
-
-    .timeline-icon {
-      display: none;
-
-      .avatar {
-        visibility: hidden;
-
-        .discussion-body & {
-          visibility: visible;
-        }
-      }
-    }
-  }
-
-  .discussion-body {
-    padding-top: 15px;
-  }
-
-  .discussion {
-    overflow: hidden;
-    display: block;
-    position: relative;
-  }
-
-  .note {
-    display: block;
-    position: relative;
-    border-bottom: 1px solid $white-normal;
-
-    &.note-discussion {
-      &.timeline-entry {
-        padding: 14px 10px;
-      }
-
-      .system-note {
-        padding: 0;
-      }
-    }
-
-    &.is-editting {
-      .note-header,
-      .note-text,
-      .edited-text {
-        display: none;
-      }
-
-      .note-edit-form {
-        display: block;
-
-        &.current-note-edit-form + .note-awards {
-          display: none;
-        }
-      }
-    }
-
-    .note-body {
-      overflow-x: auto;
-      overflow-y: hidden;
-
-      .note-text {
-        word-wrap: break-word;
-        @include md-typography;
-        // Reset ul style types since we're nested inside a ul already
-        @include bulleted-list;
-        ul.task-list {
-          ul:not(.task-list) {
-            padding-left: 1.3em;
-          }
-        }
-      }
-    }
-
-    .note-awards {
-      .js-awards-block {
-        padding: 2px;
-        margin-top: 10px;
-      }
-    }
-
-    .note-header {
-      padding-bottom: 3px;
-      padding-right: 20px;
-
-      @media (min-width: $screen-sm-min) {
-        padding-right: 0;
-      }
-
-      @media (max-width: $screen-xs-min) {
-        .inline {
-          display: block;
-        }
-      }
-    }
-
-    .note-emoji-button {
-      .fa-spinner {
-        display: none;
-      }
-
-      &.is-loading {
-        .fa-smile-o {
-          display: none;
-        }
-
-        .fa-spinner {
-          display: inline-block;
-        }
-      }
-    }
-
   }
 }
 
@@ -253,10 +279,6 @@ ul.notes {
     }
   }
 
-  .diff-header > span {
-    margin-right: 10px;
-  }
-
   .line_content {
     white-space: pre-wrap;
   }
@@ -294,6 +316,18 @@ ul.notes {
         border-width: 1px;
       }
 
+      .discussion-notes {
+        &:not(:first-child) {
+          border-top: 1px solid $white-normal;
+          margin-top: 20px;
+        }
+
+        &:not(:last-child) {
+          border-bottom: 1px solid $white-normal;
+          margin-bottom: 20px;
+        }
+      }
+
       .notes {
         background-color: $white-light;
       }
@@ -332,6 +366,20 @@ ul.notes {
   font-size: 14px;
 }
 
+.note-header {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $screen-xs-max) {
+    flex-flow: row wrap;
+  }
+}
+
+.note-header-info {
+  min-width: 0;
+  padding-bottom: 5px;
+}
+
 .note-headline-light {
   display: inline;
 
@@ -351,21 +399,36 @@ ul.notes {
   }
 }
 
+.note-headline-meta {
+  display: inline-block;
+  white-space: nowrap;
+
+  .system-note-message {
+    white-space: normal;
+  }
+}
+
 /**
  * Actions for Discussions/Notes
  */
 
-.discussion-actions,
-.note-actions {
+.discussion-actions {
   float: right;
   margin-left: 10px;
   color: $gray-darkest;
 }
 
 .note-actions {
-  position: absolute;
-  right: 0;
-  top: 0;
+  flex-shrink: 0;
+  // For PhantomJS that does not support flex
+  float: right;
+  margin-left: 10px;
+  color: $gray-darkest;
+
+  @media (max-width: $screen-xs-max) {
+    float: none;
+    margin-left: 0;
+  }
 
   .note-action-button {
     margin-left: 8px;
@@ -398,13 +461,51 @@ ul.notes {
     font-size: 17px;
   }
 
-  &:hover {
+  svg {
+    height: 16px;
+    width: 16px;
+    fill: $gray-darkest;
+    vertical-align: text-top;
+  }
+
+  .award-control-icon-positive,
+  .award-control-icon-super-positive {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  &:hover,
+  &.is-active {
     .danger-highlight {
       color: $gl-text-red;
     }
 
     .link-highlight {
       color: $gl-link-color;
+
+      svg {
+        fill: $gl-link-color;
+      }
+    }
+
+    .award-control-icon-neutral {
+      opacity: 0;
+    }
+
+    .award-control-icon-positive {
+      opacity: 1;
+    }
+  }
+
+  &.is-active {
+    .award-control-icon-positive {
+      opacity: 0;
+    }
+
+    .award-control-icon-super-positive {
+      opacity: 1;
     }
   }
 }
@@ -508,6 +609,14 @@ ul.notes {
 }
 
 .line-resolve-all-container {
+  @media (min-width: $screen-sm-min) {
+    margin-right: 0;
+    padding-left: $gl-padding;
+  }
+
+  > div {
+    white-space: nowrap;
+  }
 
   .btn-group {
     margin-left: -4px;
@@ -537,7 +646,6 @@ ul.notes {
       fill: $gray-darkest;
     }
   }
-
 }
 
 .line-resolve-all {
@@ -561,7 +669,7 @@ ul.notes {
 
 .line-resolve-btn {
   position: relative;
-  top: 2px;
+  top: 0;
   padding: 0;
   background-color: transparent;
   border: none;
@@ -572,7 +680,6 @@ ul.notes {
   }
 
   &:not(.is-disabled):hover,
-  &:not(.is-disabled):focus,
   &.is-active {
     color: $gl-text-green;
 
@@ -583,8 +690,13 @@ ul.notes {
 
   svg {
     fill: $gray-darkest;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
+  }
+
+  .loading {
+    margin: 0;
+    height: auto;
   }
 }
 
@@ -598,6 +710,10 @@ ul.notes {
   }
 }
 
+.discussion-notes .flash-container {
+  margin-bottom: 0;
+}
+
 // Merge request notes in diffs
 .diff-file {
   // Diff is side by side