Commit f8857c63 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch '21126-pipeline-graph-updates' into 'master'

Curved lines at top of pipeline graph

#### What does this MR do?
Adds curved lines to second-child of each column
## Are there points in the code the reviewer needs to double check?

#### Why was this MR needed?
To match the mockup

#### What are the relevant issue numbers?
Closes #21126 

#### Screenshots (if relevant)
![Screen_Shot_2016-08-26_at_9.31.49_AM](/uploads/318d3df4ce909daa0ef8ea8d989211c4/Screen_Shot_2016-08-26_at_9.31.49_AM.png)

See merge request !6033
parents 6e584f46 a2be0e59
...@@ -273,7 +273,7 @@ ...@@ -273,7 +273,7 @@
.stage-column { .stage-column {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-right: 50px; margin-right: 65px;
li { li {
list-style: none; list-style: none;
...@@ -334,9 +334,9 @@ ...@@ -334,9 +334,9 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -54px; right: -69px;
border-top: 2px solid $border-color; border-top: 2px solid $border-color;
width: 54px; width: 69px;
height: 1px; height: 1px;
} }
} }
...@@ -356,22 +356,25 @@ ...@@ -356,22 +356,25 @@
&::after { &::after {
right: -20px; right: -20px;
border-right: 2px solid $border-color; border-right: 2px solid $border-color;
border-radius: 0 0 50px; border-radius: 0 0 15px;
} }
// Left connecting curves // Left connecting curves
&::before { &::before {
left: -20px; left: -20px;
border-left: 2px solid $border-color; border-left: 2px solid $border-color;
border-radius: 0 0 0 50px; border-radius: 0 0 0 15px;
} }
} }
// Connect second build to first build with smaller curved line // Connect second build to first build with smaller curved line
&:nth-child(2) { &:nth-child(2) {
&::after, &::before { &::after, &::before {
height: 45px; height: 29px;
top: -26px; top: -10px;
}
.curve {
display: block;
} }
} }
} }
...@@ -390,6 +393,12 @@ ...@@ -390,6 +393,12 @@
border: none; border: none;
} }
} }
// Remove opposite curve
.curve {
&::before {
display: none;
}
}
} }
} }
...@@ -401,6 +410,39 @@ ...@@ -401,6 +410,39 @@
border: none; border: none;
} }
} }
// Remove opposite curve
.curve {
&::after {
display: none;
}
}
}
}
// Curve first child connecting lines in opposite direction
.curve {
display: none;
&::before,
&::after {
content: '';
width: 21px;
height: 25px;
position: absolute;
top: -28.5px;
border-top: 2px solid $border-color;
}
&::after {
left: -39px;
border-right: 2px solid $border-color;
border-radius: 0 15px;
}
&::before {
right: -39px;
border-left: 2px solid $border-color;
border-radius: 15px 0 0;
} }
} }
} }
......
- is_playable = subject.playable? && can?(current_user, :update_build, @project) - is_playable = subject.playable? && can?(current_user, :update_build, @project)
%li.build{class: ("playable" if is_playable)} %li.build{class: ("playable" if is_playable)}
.curve
.build-content .build-content
- if is_playable - if is_playable
= link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
......
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