Align header items; put retry button back in sidebar on mobile

3 files changed, 44 insertions, 17 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index b40ecd09e09..48e25b3312e 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -52,10 +52,21 @@
 
 .build-header {
   position: relative;
-  padding-right: 40px;
+  padding: 0;
+  display: flex;
+  min-height: 58px;
+  align-items: center;
 
-  @media (min-width: $screen-sm-min) {
-    padding-right: 0;
+  @media (max-width: $screen-sm-max) {
+    padding-right: 40px;
+
+    .btn-primary {
+      display: none;
+    }
+  }
+
+  .header-content {
+    flex: 1;
   }
 
   a {
@@ -135,6 +146,19 @@
     }
   }
 
+  .retry-link {
+    color: $gl-link-color;
+    display: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    @media (max-width: $screen-sm-max) {
+      display: inline-block;
+    }
+  }
+
   .stage-item {
     cursor: pointer;
 
diff --git a/app/views/projects/builds/_header.html.haml b/app/views/projects/builds/_header.html.haml
index c276734a2e6..ec20d1876d1 100644
--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/builds/_header.html.haml
@@ -1,18 +1,19 @@
 .content-block.build-header
-  = ci_status_with_icon(@build.status)
-  Build
-  %strong ##{@build.id}
-  for commit
-  = link_to ci_status_path(@build.pipeline) do
-    %strong= @build.pipeline.short_sha
-  from
-  = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
-    %code
-      = @build.ref
-  - if @build.user
-    = render "user"
-  = time_ago_with_tooltip(@build.created_at)
+  .header-content
+    = ci_status_with_icon(@build.status)
+    Build
+    %strong ##{@build.id}
+    for commit
+    = link_to ci_status_path(@build.pipeline) do
+      %strong= @build.pipeline.short_sha
+    from
+    = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
+      %code
+        = @build.ref
+    - if @build.user
+      = render "user"
+    = time_ago_with_tooltip(@build.created_at)
   - if can?(current_user, :update_build, @build) && @build.retryable?
-    = link_to "Retry", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-white pull-right', method: :post
+    = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-primary pull-right', method: :post
   %button.btn.btn-default.pull-right.visible-xs-block.visible-sm-block.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index 2835206ccfa..b1053028279 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -43,6 +43,8 @@
     .block{ class: ("block-first" if !@build.coverage && !(can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?))) }
       .title
         Build details
+        - if can?(current_user, :update_build, @build) && @build.retryable?
+          = link_to "Retry", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
       - if @build.merge_request
         %p.build-detail-row
           %span.build-light-text Merge Request: