CSS and JS to hide long posts, with a show button, in the activity feed making...

CSS and JS to hide long posts, with a show button, in the activity feed making it pratical so scroll it.

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);

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);
+    }
 }

opentech/static_src/src/sass/apply/components/_link.scss

 .link {
+    &--button {
+        @include button($color--light-blue, $color--dark-blue);
+        display: inline-block;
+
+        &--narrow {
+            @include button--narrow;
+        }
+    }
+
     &--underlined {
         text-decoration: underline;
     }

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%;