bootstrap4: refactor mirror detail list

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

diff --git a/src/templates/mirrors/detail.html b/src/templates/mirrors/detail.html
index 336ecb4f2d723e0cd5535ffac453bf1fca7abcde..70e78ef3538d15acbcba268225e954138000e449 100644 (file)
--- a/src/templates/mirrors/detail.html
+++ b/src/templates/mirrors/detail.html
@@ -3,133 +3,146 @@
 {% block title %}{{ _("Mirror: %s") % mirror.hostname }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/mirrors">{{ _("Mirrors") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/mirror/{{ mirror.hostname }}">{{ mirror.hostname }}</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>
+                                       <li class="breadcrumb-item active">
+                                               <a href="/mirror/{{ mirror.hostname }}">{{ mirror.hostname }}</a>
+                                       </li>
+                               </ol>
+                       </nav>
+               </div>
+       </div>
 
-       {% 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/{{ mirror.hostname }}/edit">
-                                               <i class="icon-edit"></i>
-                                               {{ _("Edit settings") }}
-                                       </a>
-                               </li>
 
-                               <li class="divider"></li>
-                               <li>
-                                       <a href="/mirror/{{ mirror.hostname }}/delete">
-                                               <i class="icon-trash"></i>
-                                               {{ _("Delete mirror") }}
-                                       </a>
-                               </li>
-                       </ul>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-6 col-lg-9 col-xl-9">
+                       <h2 style="word-wrap: break-word;">
+                               {{ _("Mirror: %s") % mirror.hostname }} <br>
+                               <small class="text-muted">{{ _("hosted by %s") % mirror.owner }}</small>
+                       </h2>
                </div>
-       {% end %}
-
-       <div class="page-header">
-               <h2>
-                       {{ _("Mirror: %s") % mirror.hostname }}
-                       <small>{{ _("hosted by %s") % mirror.owner }}</small>
-               </h2>
+               {% if current_user and current_user.has_perm("manage_mirrors") %}
+                       <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
+                               <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>
+                                               <a class="dropdown-item" href="/mirror/{{ mirror.hostname }}/edit">
+                                                       <i class="icon-edit"></i>
+                                                       {{ _("Edit settings") }}
+                                               </a>
+                                               <a class="dropdown-item" href="/mirror/{{ mirror.hostname }}/delete">
+                                                       <i class="icon-trash"></i>
+                                                       {{ _("Delete mirror") }}
+                                               </a>
+                                       </div>
+                               </div>
+                       </div>
+               {% end %}
        </div>
 
        <div class="row">
-               <div class="span6">
-                       <table class="table table-striped table-hover">
-                               <tbody>
-                                       <tr>
-                                               <td>{{ _("Hostname") }}</td>
-                                               <td>{{ mirror.hostname }}</td>
-                                       </tr>
-
-                                       {% if current_user and current_user.has_perm("manage_mirrors") %}
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <h3>{{ _("General") }}</h3>
+                       <div class="table-responsive">
+                               <table class="table table-striped table-hover">
+                                       <tbody>
                                                <tr>
-                                                       <td>{{ _("Contact") }}</td>
-                                                       <td>
-                                                               {% if mirror.contact %}
-                                                                       <a href="mailto:{{ mirror.contact }}">{{ mirror.contact }}</a>
-                                                               {% else %}
-                                                                       {{ _("N/A") }}
-                                                               {% end %}
-                                                       </td>
+                                                       <td>{{ _("Hostname") }}</td>
+                                                       <td>{{ mirror.hostname }}</td>
                                                </tr>
-                                       {% end %}
-                               </tbody>
-                       </table>
-
-                       <h3>{{ _("Status information") }}</h3>
-                       <table class="table table-striped table-hover">
-                               <tbody>
-                                       {% if not mirror.status == "OK" %}
                                                <tr>
-                                                       <td>{{ _("Status") }}</td>
-                                                       <td>{{ mirror.status }}</td>
+                                                       <td>{{ _("Location") }}</td>
+                                                       <td class="text-muted">{{ _("The location of the mirror server could not be estimated.") }}</td>
                                                </tr>
 
-                                               {% if mirror.status == "ERROR" %}
+                                               {% if current_user and current_user.has_perm("manage_mirrors") %}
                                                        <tr>
-                                                               <td>{{ _("HTTP Response Code") }}</td>
-                                                               <td>{{ mirror.last_check.http_status }}</td>
+                                                               <td>{{ _("Contact") }}</td>
+                                                               <td>
+                                                                       {% if mirror.contact %}
+                                                                               <a href="mailto:{{ mirror.contact }}">{{ mirror.contact }}</a>
+                                                                       {% else %}
+                                                                               {{ _("N/A") }}
+                                                                       {% end %}
+                                                               </td>
                                                        </tr>
                                                {% end %}
+                                       </tbody>
+                               </table>
+                       </div>
+               </div>
+       </div>
+
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <h3>{{ _("Status information") }}</h3>
+                       <div class="table-responsive">
+                               <table class="table table-striped table-hover">
+                                       <tbody>
+                                               {% if not mirror.status == "OK" %}
+                                                       <tr>
+                                                               <td>{{ _("Status") }}</td>
+                                                               <td>{{ mirror.status }}</td>
+                                                       </tr>
+
+                                                       {% if mirror.status == "ERROR" %}
+                                                               <tr>
+                                                                       <td>{{ _("HTTP Response Code") }}</td>
+                                                                       <td>{{ mirror.last_check.http_status }}</td>
+                                                               </tr>
+                                                       {% end %}
+
+                                                       {% if mirror.last_check and mirror.last_check.last_sync_at %}
+                                                               <tr>
+                                                                       <td>{{ _("Last sync") }}</td>
+                                                                       <td>
+                                                                               {{ locale.format_date(mirror.last_check.last_sync_at) }}
+                                                                       </td>
+                                                               </tr>
+                                                       {% end %}
 
-                                               {% if mirror.last_check and mirror.last_check.last_sync_at %}
                                                        <tr>
-                                                               <td>{{ _("Last sync") }}</td>
+                                                               <td>{{ _("Last check") }}</td>
                                                                <td>
-                                                                       {{ locale.format_date(mirror.last_check.last_sync_at) }}
+                                                                       {% if mirror.last_check %}
+                                                                               {{ format_date(mirror.last_check.timestamp) }}
+                                                                       {% else %}
+                                                                               {{ _("Never") }}
+                                                                       {% end %}
                                                                </td>
                                                        </tr>
                                                {% end %}
 
-                                               <tr>
-                                                       <td>{{ _("Last check") }}</td>
-                                                       <td>
-                                                               {% if mirror.last_check %}
-                                                                       {{ format_date(mirror.last_check.timestamp) }}
-                                                               {% else %}
-                                                                       {{ _("Never") }}
-                                                               {% end %}
-                                                       </td>
-                                               </tr>
-                                       {% end %}
-
-                                       {% if mirror.average_response_time %}
-                                               <tr>
-                                                       <td>{{ _("Average Response Time") }}</td>
-                                                       <td>
-                                                               {{ "%.2fms" % (mirror.average_response_time * 1000) }}
-                                                       </td>
-                                               </tr>
-                                       {% end %}
-                               </tbody>
-                       </table>
-               </div>
-
-               <div class="span6">
-                       <p class="muted">
-                               {{ _("The location of the mirror server could not be estimated.") }}
-                       </p>
+                                               {% if mirror.average_response_time %}
+                                                       <tr>
+                                                               <td>{{ _("Average Response Time") }}</td>
+                                                               <td>
+                                                                       {{ "%.2fms" % (mirror.average_response_time * 1000) }}
+                                                               </td>
+                                                       </tr>
+                                               {% end %}
+                                       </tbody>
+                               </table>
+                       </div>
                </div>
        </div>
 
        {% if log %}
-               <h3>{{ _("Log") }}</h3>
-               {% module Log(log) %}
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <h3>{{ _("Log") }}</h3>
+                               {% module Log(log) %}
+                       </div>
+               </div>
        {% end %}
+
 {% end block %}