Merge pull request #1352 from OpenTechFund/feature/gh-1348-show-more

add show more block

opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html

@@ -56,4 +56,5 @@
     <script src="{% static 'js/apply/submission-text-cleanup.js' %}"></script>
     <script src="{% static 'js/apply/toggle-related.js' %}"></script>
     <script src="{% static 'js/apply/edit-comment.js' %}"></script>
+    <script src="{% static 'js/apply/toggle-proposal-info.js' %}"></script>
 {% endblock %}

opentech/apply/funds/templates/funds/includes/rendered_answers.html

@@ -25,6 +25,8 @@
         {{ object.get_address_display }}
     </div>
 </div>
-<div class="rich-text rich-text--answers">
+<a class="link--reveal-proposal js-toggle-propsoal-info" href="#">Show more</a>
+<div class="rich-text rich-text--answers rich-text--hidden js-rich-text-hidden">
     {{ object.output_answers }}
 </div>
+

opentech/static_src/src/javascript/apply/toggle-proposal-info.js

+(function ($) {
+
+    'use strict';
+
+    function toggleProposalInfo() {
+        $('.js-toggle-propsoal-info').click(function (e) {
+            e.preventDefault();
+            const activeClass = 'is-open';
+
+            if (this.innerHTML === 'Show more') {
+                this.innerHTML = 'Hide';
+            }
+            else {
+                this.innerHTML = 'Show more';
+            }
+
+            $(this).toggleClass(activeClass);
+            $('.js-rich-text-hidden').toggleClass(activeClass);
+        });
+    }
+
+    toggleProposalInfo();
+
+})(jQuery);

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

@@ -75,14 +75,12 @@
         }
 
         &--proposal-info {
-            padding-bottom: 30px;
-            margin: 0 0 30px;
-            border-bottom: 1px solid $color--mid-grey;
             grid-template-columns: 100%;
-            grid-gap: 10px; // sass-lint:disable-line no-misspelled-properties
+            grid-gap: 10px;
+            margin: 0 0 1rem;
 
             @include media-query(mob-landscape) {
-                margin: 0 0 30px;
+                margin: 0 0 1.5rem;
                 grid-template-columns: 1fr 1fr;
             }
 

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

@@ -229,4 +229,23 @@
         display: block;
         margin: 0 10px 30px;
     }
+
+    &--reveal-proposal {
+        display: flex;
+        align-items: center;
+        margin: 0 0 1rem;
+
+        &::before {
+            @include triangle(top, $color--dark-blue, 7px);
+            margin-right: .7rem;
+            transition: transform $transition;
+            transform: rotate(180deg);
+        }
+
+        &.is-open {
+            &::before {
+                transform: rotate(0);
+            }
+        }
+    }
 }

opentech/static_src/src/sass/apply/components/_rich-text.scss

@@ -20,6 +20,14 @@
         }
     }
 
+    &--hidden {
+        display: none;
+
+        &.is-open {
+            display: block;
+        }
+    }
+
     a {
         font-weight: $weight--bold;
         border-bottom: 1px solid transparent;