Commit 002670ec authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Finish styling commits view

parent 0a848266
...@@ -15,6 +15,11 @@ ...@@ -15,6 +15,11 @@
return $("body").on("click", ".js-details-expand", function(e) { return $("body").on("click", ".js-details-expand", function(e) {
$(this).next('.js-details-content').removeClass("hide"); $(this).next('.js-details-content').removeClass("hide");
$(this).hide(); $(this).hide();
var truncatedItem = $(this).siblings('.js-details-short');
if (truncatedItem.length) {
truncatedItem.addClass("hide");
}
return e.preventDefault(); return e.preventDefault();
}); });
}); });
......
...@@ -90,6 +90,8 @@ $table-border-color: #f0f0f0; ...@@ -90,6 +90,8 @@ $table-border-color: #f0f0f0;
$background-color: $gray-light; $background-color: $gray-light;
$dark-background-color: #f5f5f5; $dark-background-color: #f5f5f5;
$table-text-gray: #8f8f8f; $table-text-gray: #8f8f8f;
$widget-expand-item: #e8f2f7;
$widget-inner-border: #eef0f2;
/* /*
* Text * Text
......
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
&.commit-info-row-header { &.commit-info-row-header {
line-height: 34px; line-height: 34px;
padding: 10px 0;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
margin-bottom: 0; margin-bottom: 0;
...@@ -80,6 +81,12 @@ ...@@ -80,6 +81,12 @@
} }
} }
.js-details-expand {
&:hover {
text-decoration: none;
}
}
.commit-info-widget { .commit-info-widget {
background: $background-color; background: $background-color;
color: $gl-gray; color: $gl-gray;
...@@ -90,9 +97,40 @@ ...@@ -90,9 +97,40 @@
padding: $gl-padding; padding: $gl-padding;
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $widget-inner-border;
}
&.branch-info {
.monospace,
.commit-info {
margin-left: 4px;
}
} }
} }
.icon-container {
display: inline-block;
margin-right: 8px;
svg {
position: relative;
top: 2px;
height: 16px;
width: 16px;
}
&.commit-icon {
svg {
path {
fill: $gl-text-color;
}
}
}
}
.label.label-gray {
background-color: $widget-expand-item;
}
} }
.ci-status-link { .ci-status-link {
...@@ -154,6 +192,9 @@ ...@@ -154,6 +192,9 @@
} }
.commit-action-buttons { .commit-action-buttons {
position: relative;
top: -1px;
i { i {
color: $gl-icon-color; color: $gl-icon-color;
font-size: 13px; font-size: 13px;
......
...@@ -33,21 +33,22 @@ ...@@ -33,21 +33,22 @@
color: $gl-dark-link-color; color: $gl-dark-link-color;
} }
.text-expander { }
display: inline-block;
background: $gray-light; .text-expander {
color: $gl-placeholder-color; display: inline-block;
padding: 0 5px; background: $gray-light;
cursor: pointer; color: $gl-placeholder-color;
border: 1px solid $border-gray-dark; padding: 0 5px;
border-radius: $border-radius-default; cursor: pointer;
margin-left: 5px; border: 1px solid $border-gray-dark;
line-height: 1; border-radius: $border-radius-default;
margin-left: 5px;
&:hover { line-height: 1;
background-color: darken($gray-light, 10%);
text-decoration: none; &:hover {
} background-color: darken($gray-light, 10%);
text-decoration: none;
} }
} }
......
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
} }
.ci_widget { .ci_widget {
border-bottom: 1px solid #eef0f2; border-bottom: 1px solid $widget-inner-border;
svg { svg {
margin-right: 4px; margin-right: 4px;
......
.commit-info-row.commit-info-row-header .commit-info-row.commit-info-row-header
%span.hidden-xs.hidden-sm Commit %span.hidden-xs.hidden-sm Commit
= link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm" = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace js-details-short"
= link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace visible-xs-inline visible-sm-inline" = link_to("#", class: "js-details-expand") do
%span.text-expander
\...
%span.js-details-content.hide
= link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
= clipboard_button(clipboard_text: @commit.id) = clipboard_button(clipboard_text: @commit.id)
%span.hidden-xs authored %span.hidden-xs authored
#{time_ago_with_tooltip(@commit.authored_date)} #{time_ago_with_tooltip(@commit.authored_date)}
...@@ -53,6 +57,8 @@ ...@@ -53,6 +57,8 @@
.commit-info-widget .commit-info-widget
.widget-row.branch-info .widget-row.branch-info
.icon-container.commit-icon
= custom_icon("icon_commit")
%span.cgray= pluralize(@commit.parents.count, "parent") %span.cgray= pluralize(@commit.parents.count, "parent")
- @commit.parents.each do |parent| - @commit.parents.each do |parent|
= link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace" = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
...@@ -61,12 +67,14 @@ ...@@ -61,12 +67,14 @@
.widget-row.pipeline-info .widget-row.pipeline-info
- if @commit.status - if @commit.status
= ci_icon_for_status(@commit.status) .icon-container
Builds for = ci_icon_for_status(@commit.status)
= pluralize(@commit.pipelines.count, 'pipeline') Pipeline
= link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status-link ci-status-icon-#{@commit.status}" do = link_to "##{@commit.pipelines.last.id}", pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "monospace"
%span.ci-status-label for
= ci_label_for_status(@commit.status) = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
%span.ci-status-label
= ci_label_for_status(@commit.status)
in in
= time_interval_in_words @commit.pipelines.total_duration = time_interval_in_words @commit.pipelines.total_duration
......
...@@ -3,8 +3,7 @@ ...@@ -3,8 +3,7 @@
= render "projects/commits/head" = render "projects/commits/head"
%div{ class: container_class } %div{ class: container_class }
.prepend-top-default = render "commit_box"
= render "commit_box"
= render "ci_menu" = render "ci_menu"
= render "builds" = render "builds"
- page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits" - page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits"
.prepend-top-default = render "commit_box"
= render "commit_box"
= render "ci_menu" = render "ci_menu"
= render "pipelines_list", pipelines: @ci_pipelines = render "pipelines_list", pipelines: @ci_pipelines
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
= render "projects/commits/head" = render "projects/commits/head"
%div{ class: container_class } %div{ class: container_class }
.prepend-top-default = render "commit_box"
= render "commit_box"
- if @commit.status - if @commit.status
= render "ci_menu" = render "ci_menu"
- else - else
......
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