From 43701de5f29e501f4b4c27b59474eee4190b8378 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 22 Sep 2016 12:56:38 +0100
Subject: Makes Cycle analytics mobile friendly

---
 app/assets/stylesheets/framework/variables.scss   |  7 ++++
 app/assets/stylesheets/pages/cycle_analytics.scss | 41 ++++++++++++++---------
 2 files changed, 32 insertions(+), 16 deletions(-)

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 2f5e3ec8e44..0270da77450 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/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
  */
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 21e19c97632..1df89436d88 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 {
@@ -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;
       }
     }
   }
-- 
cgit v1.2.1


From 2c2b487dc377962e241c09b30bf722b32315224f Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 22 Sep 2016 19:48:23 +0100
Subject: Improvements after review

---
 app/assets/stylesheets/framework/variables.scss   | 1 -
 app/assets/stylesheets/pages/cycle_analytics.scss | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 0270da77450..14ec310de2d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -273,7 +273,6 @@ $calendar-unselectable-bg: $gray-light;
  *  Cycle Analytics
  */
 $cycle-analytics-box-padding: 30px;
-$cycle-analytics-box-margin-bottom: 16px;
 $cycle-analytics-box-text-color: #8c8c8c;
 
 /*
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 1df89436d88..fec34287e35 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -81,7 +81,7 @@
   }
 
   .landing {
-    margin-bottom: $cycle-analytics-box-margin-bottom;
+    margin-bottom: $gl-padding;
     overflow: hidden;
 
     .dismiss-icon {
@@ -114,7 +114,7 @@
 
       p {
         color: $cycle-analytics-box-text-color;
-        margin-bottom: $cycle-analytics-box-margin-bottom;
+        margin-bottom: $gl-padding;
       }
     }
   }
-- 
cgit v1.2.1


From be906c26367855257ba3fe8db668a8fe16174bd1 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 23 Sep 2016 12:11:29 +0100
Subject: Improves design when in mobile and tablet

---
 app/assets/stylesheets/pages/cycle_analytics.scss | 34 ++++++++++++++++-------
 1 file changed, 24 insertions(+), 10 deletions(-)

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index fec34287e35..778471a34d7 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -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,16 +36,15 @@
 
       &:last-child {
         text-align: right;
+        
+        @media (max-width: $screen-sm-min) {
+          text-align: center;
+        }
       }
     }
 
     .dropdown {
       top: 13px;
-      
-      @media (max-width: $screen-sm-min) {
-        right: 15px;
-        top: 30px;
-      }
     }
   }
 
@@ -64,9 +71,15 @@
           line-height: 19px;
           font-size: 15px;
           font-weight: 600;
+          color: $gl-title-color;
         }
-        &:text {
-          color: $cycle-analytics-box-text-color;
+        
+        &.text {
+          color: $layout-link-gray;
+          
+          &.value-col {
+            color: $gl-title-color;
+          }
         }
       }
     }
@@ -75,7 +88,9 @@
       text-align: right;
 
       span {
-        line-height: 42px;
+        position: relative;
+        vertical-align: middle;
+        top: 3px;
       }
     }
   }
@@ -101,10 +116,9 @@
     }
     
     .inner-content {
-      text-align: center;
-      
       @media (max-width: $screen-sm-min) {
         padding: 0 28px;
+        text-align: center;
       }
 
       h4 {
-- 
cgit v1.2.1