From eb55ac7d4d13a2c404d24c68cef10675ce29cf3c Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Wed, 21 Sep 2016 01:45:39 +0100
Subject: [PATCH] Added final changes from handover
---
.../stylesheets/framework/variables.scss | 5 +++
app/assets/stylesheets/pages/pipelines.scss | 38 +++++++++++--------
.../projects/commit/_pipeline_stage.html.haml | 2 +-
.../commit/_pipeline_status_group.html.haml | 17 ++++-----
4 files changed, 36 insertions(+), 26 deletions(-)
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 14ec310de2d..4c34ed3ebf7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -17,8 +17,10 @@ $white-normal: #ededed;
$white-dark: #ececec;
$gray-light: #fafafa;
+$gray-lighter: #f9f9f9;
$gray-normal: #f5f5f5;
$gray-dark: #ededed;
+$gray-darker: #eee;
$gray-darkest: #c9c9c9;
$green-light: #38ae67;
@@ -33,6 +35,8 @@ $blue-medium-light: #3498cb;
$blue-medium: #2f8ebf;
$blue-medium-dark: #2d86b4;
+$blue-light-transparent: rgba(44, 159, 216, 0.05);
+
$orange-light: #fc8a51;
$orange-normal: #e75e40;
$orange-dark: #ce5237;
@@ -91,6 +95,7 @@ $table-text-gray: #8f8f8f;
$gl-font-size: 15px;
$gl-title-color: #333;
$gl-text-color: #5c5c5c;
+$gl-text-color-light: #8c8c8c;
$gl-text-green: #4a2;
$gl-text-red: #d12f19;
$gl-text-orange: #d90;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 547b9742dff..36c57f3ca30 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -342,11 +342,18 @@
.build {
border: 1px solid $border-color;
position: relative;
- padding: 8px 10px;
+ padding: 7px 10px 8px;
border-radius: 30px;
width: 186px;
margin-bottom: 10px;
+ &:hover {
+ background-color: $gray-lighter;
+ .dropdown-menu-toggle {
+ background-color: transparent;
+ }
+ }
+
&.playable {
background-color: $gray-light;
@@ -366,7 +373,6 @@
width: 164px;
.ci-status-icon {
-
svg {
height: 20px;
width: 20px;
@@ -385,41 +391,40 @@
}
a {
- color: $layout-link-gray;
+ color: $gl-text-color-light;
text-decoration: none;
-
- &:hover {
- .ci-status-text {
- text-decoration: underline;
- }
- }
}
.dropdown-menu-toggle {
border: none;
width: auto;
padding: 0;
- color: $layout-link-gray;
+ color: $gl-text-color-light;
.ci-status-text {
- width: 112px;
+ max-width: 112px;
+ width: auto;
}
}
.grouped-pipeline-dropdown {
padding: 8px 0;
- width: 168px;
+ width: 186px;
left: auto;
- right: -180px;
+ right: -197px;
top: -9px;
max-height: 245px;
overflow-y: scroll;
a {
- padding: 7px 8px;
+ color: $gl-text-color;
+ padding: 7px 8px 8px;
margin: 0 8px;
&:hover {
+ background-color: $blue-light-transparent;
+ border-radius: 3px;
+
.ci-status-text {
text-decoration: none;
}
@@ -465,9 +470,10 @@
}
.badge {
- background-color: $gray-dark;
- color: $layout-link-gray;
+ background-color: $gray-darker;
+ color: $gl-text-color-light;
font-weight: normal;
+ margin-left: $btn-xs-side-margin;
}
}
diff --git a/app/views/projects/commit/_pipeline_stage.html.haml b/app/views/projects/commit/_pipeline_stage.html.haml
index 23c5c51fbc2..68d42126bf6 100644
--- a/app/views/projects/commit/_pipeline_stage.html.haml
+++ b/app/views/projects/commit/_pipeline_stage.html.haml
@@ -10,5 +10,5 @@
- else
%li.build
.curve
- .build-content
+ .dropdown.inline.build-content{ type: 'button', data: { toggle: 'dropdown' } }
= render "projects/commit/pipeline_status_group", name: group_name, subject: grouped_statuses
diff --git a/app/views/projects/commit/_pipeline_status_group.html.haml b/app/views/projects/commit/_pipeline_status_group.html.haml
index 2064242ab54..bff65bff653 100644
--- a/app/views/projects/commit/_pipeline_status_group.html.haml
+++ b/app/views/projects/commit/_pipeline_status_group.html.haml
@@ -1,12 +1,11 @@
- group_status = CommitStatus.where(id: subject).status
%span.ci-status-icon
= render_status_with_link('build', group_status)
-.dropdown.inline
- %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
- %span.ci-status-text
- = name
- %span.badge= subject.size
- %ul.dropdown-menu.grouped-pipeline-dropdown
- .arrow
- - subject.each do |status|
- = render "projects/#{status.to_partial_path}_pipeline", subject: status
+%button.dropdown-menu-toggle
+ %span.ci-status-text
+ = name
+ %span.badge= subject.size
+%ul.dropdown-menu.grouped-pipeline-dropdown
+ .arrow
+ - subject.each do |status|
+ = render "projects/#{status.to_partial_path}_pipeline", subject: status
--
GitLab