From: Jonatan Schlag <jonatan.schlag@ipfire.org>
Date: Mon, 4 Dec 2017 16:08:54 +0000 (+0100)
Subject: bootstrap4: refactor mirror detail list
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3b18b5d1240f231ec64666be43da771464982ed7;p=pbs.git

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 336ecb4f..70e78ef3 100644
--- 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 %}