From: Jonatan Schlag <jonatan.schlag@ipfire.org>
Date: Mon, 6 Nov 2017 09:31:43 +0000 (+0100)
Subject: bootstrap 4: make jobs-table responsive
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=8452bb5171d89eca131e06ec97ed91afd4c62bfd;p=pbs.git

bootstrap 4: make jobs-table responsive

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

diff --git a/src/templates/modules/jobs-table.html b/src/templates/modules/jobs-table.html
index 7170e5fc..5b5069a2 100644
--- a/src/templates/modules/jobs-table.html
+++ b/src/templates/modules/jobs-table.html
@@ -1,66 +1,72 @@
-<table class="table table-striped table-hover">
-	<thead>
-		<tr>
-			<th>{{ _("Arch") }}</th>
-			<th>{{ _("State") }}</th>
-			<th>{{ _("Host") }}</th>
-			<th>{{ _("Duration") }}</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% if jobs %}
-			{% for job in jobs %}
-				<tr>
-					<td>
-						<a href="/job/{{ job.uuid }}">{{ job.arch }}</a>
-					</td>
-					<td>
-						{% if job.state == "pending" %}
-							{{ _("Pending") }}
-						{% elif job.state == "failed" %}
-							{{ _("Failed") }}
-						{% elif job.state == "dispatching" %}
-							{{ _("Dispatching") }}
-						{% elif job.state == "finished" %}
-							{{ _("Finished") }}
-						{% elif job.state == "running" %}
-							{{ _("Running") }}
-						{% elif job.state == "aborted" %}
-							{{ _("Aborted") }}
-						{% else %}
-							{{ job.state }}
-						{% end %}
-					</td>
-					<td>
-						{% if job.builder %}
-							<a href="/builder/{{ job.builder.name }}">{{ job.builder.name }}</a>
-						{% else %}
-							{{ _("N/A") }}
-						{% end %}
-					</td>
-					<td>
-						{% if job.state == "running" %}
-							{{ _("Running since %s") % friendly_time(job.duration) }}
-						{% elif job.duration %}
-							{{ friendly_time(job.duration) }}
-						{% else %}
-							{{ _("Not finished, yet.") }}
-						{% end %}
-					</td>
-				</tr>
-			{% end %}
+<!--
+	The documentation says <table class="table table-striped table-hover table-responsive">
+	but we have to use a div class instead to get the table width enough
+-->
+<div class="table-responsive">
+	<table class="table table-striped table-hover">
+		<thead>
+			<tr>
+				<th scope="col">{{ _("Arch") }}</th>
+				<th scope="col">{{ _("State") }}</th>
+				<th scope="col">{{ _("Host") }}</th>
+				<th scope="col">{{ _("Duration") }}</th>
+			</tr>
+		</thead>
+		<tbody>
+			{% if jobs %}
+				{% for job in jobs %}
+					<tr>
+						<td>
+							<a href="/job/{{ job.uuid }}">{{ job.arch }}</a>
+						</td>
+						<td>
+							{% if job.state == "pending" %}
+								{{ _("Pending") }}
+							{% elif job.state == "failed" %}
+								{{ _("Failed") }}
+							{% elif job.state == "dispatching" %}
+								{{ _("Dispatching") }}
+							{% elif job.state == "finished" %}
+								{{ _("Finished") }}
+							{% elif job.state == "running" %}
+								{{ _("Running") }}
+							{% elif job.state == "aborted" %}
+								{{ _("Aborted") }}
+							{% else %}
+								{{ job.state }}
+							{% end %}
+						</td>
+						<td>
+							{% if job.builder %}
+								<a href="/builder/{{ job.builder.name }}">{{ job.builder.name }}</a>
+							{% else %}
+								{{ _("N/A") }}
+							{% end %}
+						</td>
+						<td>
+							{% if job.state == "running" %}
+								{{ _("Running since %s") % friendly_time(job.duration) }}
+							{% elif job.duration %}
+								{{ friendly_time(job.duration) }}
+							{% else %}
+								{{ _("Not finished, yet.") }}
+							{% end %}
+						</td>
+					</tr>
+				{% end %}
 
-			{% if not build.supported_arches == "all" %}
+				{% if not build.supported_arches == "all" %}
+					<tr>
+						<td colspan="4">
+							{{ _("This package only supports %s.") % locale.list(build.supported_arches.split()) }}
+						</td>
+					</tr>
+				{% end %}
+			{% else %}
 				<tr>
-					<td colspan="4">
-						{{ _("This package only supports %s.") % locale.list(build.supported_arches.split()) }}
-					</td>
+					<td colspan="4">{{ _("No jobs, yet.") }}</td>
 				</tr>
 			{% end %}
-		{% else %}
-			<tr>
-				<td colspan="4">{{ _("No jobs, yet.") }}</td>
-			</tr>
-		{% end %}
-	</tbody>
-</table>
+		</tbody>
+	</table>
+</div>