kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use flexbox instead of media queries

Browse source 
Move CSS to correct file
This commit is contained in:
Filipa Lacerda 2017-01-18 18:56:45 +01:00 committed by Annabel Dunstone Gray
parent 28b4407bde
commit 2bb2544eca
3 changed files with 36 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/assets/stylesheets/framework/files.scss
View file

@ -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;
}
}
}

72
app/assets/stylesheets/pages/diff.scss
View file

@ -48,15 +48,6 @@
.diff-toggle-caret { .diff-toggle-caret {
padding-right: 6px; 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 { .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;
}
}
}

4
app/views/projects/diffs/_file.html.haml
View file

@ -1,9 +1,9 @@
.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) } .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}" = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
- unless diff_file.submodule? - unless diff_file.submodule?
.file-actions.hidden-xs .file-actions-fixed.hidden-xs
- if blob_text_viewable?(blob) - 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 = 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') = icon('comment')