bootstrap4: port build overview to bootstrap4

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

diff --git a/src/templates/build-index.html b/src/templates/build-index.html
index 65df0a77398ff99b5bfc1211405b2314c2ceaa51..3eb4dd0fc5d56df16cc5ef7c1c3e11af247d50e1 100644 (file)
--- a/src/templates/build-index.html
+++ b/src/templates/build-index.html
@@ -3,25 +3,44 @@
 {% block title %}{{ _("Builds") }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/builds">{{ _("Builds") }}</a>
-               </li>
-       </ul>
 
-       <ul class="nav nav-pills pull-right">
-               <li>
-                       <a href="/builds/comments">{{ _("Comments") }}</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 active">
+                                               <a href="/builds">{{ _("Builds") }}</a>
+                                       </li>
+                               </ol>
+                       </nav>
+               </div>
+       </div>
+
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-9 col-lg-10 col-xl-10">
+                       <h2 style="word-wrap: break-word;">
+                               {{ _("Builds") }}
+                       </h2>
+               </div>
+               <div class="col-12 col-sm-12 col-md-3 col-lg-2 col-xl-2">
+                       <div class="dropdown">
+                               <button class="btn btn-block btn-light dropdown-toggle mb-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                       {{ _("Actions") }}
+                               </button>
+                               <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                       <a class="dropdown-item" href="/builds/comments">
+                                               {{ _("Show Comments") }}
+                                       </a>
+                               </div>
+                       </div>
+               </div>
+       </div>
 
-       <div class="page-header">
-               <h2>{{ _("Builds") }}</h2>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       {% module BuildTable(builds, show_user=True) %}
+               </div>
        </div>
 
-       {% module BuildTable(builds, show_user=True) %}
 {% end block %}

diff --git a/src/templates/modules/build-table.html b/src/templates/modules/build-table.html
index a2d5438f7e37c27a4db84f323678236a32e1b362..4df9988c65c02eb1da7b8a63ad1d4ce62a8dd099 100644 (file)
--- a/src/templates/modules/build-table.html
+++ b/src/templates/modules/build-table.html
@@ -1,85 +1,93 @@
 {% if dates %}
-       <table class="table table-striped table-hover">
-               <tbody>
-                       {% for date, builds in dates %}
-                               <tr>
-                                       <td colspan="4">
-                                               <h4>
-                                                       {% module HeadingDate(date) %}
-                                                       <small>({{ len(builds) }})</small>
-                                               </h4>
-                                       </td>
-                               </tr>
-                               <tr>
-                                       <th>{{ _("Build") }}</th>
-                                       <th>{{ _("Jobs") }}</th>
-                                       {% if show_repo %}
-                                               <th>{{ _("Repository") }}</th>
-                                       {% end %}
-                                       {% if show_user %}
-                                               <th>{{ _("User") }}</th>
-                                       {% end %}
-                                       {% if show_when %}
-                                               <th>{{ _("Created") }}</th>
-                                       {% end %}
-                               </tr>
-
-                               {% for build in builds %}
-                                       <tr>
-                                               <td class="name">
-                                                       <a class="build {{ build.type }} {{ build.state }} {% if build.is_broken() %}line-through{% end %}"
-                                                               href="/build/{{ build.uuid }}">{{ build.name }}</a>
-                                               </td>
-
-                                               <td>
-                                                       {% module JobsStatus(build) %}
+       <div class="table-responsive">
+               <table class="table table-striped table-hover">
+                       <tbody>
+                               {% for date, builds in dates %}
+                                       <tr>
+                                               <td colspan="4">
+                                                       <h4>
+                                                               {% module HeadingDate(date) %}
+                                                               <small>({{ len(builds) }})</small>
+                                                       </h4>
                                                </td>
-
+                                       </tr>
+                                       <tr>
+                                               <th>{{ _("Build") }}</th>
+                                               <th>{{ _("Jobs") }}</th>
                                                {% if show_repo %}
-                                                       <td>
-                                                               {% if build.repo %}
-                                                                       <a href="/distro/{{ build.distro.identifier }}">{{ build.distro.name }}</a> /
-                                                                       <a href="/distro/{{ build.distro.identifier }}/repo/{{ build.repo.identifier }}">{{ build.repo.name }}</a>
-                                                               {% end %}
-                                                       </td>
+                                                       <th>{{ _("Repository") }}</th>
                                                {% end %}
-
                                                {% if show_user %}
-                                                       {% if build.type == "scratch" and build.user %}
-                                                               <td>
-                                                                       {% module LinkToUser(build.user) %}
-                                                               </td>
-                                                       {% elif build.type == "release" %}
-                                                               <td>{% module LinkToUser(build.pkg.maintainer) %}</td>
-                                                       {% else %}
-                                                               <td></td>
-                                                       {% end %}
+                                                       <th>{{ _("User") }}</th>
                                                {% end %}
-
                                                {% if show_when %}
-                                                       <td>
-                                                               {{ format_date(build.created, relative=True) }}
-                                                       </td>
+                                                       <th>{{ _("Created") }}</th>
                                                {% end %}
+                                       </tr>
 
-                                               {% if show_repo_time %}
-                                                       <td>
-                                                               {{ format_date(build.repo_time, relative=False) }}
+                                       {% for build in builds %}
+                                               <tr>
+                                                       <td class="name">
+                                                               <a class="{% module BuildState(build.type, build.state) %}"
+                                                                       href="/build/{{ build.uuid }}">
+                                                                       {% if build.is_broken() %}
+                                                                               <s>{{ build.name }}</s>
+                                                                       {% else %}
+                                                                               {{ build.name }}
+                                                                       {% end %}
+                                                               </a>
                                                        </td>
-                                               {% end %}
 
-                                               {% if show_can_move_forward %}
                                                        <td>
-                                                               {{ build.can_move_forward }}
+                                                               {% module JobsStatus(build) %}
                                                        </td>
-                                               {% end %}
-                                       </tr>
+
+                                                       {% if show_repo %}
+                                                               <td>
+                                                                       {% if build.repo %}
+                                                                               <a href="/distro/{{ build.distro.identifier }}">{{ build.distro.name }}</a> /
+                                                                               <a href="/distro/{{ build.distro.identifier }}/repo/{{ build.repo.identifier }}">{{ build.repo.name }}</a>
+                                                                       {% end %}
+                                                               </td>
+                                                       {% end %}
+
+                                                       {% if show_user %}
+                                                               {% if build.type == "scratch" and build.user %}
+                                                                       <td>
+                                                                               {% module LinkToUser(build.user) %}
+                                                                       </td>
+                                                               {% elif build.type == "release" %}
+                                                                       <td>{% module LinkToUser(build.pkg.maintainer) %}</td>
+                                                               {% else %}
+                                                                       <td></td>
+                                                               {% end %}
+                                                       {% end %}
+
+                                                       {% if show_when %}
+                                                               <td>
+                                                                       {{ format_date(build.created, relative=True) }}
+                                                               </td>
+                                                       {% end %}
+
+                                                       {% if show_repo_time %}
+                                                               <td>
+                                                                       {{ format_date(build.repo_time, relative=False) }}
+                                                               </td>
+                                                       {% end %}
+
+                                                       {% if show_can_move_forward %}
+                                                               <td>
+                                                                       {{ build.can_move_forward }}
+                                                               </td>
+                                                       {% end %}
+                                               </tr>
+                                       {% end %}
                                {% end %}
-                       {% end %}
-               </tbody>
-       </table>
+                       </tbody>
+               </table>
+       </div>
 {% else %}
-       <p class="muted ac">
+       <p class="text-muted">
                {{ _("There are no builds to show at this place right now.") }}
        </p>
 {% end %}