Makes Cycle analytics mobile friendly

app/assets/stylesheets/framework/variables.scss

@@ -269,6 +269,13 @@ $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: $gray-light;
 
+/*
+ *  Cycle Analytics
+ */
+$cycle-analytics-box-padding: 30px;
+$cycle-analytics-box-margin-bottom: 16px;
+$cycle-analytics-box-text-color: #8c8c8c;
+
 /*
  * Personal Access Tokens
  */

app/assets/stylesheets/pages/cycle_analytics.scss

 #cycle-analytics {
   margin: 24px auto 0;
-  width: 800px;
+  max-width: 800px;
   position: relative;
 
   .panel {
@@ -32,15 +32,19 @@
     }
 
     .dropdown {
-      position: relative;
       top: 13px;
+      
+      @media (max-width: $screen-sm-min) {
+        right: 15px;
+        top: 30px;
+      }
     }
   }
 
   .bordered-box {
     border: 1px solid $border-color;
     @include border-radius($border-radius-default);
-    position: relative;
+  
   }
 
   .content-list {
@@ -62,7 +66,7 @@
           font-weight: 600;
         }
         &:text {
-          color: #8c8c8c;
+          color: $cycle-analytics-box-text-color;
         }
       }
     }
@@ -77,26 +81,31 @@
   }
 
   .landing {
-    margin-bottom: $gl-padding;
+    margin-bottom: $cycle-analytics-box-margin-bottom;
     overflow: hidden;
 
     .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;
+      text-align: center;
+      
+      @media (max-width: $screen-sm-min) {
+        padding: 0 28px;
+      }
 
       h4 {
         color: $gl-text-color;
@@ -104,8 +113,8 @@
       }
 
       p {
-        color: #8c8c8c;
-        margin-bottom: $gl-padding;
+        color: $cycle-analytics-box-text-color;
+        margin-bottom: $cycle-analytics-box-margin-bottom;
       }
     }
   }

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-6.column{"v-for" => "item in summary"}
               %h3.header {{item.value}}
               %p.text {{item.title}}
 
-            .col-xs-3.column
+            .col-sm-3.col-xs-6.column
               .dropdown.inline.js-ca-dropdown
                 %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"}
                   %span.dropdown-label Last 30 days