Improves design when in mobile and tablet

2 files changed, 28 insertions, 14 deletions

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 {
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index ddd636c2b96..6a748690c79 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -27,11 +27,11 @@
       .content-block
         .container-fluid
           .row
-            .col-sm-3.col-xs-6.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-sm-3.col-xs-6.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
@@ -49,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}}