diff --git a/app/directives/responsive-carousel/responsive-carousel.directive.js b/app/directives/responsive-carousel/responsive-carousel.directive.js index 32869d152..00cf34486 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(7) } } diff --git a/assets/css/directives/distribution-graph.scss b/assets/css/directives/distribution-graph.scss index cce226949..3587b11f7 100644 --- a/assets/css/directives/distribution-graph.scss +++ b/assets/css/directives/distribution-graph.scss @@ -13,9 +13,17 @@ } .graph-title { - width: 960px; - padding-left: 45px; - text-align: left; + width:100%; + text-align: center; + justify-content: center; + @media (min-width: 768px) { + width: 960px; + padding-left: 45px; + text-align: left; + .text { + float: left; + } + } margin: auto; font-size: 28px; line-height: 35px; @@ -26,7 +34,11 @@ } .button-group { - float: right; + justify-content: center; + margin-top: 10px; + @media (min-width: 768px) { + float: right; + } display: block; button.tc-btn.tc-btn-s { background: #fff; diff --git a/assets/css/directives/page-state-header.directive.scss b/assets/css/directives/page-state-header.directive.scss index 73c268774..123abc730 100644 --- a/assets/css/directives/page-state-header.directive.scss +++ b/assets/css/directives/page-state-header.directive.scss @@ -113,3 +113,50 @@ } } } + +@media (max-width: 767px) { + .page-state-header { + padding: 3px 6px; + + header { + flex-direction: row; + align-items: center; + justify-content: space-between; + + + .page-info { + order: 2; + display: flex; + flex-direction: row; + margin-right: 10px; + h1 { + font-size: 20px; + line-height: 30px; + } + } + + .info { + order: 1; + display: flex; + flex-direction: row; + .pic { + img.profile-circle { + border-radius: 50%; + display: inline; + width: 30px; + height: 60px; + } + + .handle { + @include sofia-pro-medium; + font-size: 12px; + line-height: 29px; + } + } + } + + + } + } +} + diff --git a/assets/css/directives/responsive-carousel.scss b/assets/css/directives/responsive-carousel.scss index 37ce68bd8..012d7dfa0 100644 --- a/assets/css/directives/responsive-carousel.scss +++ b/assets/css/directives/responsive-carousel.scss @@ -3,38 +3,47 @@ .tc-carousel { ul { + + height:auto; + min-height:100px; + position:relative; + margin: 0 auto 20px; + padding-top: 10px; + padding-bottom: 40%; display: block; - height: 148px; + width:90%; + display: block; + margin: 0 auto; - @media only screen and (max-width: 767px) { - display: none; - } - &[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 { - div:last-child { - margin-right: 0; + @media only screen and (min-width: 768px) { + height: 148px; + &[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 { + div:last-child { + margin-right: 0; } + } } } @@ -118,10 +127,28 @@ } .carousel-elem { position: relative; - display: inline-block; - margin-right: 65px; + padding-top: 20px; + display: flex; + width: 100px; + + &:hover { + background-color: $gray-lightest; + + .title { + color: $gray-darkest; + border-bottom-color: $gray-darkest; + } + + p:last-child { + color: $gray-darkest; + } + } + + padding: 20px 0; @media only screen and (min-width: 768px) { + margin-right: 65px; + display: inline-block; width: 130px; margin-right: 35px; padding: 30px 20px; diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index 9d057b84c..3a3224492 100644 --- a/assets/css/profile/subtrack.scss +++ b/assets/css/profile/subtrack.scss @@ -181,7 +181,7 @@ justify-content: center; } h2.detailed { - margin: 30px auto 0; + margin: 50px auto 10px; text-align: center; @include sofia-pro-medium; font-size: 18px;