From 2aac32d22b8d16023cd82e8d453e7f69d2b78d67 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 10 Oct 2018 22:48:18 +0200
Subject: [PATCH] CSS and JS to hide long posts, with a show button, in the
activity feed making it pratical so scroll it.
---
.../src/javascript/apply/activity-feed.js | 17 +++++++++++++++++
.../src/sass/apply/components/_feed.scss | 17 +++++++++++++++++
.../src/sass/apply/components/_link.scss | 9 +++++++++
.../src/sass/public/components/_link.scss | 5 +++++
4 files changed, 48 insertions(+)
diff --git a/opentech/static_src/src/javascript/apply/activity-feed.js b/opentech/static_src/src/javascript/apply/activity-feed.js
index c7daabbb2..51ebf8839 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 93f8a6757..a3862c226 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 e7954b6ac..0926493a3 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 b22db3c61..8f189fc7c 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%;
--
GitLab