From 88ffd7db77b25c9ab1cf4a883670bf2e3e518c25 Mon Sep 17 00:00:00 2001 From: Zhouxing Shi Date: Wed, 15 Mar 2017 23:54:24 +0800 Subject: [PATCH 1/2] Fix #995 - Stats row in the dashboard (mobile view) --- .../responsive-carousel.directive.js | 2 +- .../css/directives/responsive-carousel.scss | 13 ++++- assets/css/profile/subtrack.scss | 47 +++++++++++++++++-- 3 files changed, 54 insertions(+), 8 deletions(-) diff --git a/app/directives/responsive-carousel/responsive-carousel.directive.js b/app/directives/responsive-carousel/responsive-carousel.directive.js index 32869d152..4d23405f9 100644 --- a/app/directives/responsive-carousel/responsive-carousel.directive.js +++ b/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) } } diff --git a/assets/css/directives/responsive-carousel.scss b/assets/css/directives/responsive-carousel.scss index 37ce68bd8..25657f9c0 100644 --- a/assets/css/directives/responsive-carousel.scss +++ b/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; diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index 9d057b84c..ec66d00ae 100644 --- a/assets/css/profile/subtrack.scss +++ b/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; + } + } + } + } + } +} \ No newline at end of file From 94512890760a5f84ebb33848af19b78daf4c8fb5 Mon Sep 17 00:00:00 2001 From: Zhouxing Shi Date: Fri, 17 Mar 2017 23:05:16 +0800 Subject: [PATCH 2/2] Fix #995 - Stats row in the dashboard (mobile view) --- .../responsive-carousel.directive.js | 10 +-- .../css/directives/responsive-carousel.scss | 61 +++++++++++++------ assets/css/profile/subtrack.scss | 1 + 3 files changed, 45 insertions(+), 27 deletions(-) diff --git a/app/directives/responsive-carousel/responsive-carousel.directive.js b/app/directives/responsive-carousel/responsive-carousel.directive.js index 4d23405f9..e8be3b79b 100644 --- a/app/directives/responsive-carousel/responsive-carousel.directive.js +++ b/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) - } + } } diff --git a/assets/css/directives/responsive-carousel.scss b/assets/css/directives/responsive-carousel.scss index 25657f9c0..303230aec 100644 --- a/assets/css/directives/responsive-carousel.scss +++ b/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; diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index ec66d00ae..ac3cbaa51 100644 --- a/assets/css/profile/subtrack.scss +++ b/assets/css/profile/subtrack.scss @@ -572,6 +572,7 @@ > li { position: relative; + text-align: center; .slide { text-align: center;