kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch '33917-mr-comment-system-note-highlight-don-t-have-the-same-width' into 'master'

Browse source 
Resolve "MR comment + system note highlight don't have the same width"

Closes #33917

See merge request !12364
This commit is contained in:
Annabel Dunstone Gray 2017-06-22 02:22:10 +00:00
commit 759a38d69b
5 changed files with 75 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/framework/variables.scss
View file

@ -323,6 +323,7 @@ $note-disabled-comment-color: #b2b2b2;
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;
$note-line2-border: #ddd;
$note-icon-gutter-width: 55px;
/*

16
app/assets/stylesheets/pages/note_form.scss
View file

@ -148,8 +148,20 @@
padding: 6px 0;
}
.notes-form > li {
border: 0;
.notes.notes-form > li.timeline-entry {
@include notes-media('max', $screen-sm-max) {
padding: 0;
}
.timeline-content {
@include notes-media('max', $screen-sm-max) {
margin: 0;
}
}
.timeline-entry-inner {
border: 0;
}
}
.note-edit-form {

81
app/assets/stylesheets/pages/notes.scss
View file

@ -14,16 +14,6 @@ ul.notes {
margin: 0;
padding: 0;
.timeline-content {
margin-left: 55px;
&.timeline-content-form {
@include notes-media('max', $screen-sm-max) {
margin-left: 0;
}
}
}
.note-created-ago,
.note-updated-at {
white-space: nowrap;
@ -46,17 +36,49 @@ ul.notes {
}
}
> li {
padding: $gl-padding $gl-btn-padding;
> li { // .timeline-entry
padding: 0;
display: block;
position: relative;
border-bottom: 1px solid $white-normal;
border-bottom: 0;
&:last-child {
// Override `.timeline > li:last-child { border-bottom: none; }`
@include notes-media('min', $screen-sm-min) {
padding-left: $note-icon-gutter-width;
}
.timeline-entry-inner {
padding: $gl-padding $gl-btn-padding;
border-bottom: 1px solid $white-normal;
}
&:target,
&.target {
border-bottom: 1px solid $white-normal;
&:not(:first-child) {
border-top: 1px solid $white-normal;
margin-top: -1px;
}
.timeline-entry-inner {
border-bottom: 0;
}
}
.timeline-icon {
@include notes-media('min', $screen-sm-min) {
margin-left: -$note-icon-gutter-width;
}
}
.timeline-content {
margin-left: $note-icon-gutter-width;
@include notes-media('min', $screen-sm-min) {
margin-left: 0;
}
}
&.being-posted {
pointer-events: none;
opacity: 0.5;
@ -73,7 +95,7 @@ ul.notes {
}
&.note-discussion {
&.timeline-entry {
.timeline-entry-inner {
padding: $gl-padding 10px;
}
}
@ -152,13 +174,8 @@ ul.notes {
.system-note {
font-size: 14px;
padding-left: 0;
clear: both;
@include notes-media('min', $screen-sm-min) {
margin-left: 65px;
}
.note-header-info {
padding-bottom: 0;
}
@ -192,13 +209,16 @@ ul.notes {
.timeline-icon {
float: left;
@include notes-media('min', $screen-sm-min) {
margin-left: 0;
width: auto;
}
svg {
width: 16px;
height: 16px;
fill: $gray-darkest;
position: absolute;
left: 0;
top: 2px;
margin-top: 2px;
}
}
@ -639,15 +659,12 @@ ul.notes {
.discussion-body,
.diff-file {
.notes .note {
padding-left: $gl-padding;
padding-right: $gl-padding;
border-bottom: 1px solid $white-normal;
&.system-note {
padding-left: 0;
@media (min-width: $screen-sm-min) {
margin-left: 70px;
}
.timeline-entry-inner {
padding-left: $gl-padding;
padding-right: $gl-padding;
border-bottom: none;
}
}
}

13
app/views/shared/notes/_notes_with_form.html.haml
View file

@ -6,13 +6,14 @@
- if can_create_note?
%ul.notes.notes-form.timeline
%li.timeline-entry
.flash-container.timeline-content
.timeline-entry-inner
.flash-container.timeline-content
.timeline-icon.hidden-xs.hidden-sm
%a.author_link{ href: user_path(current_user) }
= image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
.timeline-content.timeline-content-form
= render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
.timeline-icon.hidden-xs.hidden-sm
%a.author_link{ href: user_path(current_user) }
= image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
.timeline-content.timeline-content-form
= render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
- elsif !current_user
.disabled-comment.text-center.prepend-top-default
Please

4
changelogs/unreleased/33917-mr-comment-system-note-highlight-don-t-have-the-same-width.yml Normal file
View file

@ -0,0 +1,4 @@
---
title: Standardize timeline note margins across different viewport sizes
merge_request: 12364
author: