Merge branch 'filipa-22444' into 'master'

Makes Cycle analytics mobile friendly

## What does this MR do?
Makes Cycle analytics page mobile friendly

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?
Cycle analytics page was not mobile friendly

## Screenshots (if relevant)
![optionB](/uploads/a1d7f2f4db100e1a8aa76c0156ef8641/optionB.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
fixes #22444

See merge request !6482

3 files changed, 59 insertions, 28 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 2f5e3ec8e44..14ec310de2d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -270,6 +270,12 @@ $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: $gray-light;
 
 /*
+ *  Cycle Analytics
+ */
+$cycle-analytics-box-padding: 30px;
+$cycle-analytics-box-text-color: #8c8c8c;
+
+/*
  * Personal Access Tokens
  */
 $personal-access-tokens-disabled-label-color: #bbb;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 21e19c97632..778471a34d7 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -1,6 +1,6 @@
 #cycle-analytics {
   margin: 24px auto 0;
-  width: 800px;
+  max-width: 800px;
   position: relative;
 
   .panel {
@@ -9,10 +9,18 @@
       padding: 24px 0;
       border-bottom: none;
       position: relative;
+      
+      @media (max-width: $screen-sm-min) {
+        padding: 6px 0 24px;
+      } 
     }
 
     .column {
       text-align: center;
+      
+      @media (max-width: $screen-sm-min) {
+        padding: 15px 0;
+      }
 
       .header {
         font-size: 30px;
@@ -28,11 +36,14 @@
 
       &:last-child {
         text-align: right;
+        
+        @media (max-width: $screen-sm-min) {
+          text-align: center;
+        }
       }
     }
 
     .dropdown {
-      position: relative;
       top: 13px;
     }
   }
@@ -40,7 +51,7 @@
   .bordered-box {
     border: 1px solid $border-color;
     @include border-radius($border-radius-default);
-    position: relative;
+  
   }
 
   .content-list {
@@ -60,9 +71,15 @@
           line-height: 19px;
           font-size: 15px;
           font-weight: 600;
+          color: $gl-title-color;
         }
-        &:text {
-          color: #8c8c8c;
+        
+        &.text {
+          color: $layout-link-gray;
+          
+          &.value-col {
+            color: $gl-title-color;
+          }
         }
       }
     }
@@ -71,7 +88,9 @@
       text-align: right;
 
       span {
-        line-height: 42px;
+        position: relative;
+        vertical-align: middle;
+        top: 3px;
       }
     }
   }
@@ -82,21 +101,25 @@
 
     .dismiss-icon {
       position: absolute;
-      right: $gl-padding;
+      right: $cycle-analytics-box-padding;
       cursor: pointer;
       color: #b2b2b2;
     }
 
-    svg {
-      margin: 0 20px;
-      float: left;
-      width: 136px;
-      height: 136px;
+    .svg-container {
+      text-align: center;
+      
+      svg {
+        width: 136px;
+        height: 136px;
+      }
     }
-
+    
     .inner-content {
-      width: 480px;
-      float: left;
+      @media (max-width: $screen-sm-min) {
+        padding: 0 28px;
+        text-align: center;
+      }
 
       h4 {
         color: $gl-text-color;
@@ -104,7 +127,7 @@
       }
 
       p {
-        color: #8c8c8c;
+        color: $cycle-analytics-box-text-color;
         margin-bottom: $gl-padding;
       }
     }
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 5dcb2a17873..6a748690c79 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -2,18 +2,20 @@
 - page_title "Cycle Analytics"
 = render "projects/pipelines/head"
 
-#cycle-analytics{"v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project)}}
+#cycle-analytics{class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project)}}
 
   .bordered-box.landing.content-block{"v-if" => "!isHelpDismissed"}
     = icon('times', class: 'dismiss-icon', "@click": "dismissLanding()")
-    = 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.
+    .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.
 
-      = link_to "Read more",  help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
+        = link_to "Read more",  help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
 
   = icon("spinner spin", "v-show" => "isLoading")
 
@@ -25,11 +27,11 @@
       .content-block
         .container-fluid
           .row
-            .col-xs-3.column{"v-for" => "item in summary"}
+            .col-sm-3.col-xs-12.column{"v-for" => "item in summary"}
               %h3.header {{item.value}}
               %p.text {{item.title}}
 
-            .col-xs-3.column
+            .col-sm-3.col-xs-12.column
               .dropdown.inline.js-ca-dropdown
                 %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"}
                   %span.dropdown-label Last 30 days
@@ -47,11 +49,11 @@
         %li{"v-for" => "item in stats"}
           .container-fluid
             .row
-              .col-xs-10.title-col
+              .col-xs-8.title-col
                 %p.title
                   {{item.title}}
                 %p.text
                   {{item.description}}
-              .col-xs-2.value-col
+              .col-xs-4.value-col
                 %span
                   {{item.value}}