web: Refactor package listing page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/packages/index.html b/src/templates/packages/index.html
index f3cce89f8059e0af5cc278d119bb92febf07c2a5..309e03cad43196d1e56b2b151e4ce548b5e4cfaa 100644 (file)
--- a/src/templates/packages/index.html
+++ b/src/templates/packages/index.html
@@ -3,37 +3,23 @@
 {% block title %}{{ _("Packages") }}{% end block %}
 
 {% block container %}
-       <nav aria-label="{{ _("You are here:") }}" role="navigation">
-               <ul class="breadcrumbs">
-                       <li>
-                               <a href="/">{{ _("Home") }}</a>
-                       </li>
-                       <li>
-                               <span class="show-for-sr">{{ _("Current") }}: </span> {{ _("Packages") }}
+       <nav class="breadcrumb" aria-label="breadcrumbs">
+               <ul>
+                       <li class="is-active">
+                               <a href="#" aria-current="page">
+                                       {{ _("Packages") }}
+                               </a>
                        </li>
                </ul>
        </nav>
 
-       <h1>{{ _("Packages") }}</h1>
-
-       <nav aria-label="{{ _("Pagination") }}">
-               <ul class="pagination text-center">
-                       {% for letter in sorted(packages.keys()) %}
-                               <li>
-                                       <a href="#{{ letter }}" aria-label="{{ letter.upper() }}">
-                                               {{ letter.upper() }}
-                                       </a>
-                               </li>
-                       {% end %}
-               </ul>
-       </nav>
+       <h1 class="title">{{ _("Packages") }}</h1>
 
-       <table class="hover">
+       <table class="table is-fullwidth">
                <tbody>
                        {% for letter, pkgs in sorted(packages.items()) %}
                                <tr>
                                        <th scope="row" colspan="2">
-                                               <a name="{{ letter }}"></a>
                                                {{ letter.upper() }}
                                        </th>
                                </tr>