From 5db587a1adb6c51a2e3e5ab44ef35779f9a6917d Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 6 Jan 2017 11:58:51 +0000 Subject: Responsive title in diffs inline, side by side, with and without sidebar Adds MR ID to CHANGELOG entry --- app/assets/stylesheets/pages/diff.scss | 72 ++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 96ba7c40634..d7bb029cac6 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -44,6 +44,15 @@ .diff-toggle-caret { padding-right: 6px; } + + .file-title-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: bottom; + max-width: 450px; + } } .diff-content { @@ -480,3 +489,66 @@ } } } + +/** + * Diff file title + */ +.file-holder[data-view="parallel"] .file-title-name, +.file-holder[data-view="inline"] .file-title-name { + @media (max-width: $screen-xs) { + max-width: 140px; + } + + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { + max-width: 250px; + } + + @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { + max-width: 250px; + } + + @media (min-width: $screen-md) and (max-width: $screen-md-max) { + max-width: 480px; + } +} + +.file-holder[data-view="parallel"] .file-title-name { + @media (min-width: $screen-lg) { + max-width: 760px; + } +} + +.file-holder[data-view="inline"] .file-title-name { + @media (min-width: $screen-lg) { + max-width: 530px; + } +} + +.right-sidebar-expanded { + .file-holder[data-view="parallel"] .file-title-name, + .file-holder[data-view="inline"] .file-title-name { + @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { + max-width: 250px; + } + + @media (min-width: $screen-md) and (max-width: $screen-md-max) { + max-width: 250px; + } + + @media (min-width: $screen-lg) { + max-width: 460px; + } + } + + .file-holder[data-view="parallel"] .file-title-name { + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { + max-width: 180px; + } + } + + .file-holder[data-view="inline"] .file-title-name { + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { + max-width: 100px; + } + } +} -- cgit v1.2.1 From 815c0910968fb4c0f0c787af5e7733c71284a274 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 12 Jan 2017 11:15:42 -0500 Subject: Adds tooltips --- app/assets/stylesheets/pages/diff.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index d7bb029cac6..d614fa45ad3 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -37,6 +37,10 @@ .file-title { cursor: pointer; + a:hover { + text-decoration: none; + } + &:hover { background-color: $gray-normal; } -- cgit v1.2.1 From 2bb2544ecaf37a02e4055194e90405dc1ffca094 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 18 Jan 2017 18:56:45 +0100 Subject: Use flexbox instead of media queries Move CSS to correct file --- app/assets/stylesheets/framework/files.scss | 34 ++++++++++++++ app/assets/stylesheets/pages/diff.scss | 72 ----------------------------- 2 files changed, 34 insertions(+), 72 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index c51912b4ac4..92170daa475 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -231,3 +231,37 @@ span.idiff { } } } + + +.file-title-flex-parent { + display: flex; + align-items: center; + background-color: $gray-light; + border-bottom: 1px solid $border-color; + padding: 10px $gl-padding; + margin: 0; + border-radius: 3px 3px 0 0; + + > a { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: $gl-text-color; + } + + small { + margin: 0 10px 0 0; + } + + .file-actions-fixed { + white-space: nowrap; + + .btn { + padding: 0 10px; + font-size: 13px; + line-height: 28px; + display: inline-block; + } + } +} diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index d614fa45ad3..8b784c2a439 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -48,15 +48,6 @@ .diff-toggle-caret { padding-right: 6px; } - - .file-title-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - max-width: 450px; - } } .diff-content { @@ -493,66 +484,3 @@ } } } - -/** - * Diff file title - */ -.file-holder[data-view="parallel"] .file-title-name, -.file-holder[data-view="inline"] .file-title-name { - @media (max-width: $screen-xs) { - max-width: 140px; - } - - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { - max-width: 250px; - } - - @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { - max-width: 250px; - } - - @media (min-width: $screen-md) and (max-width: $screen-md-max) { - max-width: 480px; - } -} - -.file-holder[data-view="parallel"] .file-title-name { - @media (min-width: $screen-lg) { - max-width: 760px; - } -} - -.file-holder[data-view="inline"] .file-title-name { - @media (min-width: $screen-lg) { - max-width: 530px; - } -} - -.right-sidebar-expanded { - .file-holder[data-view="parallel"] .file-title-name, - .file-holder[data-view="inline"] .file-title-name { - @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { - max-width: 250px; - } - - @media (min-width: $screen-md) and (max-width: $screen-md-max) { - max-width: 250px; - } - - @media (min-width: $screen-lg) { - max-width: 460px; - } - } - - .file-holder[data-view="parallel"] .file-title-name { - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { - max-width: 180px; - } - } - - .file-holder[data-view="inline"] .file-title-name { - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { - max-width: 100px; - } - } -} -- cgit v1.2.1 From 1446a03e79e7ecdf09e73854062f9ca6349aad9f Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Wed, 18 Jan 2017 16:48:51 -0600 Subject: Remove fixed class from file actions --- app/assets/stylesheets/framework/files.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 92170daa475..db1c8da06d0 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -254,7 +254,7 @@ span.idiff { margin: 0 10px 0 0; } - .file-actions-fixed { + .file-actions { white-space: nowrap; .btn { -- cgit v1.2.1