From 6f7933b34947984bf46b6a1f4e9e878199bf48d3 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 5 May 2017 10:22:59 +0100
Subject: Fixed cycle analytics intro box styling regression

Closes #31844
---
 app/assets/stylesheets/pages/cycle_analytics.scss | 19 +++++++++++++++++++
 app/views/projects/cycle_analytics/show.html.haml | 22 +++++++++++-----------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 52bbb753af3..d29944207c5 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -3,6 +3,25 @@
   margin: 24px auto 0;
   position: relative;
 
+  .landing {
+    margin-top: 10px;
+
+    .inner-content {
+      white-space: normal;
+
+      h4,
+      p {
+        margin: 7px 0 0;
+        max-width: 480px;
+        padding: 0 $gl-padding;
+
+        @media (max-width: $screen-sm-min) {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+
   .col-headers {
     ul {
       margin: 0;
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 819f29d3ca5..b158a81471c 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -9,17 +9,17 @@
 
 #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
-    .bordered-box.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
-      = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()")
-      .row
-        .col-sm-3.col-xs-12.svg-container
-          = custom_icon('icon_cycle_analytics_splash')
-        .col-sm-8.col-xs-12.inner-content
-          %h4
-            {{ __('Introducing Cycle Analytics') }}
-          %p
-            {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
-
+    .landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
+      %button.dismiss-button{ type: 'button', 'aria-label': 'Dismiss Cycle Analytics introduction box' }
+        = icon("times", "@click" => "dismissOverviewDialog()")
+      .svg-container
+        = custom_icon('icon_cycle_analytics_splash')
+      .inner-content
+        %h4
+          {{ __('Introducing Cycle Analytics') }}
+        %p
+          {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
+        %p
           = link_to _('Read more'), help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
   = icon("spinner spin", "v-show" => "isLoading")
   .wrapper{ "v-show" => "!isLoading && !hasError" }
-- 
cgit v1.2.1