From: Jonatan Schlag <jonatan.schlag@ipfire.org>
Date: Mon, 6 Nov 2017 09:28:59 +0000 (+0100)
Subject: bootstrap4: make jobs list table responsive
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=747522fdbeb796b878d0c9e55bd35b01947165fb;p=pbs.git

bootstrap4: make jobs list table responsive

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

diff --git a/src/templates/index.html b/src/templates/index.html
index f6e61646..46c5816a 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -76,10 +76,15 @@
 	{% end %}
 
 	{% if jobs %}
-		<hr>
+	<div class="row">
+		<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+
+			<hr>
 
-		<h4>{{ _("Build jobs") }}</h4>
-		{% module JobsList(jobs) %}
+			<h4>{{ _("Build jobs") }}</h4>
+			{% module JobsList(jobs) %}
+		</div>
+	</div>
 	{% end %}
 
 	<ul class="nav nav-pills">
diff --git a/src/templates/modules/jobs/list.html b/src/templates/modules/jobs/list.html
index 4f5bfed1..7ee73e8a 100644
--- a/src/templates/modules/jobs/list.html
+++ b/src/templates/modules/jobs/list.html
@@ -1,54 +1,60 @@
-<table class="table table-striped table-hover">
-	<thead>
-		<tr>
-			<th></th>
-			<th>{{ _("Build job") }}</th>
-			<th>{{ _("Builder") }}</th>
-			<th>{{ _("Runtime") }}</th>
-		</tr>
-	</thead>
+<!--
+	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></th>
+				<th scope="col" >{{ _("Build job") }}</th>
+				<th scope="col" >{{ _("Builder") }}</th>
+				<th scope="col" >{{ _("Runtime") }}</th>
+			</tr>
+		</thead>
 
-	<tbody>
-		{% for job in jobs %}
-			{% if job.state in ("running",) %}
-				<tr class="success">
-			{% elif job.state in ("dispatching", "uploading") %}
-				<tr class="info">
-			{% elif job.state in ("aborted", "failed") %}
-				<tr class="error">
-			{% else %}
-				<tr>
-			{% end %}
+		<tbody>
+			{% for job in jobs %}
+				{% if job.state in ("running",) %}
+					<tr class="table-primary">
+				{% elif job.state in ("dispatching", "uploading") %}
+					<tr class="table-info">
+				{% elif job.state in ("aborted", "failed") %}
+					<tr class="table-danger">
+				{% else %}
+					<tr>
+				{% end %}
 
-				<td>
-					{% module JobState(job, show_icon=True) %}
-				</td>
+					<td>
+						{% module JobState(job, show_icon=True) %}
+					</td>
 
-				<td>
-					<a href="/build/{{ job.build.uuid }}">
-						{{ job.build.name }}</a>.<a href="/job/{{ job.uuid }}">{{ job.arch }}</a>
+					<td>
+						<a href="/build/{{ job.build.uuid }}">
+							{{ job.build.name }}</a>.<a href="/job/{{ job.uuid }}">{{ job.arch }}</a>
 
-					{% if job.build.type == "scratch" %}
-						<span class="label label-inverse pull-right" rel="tooltip" data-placement="top" title="{{ _("Scratch build") }}">S</span>
-					{% elif job.test %}
-						<span class="label label-inverse pull-right" rel="tooltip" data-placement="top" title="{{ _("Test build") }}">T</span>
-					{% end %}
-				</td>
+						{% if job.build.type == "scratch" %}
+							<span class="label label-inverse pull-right" rel="tooltip" data-placement="top" title="{{ _("Scratch build") }}">S</span>
+						{% elif job.test %}
+							<span class="label label-inverse pull-right" rel="tooltip" data-placement="top" title="{{ _("Test build") }}">T</span>
+						{% end %}
+					</td>
 
-				<td>
-					{% if job.builder %}
-						<a href="/builder/{{ job.builder.name }}">
-							{{ job.builder.name }}
-						</a>
-					{% else %}
-						{{ _("N/A") }}
-					{% end %}
-				</td>
+					<td>
+						{% if job.builder %}
+							<a href="/builder/{{ job.builder.name }}">
+								{{ job.builder.name }}
+							</a>
+						{% else %}
+							{{ _("N/A") }}
+						{% end %}
+					</td>
 
-				<td>
-					{{ format_time(job.duration, shorter=True) }}
-				</td>
-			</tr>
-		{% end %}
-	</tbody>
-</table>
+					<td>
+						{{ format_time(job.duration, shorter=True) }}
+					</td>
+				</tr>
+			{% end %}
+		</tbody>
+	</table>
+</div>