Commit 3ae070c9 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch 'apply-same-responsive-notes-to-parallel-diff' into 'master'

Apply responsive note styles to parallel diffs

See merge request !11701
parents 50780ef4 ea504a71
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
@import "framework/selects.scss"; @import "framework/selects.scss";
@import "framework/sidebar.scss"; @import "framework/sidebar.scss";
@import "framework/tables.scss"; @import "framework/tables.scss";
@import "framework/notes.scss";
@import "framework/timeline.scss"; @import "framework/timeline.scss";
@import "framework/typography.scss"; @import "framework/typography.scss";
@import "framework/zen.scss"; @import "framework/zen.scss";
......
@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;
}
}
}
...@@ -3,6 +3,12 @@ ...@@ -3,6 +3,12 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
&::before {
@include notes-media('max', $screen-xs-max) {
background: none;
}
}
.system-note { .system-note {
.note-text { .note-text {
color: $gl-text-color !important; color: $gl-text-color !important;
...@@ -23,6 +29,16 @@ ...@@ -23,6 +29,16 @@
.timeline-entry-inner { .timeline-entry-inner {
position: relative; position: relative;
@include notes-media('max', $screen-xs-max) {
.timeline-icon {
display: none;
}
.timeline-content {
margin-left: 0;
}
}
} }
&:target, &:target,
...@@ -40,24 +56,6 @@ ...@@ -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 { .discussion .timeline-entry {
margin: 0; margin: 0;
border-right: none; border-right: none;
......
...@@ -18,7 +18,7 @@ ul.notes { ...@@ -18,7 +18,7 @@ ul.notes {
margin-left: 55px; margin-left: 55px;
&.timeline-content-form { &.timeline-content-form {
@media (max-width: $screen-sm-max) { @include notes-media('max', $screen-sm-max) {
margin-left: 0; margin-left: 0;
} }
} }
...@@ -120,7 +120,7 @@ ul.notes { ...@@ -120,7 +120,7 @@ ul.notes {
.note-header { .note-header {
@media (max-width: $screen-xs-min) { @include notes-media('max', $screen-xs-min) {
.inline { .inline {
display: block; display: block;
} }
...@@ -152,7 +152,7 @@ ul.notes { ...@@ -152,7 +152,7 @@ ul.notes {
padding-left: 0; padding-left: 0;
clear: both; clear: both;
@media (min-width: $screen-sm-min) { @include notes-media('min', $screen-sm-min) {
margin-left: 65px; margin-left: 65px;
} }
...@@ -200,7 +200,7 @@ ul.notes { ...@@ -200,7 +200,7 @@ ul.notes {
} }
.timeline-content { .timeline-content {
@media (min-width: $screen-sm-min) { @include notes-media('min', $screen-sm-min) {
margin-left: 30px; margin-left: 30px;
} }
} }
...@@ -370,7 +370,7 @@ ul.notes { ...@@ -370,7 +370,7 @@ ul.notes {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media (max-width: $screen-xs-max) { @include notes-media('max', $screen-xs-max) {
flex-flow: row wrap; flex-flow: row wrap;
} }
} }
...@@ -385,7 +385,7 @@ ul.notes { ...@@ -385,7 +385,7 @@ ul.notes {
} }
.note-header-author-name { .note-header-author-name {
@media (max-width: $screen-xs-max) { @include notes-media('max', $screen-xs-max) {
display: none; display: none;
} }
} }
...@@ -393,7 +393,7 @@ ul.notes { ...@@ -393,7 +393,7 @@ ul.notes {
.note-headline-light { .note-headline-light {
display: inline; display: inline;
@media (max-width: $screen-xs-min) { @include notes-media('max', $screen-xs-min) {
display: block; display: block;
} }
} }
...@@ -435,7 +435,7 @@ ul.notes { ...@@ -435,7 +435,7 @@ ul.notes {
margin-left: 10px; margin-left: 10px;
color: $gray-darkest; color: $gray-darkest;
@media (max-width: $screen-xs-max) { @include notes-media('max', $screen-xs-max) {
float: none; float: none;
margin-left: 0; margin-left: 0;
} }
...@@ -446,7 +446,7 @@ ul.notes { ...@@ -446,7 +446,7 @@ ul.notes {
} }
.discussion-actions { .discussion-actions {
@media (max-width: $screen-md-max) { @include notes-media('max', $screen-md-max) {
float: none; float: none;
margin-left: 0; margin-left: 0;
...@@ -460,7 +460,7 @@ ul.notes { ...@@ -460,7 +460,7 @@ ul.notes {
display: inline; display: inline;
line-height: 20px; line-height: 20px;
@media (min-width: $screen-sm-min) { @include notes-media('min', $screen-sm-min) {
margin-left: 10px; margin-left: 10px;
line-height: 24px; line-height: 24px;
} }
...@@ -629,7 +629,7 @@ ul.notes { ...@@ -629,7 +629,7 @@ ul.notes {
} }
.line-resolve-all-container { .line-resolve-all-container {
@media (min-width: $screen-sm-min) { @include notes-media('min', $screen-sm-min) {
margin-right: 0; margin-right: 0;
padding-left: $gl-padding; padding-left: $gl-padding;
} }
...@@ -744,10 +744,6 @@ ul.notes { ...@@ -744,10 +744,6 @@ ul.notes {
// Merge request notes in diffs // Merge request notes in diffs
.diff-file { .diff-file {
// Diff is side by side
.notes_content.parallel .note-header .note-header-author-name {
display: block;
}
// Diff is inline // Diff is inline
.notes_content .note-header .note-headline-light { .notes_content .note-header .note-headline-light {
display: inline-block; display: inline-block;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment