bootstrap 4: rework packages detail list page

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

diff --git a/src/templates/modules/changelog/entry.html b/src/templates/modules/changelog/entry.html
index 1e4ba8280fbc26a414bde2a09fd563d97f212720..511a0a90c791757107d211fbb2c61d8acdc2c529 100644 (file)
--- a/src/templates/modules/changelog/entry.html
+++ b/src/templates/modules/changelog/entry.html
@@ -1,27 +1,45 @@
-<li class="media">
-       <div class="media-body">
-               <div class="well {% if build.type == "release" and build.repo %}well-build-state-{{ build.repo.type }}{% elif build.type == "scratch" %}well-build-type-scratch{% end %}">
-                       <h4>
-                               <a class="{% if build.is_broken() %}line-through{% end %}" href="/build/{{ build.uuid }}">{{ build.name }}</a>
-
-                               {% if build.type == "release" and build.repo %}
-                                       <small class="pull-right">
-                                               <a href="/distro/{{ build.repo.distro.identifier }}/repo/{{ build.repo.name }}">
-                                                       {{ build.repo.distro.name }} &dash;
-                                                       {% if build.repo.type == "stable" %}
-                                                               <span class="text-success">{{ build.repo.name }}</span>
-                                                       {% elif build.repo.type == "unstable" %}
-                                                               <span class="text-warning">{{ build.repo.name }}</span>
-                                                       {% elif build.repo.type == "testing" %}
-                                                               <span class="text-error">{{ build.repo.name }}</span>
-                                                       {% end %}
-                                               </a>
-                                       </small>
-                               {% elif build.type == "scratch" %}
-                                       <span class="label label-important pull-right">
-                                               {{ _("Scratch build") }}
-                                       </span>
-                               {% end %}
+<div class="card mb-3
+               {% if build.type == "release" and build.repo.type == "stable" %}
+                       border-success
+               {% elif build.type == "release" and build.repo.type == "unstable" %}
+                       border-warning
+               {% elif build.type == "release" and build.repo.type == "testing" %}
+                       border-danger
+               {% elif build.type == "scratch" %}
+                       border-danger
+               {% end %}" style="width:100%;">
+               <div class="card-header
+               {% if build.type == "release" and build.repo %}
+                       {% if build.repo.type == "stable" %}
+                               text-success">
+                               <a href="/distro/{{ build.repo.distro.identifier }}/repo/{{ build.repo.name }}">
+                                       {{ build.repo.distro.name }} &dash; {{ build.repo.name }}
+                               </a>
+                       {% elif build.repo.type == "unstable" %}
+                               text-warning">
+                               <a href="/distro/{{ build.repo.distro.identifier }}/repo/{{ build.repo.name }}">
+                                       {{ build.repo.distro.name }} &dash; {{ build.repo.name }}
+                               </a>
+                       {% elif build.repo.type == "testing" %}
+                               text-danger">
+                               <a href="/distro/{{ build.repo.distro.identifier }}/repo/{{ build.repo.name }}">
+                                       {{ build.repo.distro.name }} &dash; {{ build.repo.name }}
+                               </a>
+                       {% end %}
+               {% elif build.type == "scratch" %}
+                       text-secondary">
+                       {{ _("Scratch build") }}
+               {% end %}
+               </div>
+               <div class="card-body">
+                       <h4 class="card-title">
+                               <a href="/build/{{ build.uuid }}">
+                                       {% if build.is_broken() %}
+                                               <s>{{ build.name }}</s>
+                                       {% else %}
+                                               {{ build.name }}
+                                       {% end %}
+                               </a>
                        </h4>
 
                        <hr>
@@ -34,22 +52,21 @@
 
                                        <p class="muted">
                                                {{ _("Author") }} {% module LinkToUser(build.commit.author) %}
-                                               <span class="pull-right">{{ locale.format_date(build.created, shorter=True) }}</span>
                                        </p>
                                {% else %}
                                        <p class="muted">
                                                {{ _("No commit message.") }}
-                                               <span class="pull-right">{{ locale.format_date(build.created, shorter=True) }}</span>
                                        </p>
                                {% end %}
 
                        {% elif build.type == "scratch" %}
                                <p class="muted">
                                        {{ _("Owner") }} {% module LinkToUser(build.owner) %}
-
-                                       <span class="pull-right">{{ locale.format_date(build.created, shorter=True) }}</span>
                                </p>
                        {% end %}
-               </div>
-       </div>
-</li>
+                       </div>
+                       <div class="card-footer text-muted text-right">
+                               {{ locale.format_date(build.created, shorter=True) }}
+                       </div>
+
+</div>

diff --git a/src/templates/modules/changelog/index.html b/src/templates/modules/changelog/index.html
index 44f0b198c361b82ba529bb83b8f4213ed5789984..828463b64d71e78e42e7bec382be19254d6cdf7b 100644 (file)
--- a/src/templates/modules/changelog/index.html
+++ b/src/templates/modules/changelog/index.html
@@ -1,5 +1,5 @@
-<ul class="media-list">
-       {% for b in builds %}
-               {% module ChangelogEntry(b) %}
-       {% end %}
-</ul>
+
+{% for b in builds %}
+       {% module ChangelogEntry(b) %}
+{% end %}
+

diff --git a/src/templates/modules/package-header.html b/src/templates/modules/package-header.html
index 0feaa871e628b3fe935219fb32fdddd85f5d3d18..6308bd4dc3b0e984ad3b4e06ee30b5f7c6d667b6 100644 (file)
--- a/src/templates/modules/package-header.html
+++ b/src/templates/modules/package-header.html
@@ -1,27 +1,37 @@
-<div class="lead lead-small ac">
+<p class="lead">
        {% module Text(pkg.description) %}
-</div>
+</p>
 
-<hr>
+<div class="table-responsive">
+       <table class="table table-hover table-sm">
+               <tbody>
+                       {% if pkg.url %}
+                               <tr>
+                                       <th >{{ _("Home") }}</th>
+                                       <td>{% raw linkify(pkg.url, shorten=True) %}</td>
+                               </tr>
+                       {% end %}
+                       {% if pkg.license %}
+                               <tr>
+                                       <th >{{ _("License") }}</th>
+                                       <td>{{ pkg.license }}</td>
+                               </tr>
+                       {% end %}
 
-<dl class="dl-horizontal">
-       {% if pkg.url %}
-               <dt>{{ _("Home") }}</dt>
-               <dd>{% raw linkify(pkg.url, shorten=True) %}</dd>
-       {% end %}
+                       {% if pkg.groups %}
+                               <tr>
+                                       <th >{{ _("Group", "Groups", len(pkg.groups)) }}</th>
+                                       <td>{{ locale.list(pkg.groups) }}</td>
+                               </tr>
+                       {% end %}
 
-       {% if pkg.license %}
-               <dt>{{ _("License") }}</dt>
-               <dd>{{ pkg.license }}</dd>
-       {% end %}
+                       {% if pkg.maintainer %}
+                               <tr>
+                                       <th >{{ _("Maintainer") }}</th>
+                                       <td>{% module LinkToUser(pkg.maintainer) %}</td>
+                               </tr>
+                       {% end %}
 
-       {% if pkg.groups %}
-               <dt>{{ _("Group", "Groups", len(pkg.groups)) }}</dt>
-               <dd>{{ locale.list(pkg.groups) }}</dd>
-       {% end %}
-
-       {% if pkg.maintainer %}
-               <dt>{{ _("Maintainer") }}</dt>
-               <dd>{% module LinkToUser(pkg.maintainer) %}</dd>
-       {% end %}
-</dl>
+               </tbody>
+         </table>
+</div>
\ No newline at end of file

diff --git a/src/templates/package-detail-list.html b/src/templates/package-detail-list.html
index ee4556b1d5efd692519603253c73c7cc9b91682d..6b3104c6a7956c35853a688de9c70b59ad437ac9 100644 (file)
--- a/src/templates/package-detail-list.html
+++ b/src/templates/package-detail-list.html
@@ -3,78 +3,82 @@
 {% block title %}{{ _("Package") }} {{ pkg.name }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/packages">{{ _("Packages") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/package/{{ pkg.name }}">{{ pkg.name }}</a>
-               </li>
-       </ul>
-
-       <div class="page-header">
-               <div class="pull-right">
-                       <ul class="nav nav-pills">
-                               <li>
-                                       <a href="/package/{{ pkg.name }}/builds/times">
+       <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"><a href="/packages">{{ _("Packages") }}</a></li>
+                                       <li class="breadcrumb-item active"><a href="/package/{{ pkg.name }}">{{ pkg.name }}</a></li>
+                               </ol>
+                       </nav>
+               </div>
+       </div>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                       <h2>
+                               {{ pkg.name }}<br>
+                               <small>{{ pkg.summary }}</small>
+                       </h2>
+               </div>
+               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                       <ul class="nav justify-content-center justify-content-lg-end justify-content-xl-end">
+                               <li class="nav-item">
+                                       <a class="nav-link" href="/package/{{ pkg.name }}/builds/times">
                                                {{ _("Build times") }}
                                        </a>
                                </li>
-                               <li>
-                                       <a href="/package/{{ pkg.name }}/builds/scratch">
+                               <li class="nav-item">
+                                       <a class="nav-link" href="/package/{{ pkg.name }}/builds/scratch">
                                                {{ _("Scratch builds") }}
                                        </a>
                                </li>
-                               <li>
-                                       <a href="/package/{{ pkg.name }}/builds/test">
+                               <li class="nav-item">
+                                       <a class="nav-link" href="/package/{{ pkg.name }}/builds/test">
                                                {{ _("Test builds") }}
                                        </a>
                                </li>
                        </ul>
                </div>
-
-               <h2>
-                       {{ pkg.name }}<br>
-                       <small>{{ pkg.summary }}</small>
-               </h2>
        </div>
 
+
        <div class="row">
-               <div class="span6">
-                       {% module PackageHeader(pkg) %}
+                       <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                               {% module PackageHeader(pkg) %}
+                       </div>
 
-                       {% if bugs %}
-                               <br><hr>
+                       <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                               {% module Changelog(builds=builds) %}
 
-                               <h4>
-                                       <div class="pull-right">
-                                               <div class="btn-group">
-                                                       <a class="btn btn-mini" href="{{ backend.bugzilla.enter_url(pkg.name) }}" target="_blank">
-                                                               <i class="icon-asterisk"></i> {{ _("File new bug") }}
-                                                       </a>
-                                                       <a class="btn btn-mini" href="{{ backend.bugzilla.buglist_url(pkg.name) }}" target="_blank">
-                                                               {{ _("Show all bugs") }}
-                                                       </a>
-                                               </div>
-                                       </div>
+                               <h5 class="text-center">
+                                       <a href="/package/{{ name }}/changelog">{{ _("Full changelog") }}</a>
+                               </h5>
+                       </div>
+       </div>
 
+       {% if bugs %}
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                               <h4>
                                        {{ _("Open bugs") }}
                                </h4>
-                               {% module BugsTable(pkg, bugs) %}
-                       {% end %}
+                       </div>
+                       <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                               <div class="btn-group">
+                                       <a class="btn btn-secondary" href="{{ backend.bugzilla.enter_url(pkg.name) }}" target="_blank">
+                                               {{ _("File new bug") }}
+                                       </a>
+                                       <a class="btn btn-secondary" href="{{ backend.bugzilla.buglist_url(pkg.name) }}" target="_blank">
+                                               {{ _("Show all bugs") }}
+                                       </a>
+                               </div>
+                       </div>
                </div>
-
-               <div class="span6">
-                       {% module Changelog(builds=builds) %}
-
-                       <p class="ac">
-                               <a href="/package/{{ name }}/changelog">{{ _("Full changelog") }}</a>
-                       </p>
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               {% module BugsTable(pkg, bugs) %}
+                       </div>
                </div>
-       </div>
+       {% end %}
 {% end block %}