bootstrap4: refactored mirror list

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

diff --git a/src/templates/mirrors/list.html b/src/templates/mirrors/list.html
index 670a260b72b78004118f34a798a3cc4de9d57000..b919b798f36171b8ada1bd41a177676bca8c5c59 100644 (file)
--- a/src/templates/mirrors/list.html
+++ b/src/templates/mirrors/list.html
@@ -3,100 +3,116 @@
 {% block title %}{{ _("Mirrors") }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/mirrors">{{ _("Mirrors") }}</a>
-               </li>
-       </ul>
-
-       {% if current_user and current_user.has_perm("manage_mirrors") %}
-               <div class="btn-group pull-right">
-                       <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-                               {{ _("Actions") }} <span class="caret"></span>
-                       </a>
-                       <ul class="dropdown-menu">
-                               <li>
-                                       <a href="/mirror/new">
-                                               <i class="icon-asterisk"></i> {{ _("Add new mirror") }}
-                                       </a>
-                               </li>
-                       </ul>
+       <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"><a href="/mirrors">{{ _("Mirrors") }}</a></li>
+                               </ol>
+                       </nav>
                </div>
-       {% end %}
+       </div>
 
-       <div class="page-header">
-               <h2>{{ _("Mirrors") }}</h2>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                       <h2>{{ _("Mirrors") }}</h2>
+               </div>
+               {% if current_user and current_user.has_perm("manage_mirrors") %}
+                       <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                               <div class="dropdown justify-content-center justify-content-lg-end justify-content-xl-end">
+                                       <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                               {{ _("Actions") }}
+                                       </button>
+                                       <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                                       <a class="dropdown-item" href="/mirror/new">
+                                                               <i class="icon-asterisk"></i> {{ _("Add new mirror") }}
+                                                       </a>
+                                       </div>
+                               </div>
+                       </div>
+               {% end %}
        </div>
 
-       <p>
-               {{ _("On this page, you will see a list of all mirror servers.") }}
-       </p>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <p>
+                               {{ _("On this page, you will see a list of all mirror servers.") }}
+                       </p>
+               </div>
+       </div>
 
        {% if mirrors %}
-               <table class="table table-striped table-hover">
-                       <thead>
-                               <tr>
-                                       <th>{{ _("Hostname") }} / {{ _("Owner") }}</th>
-                                       <th></th>
-                                       <th>{{ _("Last check") }}</th>
-                               </tr>
-                       </thead>
-                       <tbody>
-                               {% for mirror in mirrors %}
-                                       <tr>
-                                               <td>
-                                                       <a href="/mirror/{{ mirror.hostname }}">
-                                                               {{ mirror.hostname }}
-                                                       </a>
-                                                       <p class="muted">
-                                                               {{ mirror.owner or _("N/A") }}
-                                                       </p>
-                                               </td>
-                                               <td>
-                                                       [{{ mirror.country_code }}] -
+               <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">
+                                               <thead>
+                                                       <tr>
+                                                               <th>{{ _("Hostname") }} / {{ _("Owner") }}</th>
+                                                               <th></th>
+                                                               <th>{{ _("Last check") }}</th>
+                                                       </tr>
+                                               </thead>
+                                               <tbody>
+                                                       {% for mirror in mirrors %}
+                                                               <tr>
+                                                                       <td>
+                                                                               <a href="/mirror/{{ mirror.hostname }}">
+                                                                                       {{ mirror.hostname }}
+                                                                               </a>
+                                                                               <p class="text-muted">
+                                                                                       {{ mirror.owner or _("N/A") }}
+                                                                               </p>
+                                                                       </td>
+                                                                       <td>
+                                                                               [{{ mirror.country_code }}] -
 
-                                                       {% if mirror.status == "OK" %}
-                                                               <span class="text-success">
-                                                                       {{ _("Up") }}
-                                                               </span>
-                                                       {% elif mirror.status == "OUTOFSYNC" %}
-                                                               <span class="text-warning">
-                                                                       {{ _("Out Of Sync") }}
-                                                               </span>
-                                                       {% elif mirror.status == "ERROR" %}
-                                                               <span class="text-error">
-                                                                       {{ _("Down") }}
-                                                               </span>
-                                                       {% else %}
-                                                               <span class="muted">
-                                                                       {{ _("Unknown") }}
-                                                               </span>
-                                                       {% end %}
-                                               </td>
+                                                                               {% if mirror.status == "OK" %}
+                                                                                       <span class="text-success">
+                                                                                               {{ _("Up") }}
+                                                                                       </span>
+                                                                               {% elif mirror.status == "OUTOFSYNC" %}
+                                                                                       <span class="text-warning">
+                                                                                               {{ _("Out Of Sync") }}
+                                                                                       </span>
+                                                                               {% elif mirror.status == "ERROR" %}
+                                                                                       <span class="text-danger">
+                                                                                               {{ _("Down") }}
+                                                                                       </span>
+                                                                               {% else %}
+                                                                                       <span class="text-muted">
+                                                                                               {{ _("Unknown") }}
+                                                                                       </span>
+                                                                               {% end %}
+                                                                       </td>
 
-                                               <td>
-                                                       {% if mirror.last_check %}
-                                                               {{ format_date(mirror.last_check.timestamp, relative=True) }}
-                                                       {% else %}
-                                                               {{ _("N/A") }}
+                                                                       <td>
+                                                                               {% if mirror.last_check %}
+                                                                                       {{ format_date(mirror.last_check.timestamp, relative=True) }}
+                                                                               {% else %}
+                                                                                       {{ _("N/A") }}
+                                                                               {% end %}
+                                                                       </td>
+                                                               </tr>
                                                        {% end %}
-                                               </td>
-                                       </tr>
-                               {% end %}
-                       </tbody>
-               </table>
+                                               </tbody>
+                                       </table>
+                               </div>
        {% else %}
-               <p class="muted">
-                       {{ _("There are no mirrors configured, yet.") }}
-               </p>
+                               <p class="muted">
+                                       {{ _("There are no mirrors configured, yet.") }}
+                               </p>
+                       </div>
+               </div>
        {% end %}
 
        {% if log %}
-               <h2>{{ _("Log") }}</h2>
-               {% module Log(log) %}
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <h2>{{ _("Log") }}</h2>
+                               {% module Log(log) %}
+                       </div>
+               </div>
        {% end %}
 {% end block %}