web: Refactor package detail page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/packages/name.html b/src/templates/packages/name.html
index 1aceb77faa52a82b25e03ce2ae310d9fabebbe00..2c26ad8a37f78ace6f92b76dec381180c662a137 100644 (file)
--- a/src/templates/packages/name.html
+++ b/src/templates/packages/name.html
@@ -3,16 +3,13 @@
 {% block title %}{{ _("Package") }} - {{ package.name }}{% end block %}
 
 {% block container %}
-       <nav aria-label="{{ _("You are here:") }}" role="navigation">
-               <ul class="breadcrumbs">
-                       <li>
-                               <a href="/">{{ _("Home") }}</a>
-                       </li>
+       <nav class="breadcrumb" aria-label="breadcrumbs">
+               <ul>
                        <li>
                                <a href="/packages">{{ _("Packages") }}</a>
                        </li>
-                       <li>
-                               <span class="show-for-sr">{{ _("Current") }}: </span> {{ package.name }}
+                       <li class="is-active">
+                               <a href="#" aria-current="page">{{ package.name }}</a>
                        </li>
                </ul>
        </nav>
@@ -20,40 +17,54 @@
        {% module PackageInfo(package) %}
 
        {% for distro in backend.distros %}
-               <h5>{{ distro }}</h5>
-
-               {% for repo in distro.repositories %}
-                       {% set builds = repo.get_builds_by_name(package.name) %}
-
-                       {% if builds %}
-                               <h6>{{ repo }}</h6>
-
-                               <p>
-                                       <ul class="menu simple">
-                                               {% for build in builds %}
-                                                       <li>
-                                                               <a href="/builds/{{ build.uuid }}">
-                                                                       {{ build }}
-                                                               </a>
-                                                       </li>
-                                               {% end %}
-                                       </ul>
-                               </p>
-                       {% end %}
-               {% end %}
+               <div class="block">
+                       <div class="card">
+                               <div class="card-content">
+                                       <h5 class="title is-5">{{ distro }}</h5>
+                               </div>
+
+                               {% for repo in distro.repositories %}
+                                       {% set builds = repo.get_builds_by_name(package.name) %}
+
+                                       {% if builds %}
+                                               <div class="card-content">
+                                                       <h6 class="subtitle is-6">{{ repo }}</h6>
+
+                                                       <p>
+                                                               <ul>
+                                                                       {% for build in builds %}
+                                                                               <li>
+                                                                                       <a href="/builds/{{ build.uuid }}">
+                                                                                               {{ build }}
+                                                                                       </a>
+                                                                               </li>
+                                                                       {% end %}
+                                                               </ul>
+                                                       </p>
+                                               </div>
+                                       {% end %}
+                               {% end %}
+                       </div>
+               </div>
        {% end %}
 
        {% if bugs %}
-               <h5>{{ _("Open Bugs In This Package") }}</h5>
+               <h4 class="title is-4">{{ _("Open Bugs In This Package") }}</h4>
 
-               {% module BugsList(bugs) %}
+               <div class="block">
+                       {% module BugsList(bugs) %}
+               </div>
 
-               <a class="secondary button expanded" href="{{ backend.bugzilla.list_url(package.name) }}">
-                       {{ _("Show All Bugs") }}
-               </a>
+               <div class="block">
+                       <div class="buttons">
+                               <a class="button is-success" href="{{ backend.bugzilla.enter_url(package.name) }}">
+                                       {{ _("File A New Bug") }}
+                               </a>
 
-               <a class="success button expanded" href="{{ backend.bugzilla.enter_url(package.name) }}">
-                       {{ _("File A New Bug") }}
-               </a>
+                               <a class="button is-info is-outlined" href="{{ backend.bugzilla.list_url(package.name) }}">
+                                       {{ _("Show All Bugs in Bugzilla") }}
+                               </a>
+                       </div>
+               </div>
        {% end %}
 {% end block %}