diff options
| author | Dan McGee <dan@archlinux.org> | 2012-07-05 17:36:22 -0500 |
|---|---|---|
| committer | Dan McGee <dan@archlinux.org> | 2012-07-05 17:36:22 -0500 |
| commit | ca86b8d339ff3b8e74ac6d2ccf8a14458a690cf5 (patch) | |
| tree | 360889bbd4c74a3a6843e334da9ed207ac0761fe /templates/packages/details.html | |
| parent | 909cb9a209b4a4db00232b3a62656f95c4b88d45 (diff) | |
Collapse the dependencies and required by lists when they are long
For now, this happens when the lists are over 20 items. Using JS, hide
the 21st and following packages listed in the list and replace them with
a 'Show More...' link that users can click to get the full list.
For a package such as glibc with 444 'Required By' entries, this can
make quite a visual difference.
Signed-off-by: Dan McGee <dan@archlinux.org>
Diffstat (limited to 'templates/packages/details.html')
| -rw-r--r-- | templates/packages/details.html | 10 |
1 files changed, 7 insertions, 3 deletions
diff --git a/templates/packages/details.html b/templates/packages/details.html index 358ab525..201e3074 100644 --- a/templates/packages/details.html +++ b/templates/packages/details.html @@ -186,7 +186,7 @@ <div id="pkgdeps" class="listing"> <h3 title="{{ pkg.pkgname }} has the following dependencies"> Dependencies ({{deps|length}})</h3> - {% if deps %}<ul> + {% if deps %}<ul id="pkgdepslist"> {% for depend in deps %}{% include "packages/details_depend.html" %}{% endfor %} </ul>{% endif %} </div> @@ -196,7 +196,7 @@ <div id="pkgreqs" class="listing"> <h3 title="Packages that require {{ pkg.pkgname }}"> Required By ({{rqdby|length}})</h3> - {% if rqdby %}<ul> + {% if rqdby %}<ul id="pkgreqslist"> {% for req in rqdby %}{% include "packages/details_requiredby.html" %}{% endfor %} </ul>{% endif %} </div> @@ -219,6 +219,10 @@ {% load cdn %}{% jquery %} <script type="text/javascript" src="{% static "archweb.js" %}"></script> <script type="text/javascript"> -$(document).ready(ajaxifyFiles); +$(document).ready(function() { + ajaxifyFiles(); + collapseDependsList("#pkgdepslist"); + collapseDependsList("#pkgreqslist"); +}); </script> {% endblock %} |