Commit 5218da57 authored by Sam Bigelow's avatar Sam Bigelow Committed by Fatih Acet

Correct file-header spacing on compare page

Use special classes when is_compare, similar to is_commit. Default
expectation is diff is being viewed in MR
parent a36eccb8
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
*/ */
.file-holder { .file-holder {
border: 1px solid $border-color; border: 1px solid $border-color;
border-top: 0;
border-radius: $border-radius-default; border-radius: $border-radius-default;
&.file-holder-no-border { &.file-holder-no-border {
...@@ -328,6 +329,7 @@ span.idiff { ...@@ -328,6 +329,7 @@ span.idiff {
justify-content: space-between; justify-content: space-between;
background-color: $gray-light; background-color: $gray-light;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
border-top: 1px solid $border-color;
padding: 5px $gl-padding; padding: 5px $gl-padding;
margin: 0; margin: 0;
border-radius: $border-radius-default $border-radius-default 0 0; border-radius: $border-radius-default $border-radius-default 0 0;
......
...@@ -490,6 +490,7 @@ $builds-trace-bg: #111; ...@@ -490,6 +490,7 @@ $builds-trace-bg: #111;
*/ */
$commit-max-width-marker-color: rgba(0, 0, 0, 0); $commit-max-width-marker-color: rgba(0, 0, 0, 0);
$commit-message-text-area-bg: rgba(0, 0, 0, 0); $commit-message-text-area-bg: rgba(0, 0, 0, 0);
$commit-stat-summary-height: 36px;
/* /*
* Common * Common
...@@ -664,8 +665,14 @@ $priority-label-empty-state-width: 114px; ...@@ -664,8 +665,14 @@ $priority-label-empty-state-width: 114px;
Issues Analytics Issues Analytics
*/ */
$issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15); $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
/* /*
Merge Requests Merge Requests
*/ */
$mr-tabs-height: 51px; $mr-tabs-height: 51px;
$mr-version-controls-height: 56px; $mr-version-controls-height: 56px;
/*
Compare Branches
*/
$compare-branches-sticky-header-height: 68px;
...@@ -7,22 +7,13 @@ ...@@ -7,22 +7,13 @@
cursor: pointer; cursor: pointer;
@media (min-width: map-get($grid-breakpoints, md)) { @media (min-width: map-get($grid-breakpoints, md)) {
$mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: $mr-version-controls-height + $header-height + $mr-tabs-height; top: $mr-file-header-top;
margin-left: -1px;
border-left: 1px solid $border-color;
z-index: 102; z-index: 102;
&.is-commit {
top: $header-height + 36px;
.with-performance-bar & {
top: $header-height + 36px + $performance-bar-height;
}
}
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -35,7 +26,23 @@ ...@@ -35,7 +26,23 @@
} }
.with-performance-bar & { .with-performance-bar & {
top: $header-height + $performance-bar-height + $mr-version-controls-height + $mr-tabs-height; top: $mr-file-header-top + $performance-bar-height;
}
&.is-commit {
top: $header-height + $commit-stat-summary-height;
.with-performance-bar & {
top: $header-height + $commit-stat-summary-height + $performance-bar-height;
}
}
&.is-compare {
top: $header-height + $compare-branches-sticky-header-height;
.with-performance-bar & {
top: $performance-bar-height + $header-height + $compare-branches-sticky-header-height;
}
} }
} }
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.container-fluid{ class: [limited_container_width, container_class] } .container-fluid{ class: [limited_container_width, container_class] }
= render "commit_box" = render "commit_box"
= render "ci_menu" = render "ci_menu"
= render "projects/diffs/diffs", diffs: @diffs, environment: @environment, is_commit: true = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-commit"
.limited-width-notes .limited-width-notes
= render "shared/notes/notes_with_form", :autocomplete => true = render "shared/notes/notes_with_form", :autocomplete => true
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
- if @commits.present? - if @commits.present?
= render "projects/commits/commit_list" = render "projects/commits/commit_list"
= render "projects/diffs/diffs", diffs: @diffs, environment: @environment = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-compare"
- else - else
.card.bg-light .card.bg-light
.center .center
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- show_whitespace_toggle = local_assigns.fetch(:show_whitespace_toggle, true) - show_whitespace_toggle = local_assigns.fetch(:show_whitespace_toggle, true)
- can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project) - can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project)
- diff_files = diffs.diff_files - diff_files = diffs.diff_files
- is_commit = local_assigns.fetch(:is_commit, false) - diff_page_context = local_assigns.fetch(:diff_page_context, nil)
.content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
.files-changed-inner .files-changed-inner
...@@ -25,4 +25,4 @@ ...@@ -25,4 +25,4 @@
= render 'projects/diffs/warning', diff_files: diffs = render 'projects/diffs/warning', diff_files: diffs
.files{ data: { can_create_note: can_create_note } } .files{ data: { can_create_note: can_create_note } }
= render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, is_commit: is_commit } = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, diff_page_context: diff_page_context }
- environment = local_assigns.fetch(:environment, nil) - environment = local_assigns.fetch(:environment, nil)
- is_commit = local_assigns.fetch(:is_commit, false) - diff_page_context = local_assigns.fetch(:diff_page_context, nil)
- file_hash = hexdigest(diff_file.file_path) - file_hash = hexdigest(diff_file.file_path)
- image_diff = diff_file.rich_viewer && diff_file.rich_viewer.partial_name == 'image' - image_diff = diff_file.rich_viewer && diff_file.rich_viewer.partial_name == 'image'
- image_replaced = diff_file.old_content_sha && diff_file.old_content_sha != diff_file.content_sha - image_replaced = diff_file.old_content_sha && diff_file.old_content_sha != diff_file.content_sha
.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_file.content_sha) } .diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_file.content_sha) }
.js-file-title.file-title-flex-parent{ class: is_commit ? "is-commit" : "" } .js-file-title.file-title-flex-parent{ class: diff_page_context }
.file-header-content .file-header-content
= render "projects/diffs/file_header", diff_file: diff_file, url: "##{file_hash}" = render "projects/diffs/file_header", diff_file: diff_file, url: "##{file_hash}"
......
---
title: Correct spacing for comparison page
merge_request: !24783
author:
type: fixed
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