From 2bb2544ecaf37a02e4055194e90405dc1ffca094 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 18 Jan 2017 18:56:45 +0100
Subject: [PATCH] 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 ---------------------
app/views/projects/diffs/_file.html.haml | 4 +-
3 files changed, 36 insertions(+), 74 deletions(-)
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;
- }
- }
-}
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index c37a33bbcd5..430f7878839 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -1,9 +1,9 @@
.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
- .file-title
+ .file-title-flex-parent
= render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
- unless diff_file.submodule?
- .file-actions.hidden-xs
+ .file-actions-fixed.hidden-xs
- if blob_text_viewable?(blob)
= link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip btn-file-option', title: "Toggle comments for this file", disabled: @diff_notes_disabled do
= icon('comment')
--
GitLab