Apply responsive note styles to parallel diffs
Fix inspired while working on https://gitlab.com/gitlab-org/gitlab-ce/issues/32801
This commit is contained in:
parent
3605e4307d
commit
ea504a71ad
|
@ -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";
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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 @@
|
||||||
|
|
||||||
.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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 {
|
||||||
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 {
|
||||||
|
|
||||||
.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 {
|
||||||
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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
.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 {
|
||||||
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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
|
|
||||||
// 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;
|
||||||
|
|
Loading…
Reference in New Issue