Merge remote-tracking branch 'origin/maintainance/remove-submission-t…

…ooltip-js' into test
HyphaApp · Jul 13, 2023 · 911c629 · 911c629
2 parents 2d90b52 + 28cddec
commit 911c629
Show file tree

Hide file tree

Showing 15 changed files with 46 additions and 102 deletions.
diff --git a/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html b/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
@@ -67,7 +67,3 @@ <h3>{% trans "Project history" %}</h3>
 {% endif %}
 
 {% endblock %}
-
-{% block extra_js %}
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
-{% endblock %}
diff --git a/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html b/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html
@@ -38,6 +38,5 @@ <h4 class="heading heading--normal">{% trans "PAF waiting for assignee" %}</h4>
 {% block extra_js %}
     <script src="{% static 'js/apply/url-search-params.js' %}"></script>
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
     <script src="{% static 'js/apply/tabs.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/dashboard/templates/dashboard/dashboard.html b/hypha/apply/dashboard/templates/dashboard/dashboard.html
@@ -126,7 +126,6 @@ <h4 class="heading heading--normal">{% trans "Active Invoices" %}</h4>
     {{ my_reviewed.filterset.form.media.js }}
     <script src="{% static 'js/apply/url-search-params.js' %}"></script>
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
     <script src="{% static 'js/apply/tabs.js' %}"></script>
     <script src="{% static 'js/apply/flag.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html b/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html
@@ -97,5 +97,4 @@ <h4 class="heading heading--normal">{% trans "PAF waiting for assignee" %}</h4>
     {{ my_reviewed.filterset.form.media.js }}
     <script src="{% static 'js/apply/url-search-params.js' %}"></script>
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/dashboard/templates/dashboard/reviewer_dashboard.html b/hypha/apply/dashboard/templates/dashboard/reviewer_dashboard.html
@@ -91,6 +91,5 @@ <h4 class="heading heading--normal">{% trans "Submission history" %}</h4>
     {{ filter.form.media.js }}
     <script src="{% static 'js/apply/url-search-params.js' %}"></script>
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
     <script src="{% static 'js/apply/flag.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/funds/tables.py b/hypha/apply/funds/tables.py
@@ -1,6 +1,5 @@
 import json
 import re
-import textwrap
 
 import django_filters as filters
 import django_tables2 as tables
@@ -59,7 +58,7 @@ def render_title(record):
         title = record.title
     except AttributeError:
         title = record.submission.title
-    return textwrap.shorten(title, width=30, placeholder="...")
+    return title
 
 
 def render_reviewer_link(record):
@@ -68,7 +67,26 @@ def render_reviewer_link(record):
 
 class SubmissionsTable(tables.Table):
     """Base table for listing submissions, do not include admin data to this table"""
-    title = tables.LinkColumn('funds:submissions:detail', text=render_title, args=[A('pk')], orderable=True, attrs={'td': {'data-title-tooltip': lambda record: record.title, 'class': 'js-title'}})
+
+    title = tables.LinkColumn(
+        'funds:submissions:detail',
+        text=render_title,
+        args=[A('pk')],
+        orderable=True,
+        attrs={
+            'td': {
+                'class': 'js-title',
+            },
+            'a': {
+                'data-tippy-content': lambda record: record.title,
+                'data-tippy-placement': 'top',
+
+                # Use after:content-[''] after:block to hide the default browser tooltip on Safari
+                # https://stackoverflow.com/a/43915246
+                'class': "truncate inline-block w-[calc(100%-2rem)] after:content-[''] after:block",
+            }
+        },
+    )
     submit_time = tables.DateColumn(verbose_name=_('Submitted'))
     phase = tables.Column(verbose_name=_('Status'), order_by=('status',), attrs={'td': {'data-actions': render_actions, 'class': 'js-actions'}})
     stage = tables.Column(verbose_name=_('Type'), order_by=('status',))
@@ -544,7 +562,26 @@ class Meta:
 
 
 class ReviewerLeaderboardDetailTable(tables.Table):
-    title = tables.LinkColumn('funds:submissions:reviews:review', text=render_title, args=[A('submission_id'), A('pk')], orderable=True, verbose_name=_('Submission'), attrs={'td': {'data-title-tooltip': lambda record: record.submission.title, 'class': 'title js-title'}})
+    title = tables.LinkColumn(
+        'funds:submissions:reviews:review',
+        text=render_title,
+        args=[A('submission_id'), A('pk')],
+        orderable=True,
+        verbose_name=_('Submission'),
+        attrs={
+            'td': {
+                'class': 'js-title',
+            },
+            'a': {
+                'data-tippy-content': lambda record: record.submission.title,
+                'data-tippy-placement': 'top',
+
+                # Use after:content-[''] after:block to hide the default browser tooltip on Safari
+                # https://stackoverflow.com/a/43915246
+                'class': 'truncate inline-block w-[calc(100%-2rem)] after:content-[''] after:block',
+            }
+        },
+    )
 
     class Meta:
         model = Review

diff --git a/hypha/apply/funds/templates/funds/base_submissions_table.html b/hypha/apply/funds/templates/funds/base_submissions_table.html
@@ -23,7 +23,6 @@
     <script src="{% static 'js/apply/symbol-es6.min.js' %}"></script>
     <script src="{% static 'js/apply/url-search-params.js' %}"></script>
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
     <script src="{% static 'js/apply/tabs.js' %}"></script>
     <script src="{% static 'js/apply/batch-actions.js' %}"></script>
     <script src="{% static 'js/apply/flag.js' %}"></script>

diff --git a/hypha/apply/funds/templates/funds/grouped_application_list.html b/hypha/apply/funds/templates/funds/grouped_application_list.html
@@ -23,7 +23,6 @@
     <script src="{% static 'js/apply/symbol-es6.min.js' %}"></script>
     <script src="{% static 'js/apply/url-search-params.js' %}"></script>
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
     <script src="{% static 'js/apply/tabs.js' %}"></script>
     <script src="{% static 'js/apply/batch-actions.js' %}"></script>
     <script src="{% static 'js/apply/flag.js' %}"></script>

diff --git a/hypha/apply/funds/templates/funds/rounds.html b/hypha/apply/funds/templates/funds/rounds.html
@@ -27,5 +27,4 @@
 {{ filter.form.media.js }}
 <script src="{% static 'js/apply/url-search-params.js' %}"></script>
 <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-<script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
 {% endblock %}
diff --git a/hypha/apply/projects/templates/application_projects/overview.html b/hypha/apply/projects/templates/application_projects/overview.html
@@ -77,7 +77,6 @@
     <script src="{% static 'js/apply/symbol-es6.min.js' %}"></script>
     <script src="{% static 'js/apply/url-search-params.js' %}"></script>
     <script src="{% static 'js/apply/submission-filters.js' %}"></script>
-    <script src="{% static 'js/apply/submission-tooltips.js' %}"></script>
     <script src="{% static 'js/apply/tabs.js' %}"></script>
     <script src="{% static 'js/apply/batch-actions.js' %}"></script>
 {% endblock %}
diff --git a/hypha/public/partner/tables.py b/hypha/public/partner/tables.py
@@ -95,7 +95,7 @@ def make_row_class(record):
 
 class InvestmentTable(tables.Table):
     """Table for listing investments."""
-    partner = tables.Column(verbose_name=_('Partner'), linkify=True, attrs={'td': {'data-title-tooltip': lambda record: record.partner, 'class': 'js-title title'}})
+    partner = tables.Column(verbose_name=_('Partner'), linkify=True, attrs={'td': {'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'))

diff --git a/hypha/static_src/src/javascript/apply/batch-actions.js b/hypha/static_src/src/javascript/apply/batch-actions.js
@@ -101,8 +101,9 @@
         let selectedIDs = [];
 
         $checkbox.filter(':checked').each(function () {
-            const href = $(this).parents('tr').find('.js-title').find('a').attr('href');
-            const title = $(this).parents('tr').find('.js-title').data('title-tooltip');
+            const link = $(this).parents('tr').find('.js-title').find('a');
+            const href = link.attr('href');
+            const title = link.data('tippy-content');
 
             $batchTitlesList.append(`
                 <a href="${href}" class="list-reveal__item" target="_blank" rel="noopener noreferrer" title="${title}">

diff --git a/hypha/static_src/src/javascript/apply/submission-tooltips.js b/hypha/static_src/src/javascript/apply/submission-tooltips.js
diff --git a/hypha/static_src/src/sass/apply/components/_all-reviews-table.scss b/hypha/static_src/src/sass/apply/components/_all-reviews-table.scss
@@ -37,34 +37,6 @@
                     display: table-cell;
                 }
 
-                &.has-tooltip {
-                    @include media-query($table-breakpoint) {
-                        &::before {
-                            position: absolute;
-                            top: 50px;
-                            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;
                 }

diff --git a/hypha/static_src/src/sass/apply/components/_all-submissions-table.scss b/hypha/static_src/src/sass/apply/components/_all-submissions-table.scss
@@ -84,34 +84,6 @@
                 @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;
-                            }
-                        }
-                    }
-                }
             }
 
             // project status label
@@ -178,7 +150,7 @@
                     @include triangle(right, $color--primary, 6px);
                     position: relative;
                     display: inline-block;
-                    margin-right: 15px;
+                    margin-right: 10px;
                     transform: rotate(0);
                     transition: transform $transition;