diff --git a/hypha/public/partner/tables.py b/hypha/public/partner/tables.py
index 98c1f48c447cad7041fe40edf906b9257f54fb65..1eb697e4ac191257c5a1db5fb39e449f8ee3a249 100644
--- a/hypha/public/partner/tables.py
+++ b/hypha/public/partner/tables.py
@@ -69,9 +69,14 @@ class InvestmentFilterAndSearch(InvestmentFilter):
query = filters.CharFilter(field_name='partner__title', lookup_expr='icontains', widget=forms.HiddenInput)
+def make_row_class(record):
+ css_class = 'all-investments-table__parent'
+ return css_class
+
+
class InvestmentTable(tables.Table):
"""Table for listing investments."""
- partner = tables.Column(verbose_name='Partner', linkify=True)
+ partner = tables.Column(verbose_name='Partner', linkify=True, attrs={'td': {'data-title-tooltip': lambda record: record.partner, 'class': 'js-title title'}})
year = tables.Column(verbose_name='Year')
status = tables.Column(accessor='partner__status', verbose_name='Status')
amount_committed = tables.Column(verbose_name='Amount committed (US$)')
@@ -81,6 +86,10 @@ class InvestmentTable(tables.Table):
order_by = ('-updated_at',)
fields = ('partner', 'year', 'status', 'amount_committed')
template_name = 'partner/table.html'
+ row_attrs = {
+ 'class': make_row_class,
+ 'data-record-id': lambda record: record.id,
+ }
attrs = {'class': 'all-investments-table'}
empty_text = _('No investments available')
diff --git a/hypha/public/partner/templates/partner/base_investments_table.html b/hypha/public/partner/templates/partner/base_investments_table.html
index a89fadd0247e3912b9b7fcfc6ea14d96fb72853b..c862b9cc03b25f0dffe8fb3851f465c30686a3db 100644
--- a/hypha/public/partner/templates/partner/base_investments_table.html
+++ b/hypha/public/partner/templates/partner/base_investments_table.html
@@ -20,6 +20,8 @@
{{ filter.form.media.js }}
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>
<script src="{% static 'js/apply/fancybox-global.js' %}"></script>
+ <script src="{% static 'js/public/all-investments-table.js' %}"></script>
+ <script src="{% static 'js/public/investment-tooltips.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js"></script>
<script src="{% static 'js/public/investment-filters.js' %}"></script>
diff --git a/hypha/public/partner/templates/partner/table.html b/hypha/public/partner/templates/partner/table.html
index 8780f70a655925491fb9e3036ee47fb15c258e36..ade0646348614e0533ee6f12daa4526272372361 100644
--- a/hypha/public/partner/templates/partner/table.html
+++ b/hypha/public/partner/templates/partner/table.html
@@ -10,6 +10,21 @@
{% endfor %}
</tr>
+ {% with investment=row.record %}
+ <tr class="all-investments-table__child" data-parent-id="{{ investment.id }}">
+ <td colspan="{{ table.columns|length }}">
+ <table class="investment-meta">
+ <tr class="investment-meta__row">
+ <th><h6 class="heading heading--normal heading--no-margin">Investment Description</h6></th>
+ </tr>
+ <tr class="investment-meta__row investment-meta__row--black">
+ <td>{{ investment.description }}</td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ {% endwith %}
+
{% endblock %}
{% block table.tbody.empty_text %}
diff --git a/hypha/static_src/src/javascript/public/all-investments-table.js b/hypha/static_src/src/javascript/public/all-investments-table.js
new file mode 100644
index 0000000000000000000000000000000000000000..218d48c5a45f5549a2babb18a8047413976aa99e
--- /dev/null
+++ b/hypha/static_src/src/javascript/public/all-investments-table.js
@@ -0,0 +1,20 @@
+(function ($) {
+
+ 'use strict';
+
+ // add the toggle arrow before the investments titles
+ $('.all-investments-table__parent td.title').prepend('<span class="all-investments-table__toggle js-toggle-investment"><span class="arrow"></span></span>');
+
+ // grab all the toggles
+ const children = Array.prototype.slice.call(
+ document.querySelectorAll('.js-toggle-investment')
+ );
+
+ // show/hide the investment child rows
+ children.forEach(function (child) {
+ child.addEventListener('click', (e) => {
+ $(e.target).closest('.all-investments-table__parent').toggleClass('is-expanded');
+ });
+ });
+
+})(jQuery);
diff --git a/hypha/static_src/src/javascript/public/investment-tooltips.js b/hypha/static_src/src/javascript/public/investment-tooltips.js
new file mode 100644
index 0000000000000000000000000000000000000000..0b81c0f242b0c81a6d409b9c16b2e70c7b94e6dc
--- /dev/null
+++ b/hypha/static_src/src/javascript/public/investment-tooltips.js
@@ -0,0 +1,26 @@
+(function ($) {
+
+ 'use strict';
+
+ function generateTooltips() {
+
+ // get the investments titles
+ const titles = Array.prototype.slice.call(document.querySelectorAll('.js-title'));
+
+ // if the tile has been truncated...
+ titles.forEach(function (title) {
+ if (title.textContent.indexOf('...') >= 0) {
+ addToolTip(title);
+ }
+ });
+
+ // ...add a tooltip class
+ function addToolTip(title) {
+ title.classList.add('has-tooltip');
+ }
+ }
+
+ // Add tooltips to truncated titles on investments overview table
+ generateTooltips();
+
+})(jQuery);
diff --git a/hypha/static_src/src/sass/public/components/_all-investments-table.scss b/hypha/static_src/src/sass/public/components/_all-investments-table.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8affd0aa24e1634855b84f374936cb1b342d7586
--- /dev/null
+++ b/hypha/static_src/src/sass/public/components/_all-investments-table.scss
@@ -0,0 +1,280 @@
+.all-investments-table {
+ @include table-ordering-styles;
+ $root: &;
+ font-size: 14px;
+
+
+ thead {
+ display: none;
+
+ @include media-query($table-breakpoint) {
+ display: table-header-group;
+ }
+
+ th {
+ &.reviews_stats { // sass-lint:disable-line class-name-format
+ color: $color--black-60;
+
+ div {
+ font-size: 13px;
+ }
+ }
+
+ // set column widths
+ &.title {
+ @include media-query($table-breakpoint) {
+ width: 130px;
+ }
+
+ @include media-query(desktop) {
+ width: 260px;
+ }
+ }
+
+ &.phase {
+ @include media-query($table-breakpoint) {
+ width: 150px;
+ }
+ }
+
+ &.selected {
+ @include table-checkbox;
+
+ @include media-query($table-breakpoint) {
+ width: 50px;
+ padding-right: 0;
+ }
+ }
+
+ &.comments {
+ @include media-query($table-breakpoint) {
+ width: 110px;
+ }
+ }
+ }
+
+ tr {
+ &:hover {
+ box-shadow: none;
+ }
+ }
+ }
+
+ tbody {
+ td {
+ // project title
+ &.title {
+ position: relative;
+ padding-top: 15px;
+ font-weight: $weight--bold;
+
+ @include media-query($table-breakpoint) {
+ display: flex;
+ align-items: center;
+ }
+
+ @include media-query(desktop) {
+ display: table-cell;
+ }
+
+ &.has-tooltip {
+ @include media-query($table-breakpoint) {
+ &::before {
+ position: absolute;
+ top: 75px;
+ left: 45px;
+ z-index: -1;
+ width: 200px;
+ padding: 5px;
+ font-size: 12px;
+ font-weight: $weight--normal;
+ white-space: normal;
+ background: $color--sky-blue;
+ border: 1px solid $color--marine;
+ content: attr(data-title-tooltip);
+ opacity: 0;
+ transition: opacity $transition;
+ }
+
+ &:hover {
+ &::before {
+ z-index: 10;
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ a {
+ color: $color--primary;
+
+ @include media-query($table-breakpoint) {
+ color: $color--dark-grey;
+ }
+ }
+ }
+
+ // project status label
+ &.phase {
+ span {
+ display: inline-block;
+ padding: 5px;
+ font-size: 13px;
+ font-weight: $weight--bold;
+ color: $color--marine;
+ text-align: center;
+ background-color: $color--sky-blue;
+
+ @include media-query($table-breakpoint) {
+ width: 100%;
+ }
+ }
+ }
+
+ // comments
+ &.comments {
+ display: none;
+
+ @include media-query($table-breakpoint) {
+ display: table-cell;
+ font-size: 13px;
+ text-align: center;
+ vertical-align: middle;
+ background: url('./../../images/quote-outline.svg') transparent no-repeat center center;
+ background-size: 24px;
+ }
+ }
+
+ &.reviews_stats { // sass-lint:disable-line class-name-format
+ display: none;
+
+ @include media-query($table-breakpoint) {
+ display: table-cell;
+ }
+ }
+
+ // batch action checkboxes
+ &.selected {
+ @include table-checkbox;
+ display: none;
+ padding-right: 0;
+
+ @include media-query($table-breakpoint) {
+ display: table-cell;
+ }
+ }
+
+ &.fund,
+ &.round,
+ &.screening_status { // sass-lint:disable-line class-name-format
+ -webkit-hyphens: auto; // sass-lint:disable-line no-vendor-prefixes
+ -ms-hyphens: auto; // sass-lint:disable-line no-vendor-prefixes
+ hyphens: auto;
+ }
+
+ // arrow to toggle project info - added via js
+ @include media-query($table-breakpoint) {
+ .arrow {
+ @include triangle(right, $color--primary, 6px);
+ position: relative;
+ display: inline-block;
+ margin-right: 15px;
+ transform: rotate(0);
+ transition: transform $transition;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+
+ > span.mobile-label { // sass-lint:disable-line force-element-nesting
+ display: inline-block;
+ width: 90px;
+
+ &.phase,
+ &.title {
+ display: none;
+ }
+
+ @include media-query($table-breakpoint) {
+ display: none;
+ }
+ }
+ }
+ }
+
+ &__parent {
+ &.is-expanded {
+ background-color: $color--mist;
+ border-bottom: 1px solid $color--light-mid-grey;
+
+ + #{$root}__child {
+ border-bottom: 1px solid $color--light-mid-grey;
+ }
+
+ + #{$root}__child,
+ + #{$root}__child + #{$root}__child {
+ display: table-row;
+ }
+
+ .arrow {
+ border-right-color: darken($color--dark-blue, 10%);
+ transform: rotate(90deg);
+ }
+ }
+ }
+
+ &__child {
+ display: none;
+ color: $color--mid-dark-grey;
+ vertical-align: top;
+ background-color: $color--mist;
+ border: 0;
+ border-bottom: 2px solid $color--light-grey;
+
+ &:hover {
+ box-shadow: none;
+ }
+
+ td {
+ padding: 10px;
+ }
+
+ p {
+ margin: 0;
+ font-weight: $weight--bold;
+ color: $color--default;
+ }
+
+ .title {
+ a {
+ visibility: hidden;
+ }
+ }
+ }
+
+ &__empty {
+ td {
+ padding: 20px;
+ }
+ }
+
+ &__toggle {
+ padding: 5px 0 5px 5px;
+ }
+
+ &__more {
+ display: flex;
+ justify-content: center;
+ background-color: $color--white;
+ padding: 20px 25px;
+ min-height: auto;
+
+ a {
+ margin: 0;
+ flex-basis: auto;
+ font-weight: $weight--semibold;
+ }
+ }
+}
diff --git a/hypha/static_src/src/sass/public/components/_investment-meta.scss b/hypha/static_src/src/sass/public/components/_investment-meta.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b36fa0df582a677cc8188d6cb4ca2e6fd1d769d2
--- /dev/null
+++ b/hypha/static_src/src/sass/public/components/_investment-meta.scss
@@ -0,0 +1,45 @@
+.investment-meta {
+ background-color: transparent;
+
+ tbody {
+ td {
+ &.phase {
+ span {
+ display: inline-block;
+ padding: 10px;
+ font-size: 13px;
+ font-weight: $weight--bold;
+ color: $color--mid-dark-grey;
+ text-align: center;
+ background-color: transparent;
+ border: 1px solid $color--mid-dark-grey;
+ }
+ }
+ }
+ }
+
+ &__row {
+ border: 0;
+
+ &:hover {
+ box-shadow: none;
+ }
+
+ &--black {
+ color: $color--default;
+ }
+
+ th,
+ td {
+ padding: 5px 10px;
+ }
+
+ td {
+ &.lead {
+ span {
+ background: $color--mist;
+ }
+ }
+ }
+ }
+}
diff --git a/hypha/static_src/src/sass/public/main.scss b/hypha/static_src/src/sass/public/main.scss
index 91bb5539e7d95102c415b7d13477b261890fc090..3916ea0f158a94ddb72cd066b14b2662d272bd25 100644
--- a/hypha/static_src/src/sass/public/main.scss
+++ b/hypha/static_src/src/sass/public/main.scss
@@ -9,6 +9,7 @@
// Components
@import 'components/apply-bar';
+@import 'components/all-investments-table';
@import 'components/button';
@import 'components/actions-bar';
@import 'components/blockquote';
@@ -23,6 +24,7 @@
@import 'components/grid';
@import 'components/icon';
@import 'components/image';
+@import 'components/investment-meta';
@import 'components/input';
@import 'components/link';
@import 'components/list';