diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2017-05-25 07:32:37 +0300 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2017-05-26 22:10:52 +0300 |
commit | ea504a71adc11bc0608d471b78e90e5d74648692 (patch) | |
tree | 9591c7f2f46be1cca5bb34e69808824b90a4970a /app | |
parent | 3605e4307ddf373071c0353a066c50fcead01e45 (diff) |
Apply responsive note styles to parallel diffs
Fix inspired while working on
https://gitlab.com/gitlab-org/gitlab-ce/issues/32801
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/notes.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/timeline.scss | 34 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 26 |
4 files changed, 42 insertions, 33 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index d2ec1791d2b..b8ba77f4513 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -34,6 +34,7 @@ @import "framework/selects.scss"; @import "framework/sidebar.scss"; @import "framework/tables.scss"; +@import "framework/notes.scss"; @import "framework/timeline.scss"; @import "framework/typography.scss"; @import "framework/zen.scss"; diff --git a/app/assets/stylesheets/framework/notes.scss b/app/assets/stylesheets/framework/notes.scss new file mode 100644 index 00000000000..d349e3fad9c --- /dev/null +++ b/app/assets/stylesheets/framework/notes.scss @@ -0,0 +1,14 @@ +@mixin notes-media($condition, $breakpoint-width) { + @media (#{$condition}-width: ($breakpoint-width)) { + @content; + } + + // Diff is side by side + .notes_content.parallel & { + // We hide at double what we normally hide at because + // there are two columns of notes + @media (#{$condition}-width: (2 * $breakpoint-width)) { + @content; + } + } +} diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index ddccfc96819..cec3b54d567 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -3,6 +3,12 @@ margin: 0; padding: 0; + &::before { + @include notes-media('max', $screen-xs-max) { + background: none; + } + } + .system-note { .note-text { color: $gl-text-color !important; @@ -23,6 +29,16 @@ .timeline-entry-inner { position: relative; + + @include notes-media('max', $screen-xs-max) { + .timeline-icon { + display: none; + } + + .timeline-content { + margin-left: 0; + } + } } &:target, @@ -40,24 +56,6 @@ } } -@media (max-width: $screen-xs-max) { - .timeline { - &::before { - background: none; - } - } - - .timeline-entry .timeline-entry-inner { - .timeline-icon { - display: none; - } - - .timeline-content { - margin-left: 0; - } - } -} - .discussion .timeline-entry { margin: 0; border-right: none; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 32d2e9ba4bd..cffd3b6060d 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -18,7 +18,7 @@ ul.notes { margin-left: 55px; &.timeline-content-form { - @media (max-width: $screen-sm-max) { + @include notes-media('max', $screen-sm-max) { margin-left: 0; } } @@ -120,7 +120,7 @@ ul.notes { .note-header { - @media (max-width: $screen-xs-min) { + @include notes-media('max', $screen-xs-min) { .inline { display: block; } @@ -152,7 +152,7 @@ ul.notes { padding-left: 0; clear: both; - @media (min-width: $screen-sm-min) { + @include notes-media('min', $screen-sm-min) { margin-left: 65px; } @@ -200,7 +200,7 @@ ul.notes { } .timeline-content { - @media (min-width: $screen-sm-min) { + @include notes-media('min', $screen-sm-min) { margin-left: 30px; } } @@ -370,7 +370,7 @@ ul.notes { display: flex; justify-content: space-between; - @media (max-width: $screen-xs-max) { + @include notes-media('max', $screen-xs-max) { flex-flow: row wrap; } } @@ -385,7 +385,7 @@ ul.notes { } .note-header-author-name { - @media (max-width: $screen-xs-max) { + @include notes-media('max', $screen-xs-max) { display: none; } } @@ -393,7 +393,7 @@ ul.notes { .note-headline-light { display: inline; - @media (max-width: $screen-xs-min) { + @include notes-media('max', $screen-xs-min) { display: block; } } @@ -435,7 +435,7 @@ ul.notes { margin-left: 10px; color: $gray-darkest; - @media (max-width: $screen-xs-max) { + @include notes-media('max', $screen-xs-max) { float: none; margin-left: 0; } @@ -446,7 +446,7 @@ ul.notes { } .discussion-actions { - @media (max-width: $screen-md-max) { + @include notes-media('max', $screen-md-max) { float: none; margin-left: 0; @@ -460,7 +460,7 @@ ul.notes { display: inline; line-height: 20px; - @media (min-width: $screen-sm-min) { + @include notes-media('min', $screen-sm-min) { margin-left: 10px; line-height: 24px; } @@ -629,7 +629,7 @@ ul.notes { } .line-resolve-all-container { - @media (min-width: $screen-sm-min) { + @include notes-media('min', $screen-sm-min) { margin-right: 0; padding-left: $gl-padding; } @@ -744,10 +744,6 @@ ul.notes { // Merge request notes in diffs .diff-file { - // Diff is side by side - .notes_content.parallel .note-header .note-header-author-name { - display: block; - } // Diff is inline .notes_content .note-header .note-headline-light { display: inline-block; |