diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html index f11f7ecc09a5008f4fba8e037a421ea026cdb833..ea57258f2185d8008158625c5e81b4643e167730 100644 --- a/opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html +++ b/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 %} diff --git a/opentech/apply/funds/templates/funds/includes/rendered_answers.html b/opentech/apply/funds/templates/funds/includes/rendered_answers.html index 301e1820b640b35948f92e4f315f31917e038c6a..76d236a735b147a9c7136adb0aaced9221c9d6ab 100644 --- a/opentech/apply/funds/templates/funds/includes/rendered_answers.html +++ b/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> + diff --git a/opentech/static_src/src/javascript/apply/toggle-proposal-info.js b/opentech/static_src/src/javascript/apply/toggle-proposal-info.js new file mode 100644 index 0000000000000000000000000000000000000000..c877874ff57725497e7f3fc91f4c2559fc78bedb --- /dev/null +++ b/opentech/static_src/src/javascript/apply/toggle-proposal-info.js @@ -0,0 +1,24 @@ +(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); diff --git a/opentech/static_src/src/sass/apply/components/_grid.scss b/opentech/static_src/src/sass/apply/components/_grid.scss index f2196f68632d62f65512d353ed5ca064e947c2b1..2bde42f53eb61fab142a821ffaf33a7cc22a92db 100644 --- a/opentech/static_src/src/sass/apply/components/_grid.scss +++ b/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; } diff --git a/opentech/static_src/src/sass/apply/components/_link.scss b/opentech/static_src/src/sass/apply/components/_link.scss index 35e89799fd7bd152bf6f498ca47b9ac1b828e1aa..6651beb0812421c8eb64063b98f723af2f49840b 100644 --- a/opentech/static_src/src/sass/apply/components/_link.scss +++ b/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); + } + } + } } diff --git a/opentech/static_src/src/sass/apply/components/_rich-text.scss b/opentech/static_src/src/sass/apply/components/_rich-text.scss index 8a0211b4450779c46b90b04dfe3bdb7e7bdd23c1..146e94ccae30c468efb74991a052ea649090404f 100644 --- a/opentech/static_src/src/sass/apply/components/_rich-text.scss +++ b/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;