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 7170e5fc3b512b9f48f46ed94f52ac3da38f7be6..5b5069a29f2bdf37e2b264860d14c2073c2d6402 100644 (file)
--- 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>