bootstrap4: port package index to bootstrap4

Signed-off-by: Jonatan Schlag <jonatan.schlag@ipfire.org>

diff --git a/src/templates/packages/index.html b/src/templates/packages/index.html
index 6b8f583db27525fef106c14c56a6ee2b2b974b47..f8df3c384af541fb4578ba81e2dd946ee2ddbfab 100644 (file)
--- a/src/templates/packages/index.html
+++ b/src/templates/packages/index.html
@@ -3,65 +3,70 @@
 {% block title %}{{ _("Package list") }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/packages">{{ _("Packages") }}</a>
-               </li>
-       </ul>
 
-       <div class="page-header">
-               <h1>{{ _("Package list") }}</h1>
+       <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>
 
-       <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 class="row">
-               <div class="span12">
-                       <hr>
+                       <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>
 
-                       <div class="btn-toolbar ac">
-                               <div class="btn-group">
-                                       {% for letter in sorted(packages.keys()) %}
-                                               <a class="btn" href="#{{ letter }}">{{ letter.upper() }}</a>
-                                       {% end %}
-                               </div>
+       <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>
-
-                       <hr>
                </div>
        </div>
 
        <div class="row">
-               <div class="span12">
-                       <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 %}
+               <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>
-                                                                       <a href="/package/{{ pkg.name }}">{{ pkg.name }}</a>
-                                                               </td>
-                                                               <td>
-                                                                       {{ pkg.summary }}
+                                                               <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 %}
-                                       {% end %}
-                               </tbody>
-                       </table>
+                                       </tbody>
+                               </table>
+                       </div>
                </div>
        </div>
 {% end block %}