diff --git a/opentech/static_src/src/javascript/apply/activity-feed.js b/opentech/static_src/src/javascript/apply/activity-feed.js index c7daabbb2c779ffc34e0e6d58ac3b6a9307a8023..51ebf8839af492c2a2f17dea70d552a860852300 100644 --- a/opentech/static_src/src/javascript/apply/activity-feed.js +++ b/opentech/static_src/src/javascript/apply/activity-feed.js @@ -29,4 +29,21 @@ // Scroll to the top of the activity feed $('.js-to-top').click(() => $('.js-activity-feed').animate({scrollTop: 0}, 250)); + // Collaps long comments in activity feed. + $('.feed__item').each(function () { + var $content = $(this).find('.feed__content'); + var content_height = $content.outerHeight(); + if (content_height > 300) { + $(this).addClass('feed__item--collaps'); + $(this).append('<p class="feed__show-button"><a class="link link--button link--button--narrow" href="#">Show</a></p>'); + } + }); + + // Allow users to show full comment. + $('.feed__show-button').find('.link').click(function (e) { + e.preventDefault(); + $(this).parents('.feed__item').removeClass('feed__item--collaps'); + $(this).parent().detach(); + }); + })(jQuery); diff --git a/opentech/static_src/src/sass/apply/components/_feed.scss b/opentech/static_src/src/sass/apply/components/_feed.scss index 93f8a6757bfa1a5c309c3432ec2568b8f9be39f0..a3862c226e0306734e1a663e54e95f412e6e5e6e 100644 --- a/opentech/static_src/src/sass/apply/components/_feed.scss +++ b/opentech/static_src/src/sass/apply/components/_feed.scss @@ -9,6 +9,12 @@ &:last-child { border-bottom: 0; } + + &--collaps { + position: relative; + max-height: 300px; + overflow: hidden; + } } &__label { @@ -146,4 +152,15 @@ &__company { @extend %h6; } + + &__show-button { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + text-align: center; + margin: 0; + padding: 3em 0 .5em; + background-image: linear-gradient(to bottom, $color--white-10, $color--white); + } } diff --git a/opentech/static_src/src/sass/apply/components/_link.scss b/opentech/static_src/src/sass/apply/components/_link.scss index e7954b6ac80b56ba8840e85f6c0fdbb1d069c79d..0926493a329d393db42699dce9d0b10e08a46e10 100644 --- a/opentech/static_src/src/sass/apply/components/_link.scss +++ b/opentech/static_src/src/sass/apply/components/_link.scss @@ -1,4 +1,13 @@ .link { + &--button { + @include button($color--light-blue, $color--dark-blue); + display: inline-block; + + &--narrow { + @include button--narrow; + } + } + &--underlined { text-decoration: underline; } diff --git a/opentech/static_src/src/sass/public/components/_link.scss b/opentech/static_src/src/sass/public/components/_link.scss index b22db3c619db81d063c13807b65038ce776cbbac..8f189fc7c308f0787f24a5af88c0aa333dfc465d 100644 --- a/opentech/static_src/src/sass/public/components/_link.scss +++ b/opentech/static_src/src/sass/public/components/_link.scss @@ -3,6 +3,11 @@ @include button($color--light-blue, $color--dark-blue); display: inline-block; + + &--narrow { + @include button--narrow; + } + &__stretch { width: 100%;