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

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(2)
-            }
+            } 
           }
 
 

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 {
@@ -96,6 +99,10 @@
 
   .slide {
     display: inline-block;
+
+    @media only screen and (max-width: 767px) {
+      display: block;
+    }
   }
 
 // .carousel-elem-list {
@@ -107,22 +114,45 @@
         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);
+        }        
       }
     }
   }
+
+
+  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;
     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,24 @@
   }
 
 }
+
+@media only screen and (max-width: 767px) {
+  .profile-subtrack-container {
+    .content {
+      .tc-carousel ul {
+        display: block;
+        height: auto;
+        padding-bottom: 40px;
+
+        > li {
+          position: relative;
+          text-align: center;
+
+          .slide {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}