Fix #995 - Stats row in the dashboard (mobile view)

Author: shizhouxing

app/directives/responsive-carousel/responsive-carousel.directive.js

@@ -51,7 +51,7 @@ import angular from 'angular'
             } else {
               // we don't need to build carousel for mobile as we show horizontal scroll
               // phone
-              buildCarouselSlide(2)
+              buildCarouselSlide(3)
             }
           }
 

assets/css/directives/responsive-carousel.scss

@@ -96,6 +96,10 @@
 
   .slide {
     display: inline-block;
+    
+    @media only screen and (max-width: 767px) {
+      display: block;
+    }
   }
 
 // .carousel-elem-list {
@@ -107,12 +111,17 @@
         position: absolute;
         top: 32px;
         left: -30px;
-        @include forward-slash(1px, 60px, 0, 2px, 30deg);
         background-color: $gray-light;
         @media only screen and (min-width: 768px) {
           top: 32px;
           left: -18px;
+          @include forward-slash(1px, 60px, 0, 2px, 30deg);
         }
+        @media only screen and (max-width: 767px) {
+          top: -30px;
+          left: 60px;
+          @include forward-slash(1px, 70px, 0, 2px, 90deg);
+        }        
       }
     }
   }
@@ -121,8 +130,8 @@
     display: inline-block;
     margin-right: 65px;
     padding: 20px 0;
+    width: 130px;
     @media only screen and (min-width: 768px) {
-      width: 130px;
       margin-right: 35px;
       padding: 30px 20px;
 

assets/css/profile/subtrack.scss

@@ -16,7 +16,7 @@
     margin: 30px auto 40px;
 
     .nav-right {
-      padding-top: 15px;
+      padding-top: 10px;
       padding-left: 15px;
       i:hover {
         cursor: pointer;
@@ -108,6 +108,13 @@
     }
   }
 
+  .page-state-header {
+    .page-info {
+      display: flex;
+      justify-content: center;
+    }
+  }  
+    
   .subtrack-stats {
     // @include module-l;
     width: 100%;
@@ -183,15 +190,15 @@
     h2.detailed {
       margin: 30px auto 0;
       text-align: center;
-      @include sofia-pro-medium;
-      font-size: 18px;
-      line-height: 21px;
-      font-weight: bold;
+      @include sofia-pro-regular;
+      font-size: 24px;
+      line-height: 30px;
       text-transform: uppercase;
     }
     ul.vertical-stats {
       width: 90%;
       margin: 0 auto;
+      margin-top: 30px;
       li {
         @include sofia-pro-regular;
         font-size: 15px;
@@ -329,10 +336,20 @@
   }
 }
 }
+
 @media (min-width: 768px) {
 .profile-subtrack-container {
 
   .content {
+    .page-info {
+      display: flex;
+      justify-content: center;
+    }    
+    
+    .nav-right {
+      padding-top: 15px;
+    }
+    
     .nav {
       display: flex;
       flex-direction: row;
@@ -544,3 +561,23 @@
   }
 
 }
+
+@media only screen and (max-width: 767px) {
+  .profile-subtrack-container {
+    .content {
+      .tc-carousel ul {
+        display: block;
+        height: auto;
+        padding-bottom: 40px;
+        
+        > li {
+          position: relative;
+          
+          .slide {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}