Collapse long lists of related packages

Just like we did with the rows of depends and required by, collapse down
conflicts, provides, etc. comma-separated lists if they grow too large.

Signed-off-by: Dan McGee <dan@archlinux.org>

2 files changed, 9 insertions, 16 deletions

diff --git a/templates/packages/details.html b/templates/packages/details.html
index 5a93ce23..aa073551 100644
--- a/templates/packages/details.html
+++ b/templates/packages/details.html
@@ -97,7 +97,7 @@
         {% with pkg.split_packages as splits %}{% if splits %}
         <tr>
             <th>Split Packages:</th>
-            <td class="wrap">{% for s in splits %}{% pkg_details_link s %}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
+            <td class="wrap relatedto">{% for s in splits %}<span class="related">{% pkg_details_link s %}{% if not forloop.last %}, {% endif %}</span>{% endfor %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% else %}
@@ -134,26 +134,26 @@
         {% with pkg.provides.all as all_related %}{% if all_related %}
         <tr>
             <th>Provides:</th>
-            <td class="wrap">{% include "packages/details_relatedto.html" %}</td>
+            <td class="wrap relatedto">{% include "packages/details_relatedto.html" %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% with pkg.replaces.all as all_related %}{% if all_related %}
         <tr>
             <th>Replaces:</th>
-            <td class="wrap">{% include "packages/details_relatedto.html" %}</td>
+            <td class="wrap relatedto">{% include "packages/details_relatedto.html" %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% with pkg.conflicts.all as all_related %}{% if all_related %}
         <tr>
             <th>Conflicts:</th>
-            <td class="wrap">{% include "packages/details_relatedto.html" %}</td>
+            <td class="wrap relatedto">{% include "packages/details_relatedto.html" %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% with pkg.reverse_conflicts as rev_conflicts %}{% if rev_conflicts %}
         <tr>
             <th>Reverse Conflicts:</th>
-            <td class="wrap">{% for conflict in rev_conflicts %}
-                {% pkg_details_link conflict %}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
+            <td class="wrap relatedto">{% for conflict in rev_conflicts %}
+                <span class="related">{% pkg_details_link conflict %}{% if not forloop.last %}, {% endif %}</span>{% endfor %}</td>
         </tr>
         {% endif %}{% endwith %}
         <tr>
@@ -237,6 +237,7 @@ $(document).ready(function() {
         ajaxifyFiles();
         collapseDependsList("#pkgdepslist");
         collapseDependsList("#pkgreqslist");
+        collapseRelatedTo(".relatedto");
 });
 </script>
 {% endblock %}
diff --git a/templates/packages/details_relatedto.html b/templates/packages/details_relatedto.html
index 1ffe2884..e14375d3 100644
--- a/templates/packages/details_relatedto.html
+++ b/templates/packages/details_relatedto.html
@@ -1,10 +1,2 @@
-{% load package_extras %}
-{% for related in all_related %}
-{% with related.get_best_satisfier as best_satisfier %}
-{% ifequal best_satisfier None %}
-{{ related.name }}{{ related.comparison|default:"" }}{{ related.version|default:"" }}{% if not forloop.last %}, {% endif %}
-{% else %}
-{% pkg_details_link best_satisfier %}{{ related.comparison|default:"" }}{{related.version|default:"" }}{% if not forloop.last %}, {% endif %}
-{% endifequal %}
-{% endwith %}
-{% endfor %}
+{% load package_extras %}{% for related in all_related %}{% with related.get_best_satisfier as best_satisfier %}<span class="related">{% ifequal best_satisfier None %}{{ related.name }}{% else %}{% pkg_details_link best_satisfier %}{% endifequal %}{{ related.comparison|default:"" }}{{ related.version|default:"" }}{% if not forloop.last %}, {% endif %}</span>
+{% endwith %}{% endfor %}