web: Refactor packages 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 f8df3c384af541fb4578ba81e2dd946ee2ddbfab..f3cce89f8059e0af5cc278d119bb92febf07c2a5 100644 (file)
--- a/src/templates/packages/index.html
+++ b/src/templates/packages/index.html
@@ -1,72 +1,56 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Package list") }}{% end block %}
+{% block title %}{{ _("Packages") }}{% end block %}
 
-{% block body %}
+{% 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") }}
+                       </li>
+               </ul>
+       </nav>
 
-       <div class="row">
-               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                       <nav aria-label="breadcrumb" role="navigation">
-                               <ol class="breadcrumb">
-                                       <li class="breadcrumb-item"><a href="/">{{ _("Home") }}</a></li>
-                                       <li class="breadcrumb-item active"><a href="/packages">{{ _("Packages") }}</a></li>
-                               </ol>
-                       </nav>
-               </div>
-       </div>
+       <h1>{{ _("Packages") }}</h1>
 
-       <div class="row">
-                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                               <h1>{{ _("Package list") }}</h1>
-                               <p>
-                                       {{ _("This is an alphabetically ordered list of all packages in the distribution.") }}
-                                       {{ _("Click on a link to see further information about the package.") }}
-                               </p>
-               </div>
-       </div>
+       <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>
 
-       <div class="row">
-               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                       <div class="table-responsive">
-                               <hr>
-                                       <ul class="pagination">
-                                               {% for letter in sorted(packages.keys()) %}
-                                                       <li class="page-item">
-                                                               <a class="page-link" href="#{{ letter }}">{{ letter.upper() }}</a>
-                                                       </li>
-                                               {% end %}
-                                       </ul>
-                               <hr>
-                       </div>
-               </div>
-       </div>
+       <table class="hover">
+               <tbody>
+                       {% for letter, pkgs in sorted(packages.items()) %}
+                               <tr>
+                                       <th scope="row" colspan="2">
+                                               <a name="{{ letter }}"></a>
+                                               {{ letter.upper() }}
+                                       </th>
+                               </tr>
 
-       <div class="row">
-               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                       <div class="table-responsive">
-                               <table class="table table-striped table-hover">
-                                       <tbody>
-                                               {% for letter, pkgs in sorted(packages.items()) %}
-                                                       <tr>
-                                                               <td colspan="2">
-                                                                       <a name="{{ letter }}"></a>
-                                                                       <h2>{{ letter.upper() }}</h2>
-                                                               </td>
-                                                       </tr>
-                                                       {% for pkg in pkgs %}
-                                                               <tr>
-                                                                       <td>
-                                                                               <a href="/package/{{ pkg.name }}">{{ pkg.name }}</a>
-                                                                       </td>
-                                                                       <td>
-                                                                               {{ pkg.summary }}
-                                                                       </td>
-                                                               </tr>
-                                                       {% end %}
-                                               {% end %}
-                                       </tbody>
-                               </table>
-                       </div>
-               </div>
-       </div>
+                               {% for package in pkgs %}
+                                       <tr>
+                                               <td>
+                                                       <a href="/packages/{{ package.name }}">
+                                                               {{ package.name }}
+                                                       </a>
+                                               </td>
+                                               <td>
+                                                       {{ package.summary }}
+                                               </td>
+                                       </tr>
+                               {% end %}
+                       {% end %}
+               </tbody>
+       </table>
 {% end block %}