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 f6e616466d79a491808be559828c19239359cad1..46c5816ae0d4d96625db5564706c649cdc80cdc4 100644 (file)
--- 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 4f5bfed1a1255a7ef8d4ff0ca53f06f1cb19f28b..7ee73e8a222bf201e353c6dd107037dd105a8320 100644 (file)
--- 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>