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

Author: shizhouxing

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

@@ -45,14 +45,10 @@ import angular from 'angular'
             } else if(width >= 1010) {
               // desktop
               buildCarouselSlide(5)
-            } else if(width < 1010 && width >= 768) {
-              // tablet
+            } else if(width < 1010) {
+              // tablet & mobile
               buildCarouselSlide(4)
-            } else {
-              // we don't need to build carousel for mobile as we show horizontal scroll
-              // phone
-              buildCarouselSlide(3)
-            }
+            } 
           }
 
 

assets/css/directives/responsive-carousel.scss

@@ -8,27 +8,30 @@
     margin: 0 auto;
     @media only screen and (max-width: 767px) {
       display: none;
+      width: auto;
     }
-    &[slide-count="1"] {
-      width: 170px;
-    }
-    &[slide-count="2"] {
-      width: 340px;
-    }
-    &[slide-count="3"] {
-      width: 510px;
-    }
-    &[slide-count="4"] {
-      width: 680px;
-    }
-    &[slide-count="5"] {
-      width: 850px;
-    }
-    &[slide-count="6"] {
-      width: 1020px;
-    }
-    &[slide-count="7"] {
-      width: 1190px;
+    @media only screen and (min-width: 768px) {
+      &[slide-count="1"] {
+        width: 170px;
+      }
+      &[slide-count="2"] {
+        width: 340px;
+      }
+      &[slide-count="3"] {
+        width: 510px;
+      }
+      &[slide-count="4"] {
+        width: 680px;
+      }
+      &[slide-count="5"] {
+        width: 850px;
+      }
+      &[slide-count="6"] {
+        width: 1020px;
+      }
+      &[slide-count="7"] {
+        width: 1190px;
+      }
     }
 
     li {
@@ -125,6 +128,24 @@
       }
     }
   }
+  
+  
+  ul[slide-count="3"] {
+    @media only screen and (min-width: 575px) {
+      .slide {
+        display: inline-block;
+      
+        &:not(:first-child) {
+          .carousel-elem:before {
+            top: 32px;
+            left: -18px;
+            @include forward-slash(1px, 60px, 0, 2px, 30deg);
+          }    
+        } 
+      }
+    }
+  }  
+  
   .carousel-elem {
     position: relative;
     display: inline-block;

assets/css/profile/subtrack.scss

@@ -572,6 +572,7 @@
 
         > li {
           position: relative;
+          text-align: center;
 
           .slide {
             text-align: center;