diff --git a/app/directives/responsive-carousel/responsive-carousel.directive.js b/app/directives/responsive-carousel/responsive-carousel.directive.js index 32869d152..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(2) - } + } } diff --git a/assets/css/directives/responsive-carousel.scss b/assets/css/directives/responsive-carousel.scss index 37ce68bd8..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 { @@ -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; diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index 9d057b84c..ac3cbaa51 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,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; + } + } + } + } + } +} \ No newline at end of file