web: Refactor the package detail page

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

diff --git a/src/templates/packages/modules/info.html b/src/templates/packages/modules/info.html
index f7de79c797094872f6be82c8a202eec121db56ab..14bead0958fae5a9f8311d28d4f8a1267acaede6 100644 (file)
--- a/src/templates/packages/modules/info.html
+++ b/src/templates/packages/modules/info.html
@@ -8,39 +8,68 @@
        </h1>
 
        {% if package.summary %}
-               <h6 class="subtitle is-6">
+               <h4 class="subtitle is-4">
                        {{ package.summary }}
-               </h6>
+               </h4>
        {% end %}
 
-       <div class="content">
-               {% module Text(package.description) %}
-       </div>
+       <div class="card">
+               <div class="card-content">
+                       <nav class="level">
+                               {# Website #}
+                               {% if package.url %}
+                                       <div class="level-item has-text-centered">
+                                               <div>
+                                                       <p class="heading">{{ _("Website") }}</p>
+                                                       <p>
+                                                               <a href="{{ package.url }}">
+                                                                       {{ extract_hostname(package.url) }}
+                                                               </a>
+                                                       </p>
+                                               </div>
+                                       </div>
+                               {% end %}
 
-       {# XXX what to do with this? #}
-       <ul>
-               {% if package.url %}
-                       <li>
-                               <a href="{{ package.url }}">{{ extract_hostname(package.url) }}</a>
-                       </li>
-               {% end %}
+                               {# License #}
+                               {% if package.license %}
+                                       <div class="level-item has-text-centered">
+                                               <div>
+                                                       <p class="heading">{{ _("License") }}</p>
+                                                       <p>{{ package.license }}</p>
+                                               </div>
+                                       </div>
+                               {% end %}
 
-               {% if package.license %}
-                       <li>
-                               {{ package.license }}
-                       </li>
-               {% end %}
+                               {# Groups #}
+                               {% if package.groups %}
+                                       <div class="level-item has-text-centered">
+                                               <div>
+                                                       <p class="heading">{{ _("Groups") }}</p>
+                                                       <div class="tags">
+                                                               {% for group in package.groups %}
+                                                                       <span class="tag">{{ group }}</span>
+                                                               {% end %}
+                                                       </div>
+                                               </div>
+                                       </div>
+                               {% end %}
 
-               {% if package.groups %}
-                       <li>
-                               {{ locale.list(package.groups) }}
-                       </li>
-               {% end %}
+                               {# Maintainer #}
+                               {% if package.maintainer %}
+                                       <div class="level-item has-text-centered">
+                                               <div>
+                                                       <p class="heading">{{ _("Maintainer") }}</p>
+                                                       <p>
+                                                               {% module LinkToUser(package.maintainer) %}
+                                                       </p>
+                                               </div>
+                                       </div>
+                               {% end %}
+                       </nav>
 
-               {% if package.maintainer %}
-                       <li>
-                               {% module LinkToUser(package.maintainer) %}
-                       </li>
-               {% end %}
-       </ul>
+                       <div class="content">
+                               {% module Text(package.description) %}
+                       </div>
+               </div>
+       </div>
 </div>

diff --git a/src/templates/packages/name.html b/src/templates/packages/name.html
index 2c26ad8a37f78ace6f92b76dec381180c662a137..ee62462fcc4914f08e3885a84040abcccb0b5d6d 100644 (file)
--- a/src/templates/packages/name.html
+++ b/src/templates/packages/name.html
@@ -18,40 +18,35 @@
 
        {% for distro in backend.distros %}
                <div class="block">
-                       <div class="card">
-                               <div class="card-content">
-                                       <h5 class="title is-5">{{ distro }}</h5>
-                               </div>
+                       <h4 class="title is-4">{{ distro }}</h4>
 
-                               {% for repo in distro.repositories %}
-                                       {% set builds = repo.get_builds_by_name(package.name) %}
+                       {% 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>
+                               {% if builds %}
+                                       <h5 class="subtitle is-5">{{ repo }}</h5>
 
-                                                       <p>
-                                                               <ul>
-                                                                       {% for build in builds %}
-                                                                               <li>
-                                                                                       <a href="/builds/{{ build.uuid }}">
-                                                                                               {{ build }}
-                                                                                       </a>
-                                                                               </li>
-                                                                       {% end %}
-                                                               </ul>
-                                                       </p>
-                                               </div>
-                                       {% end %}
+                                       <div class="columns">
+                                               {% for build in builds %}
+                                                       <div class="column is-2">
+                                                               <a href="/builds/{{ build.uuid }}">
+                                                                       {{ build }}
+                                                               </a>
+
+                                                               {# XXX We would need to add some more information here #}
+                                                               {# e.g. is this build finished/obsolete? #}
+                                                       </div>
+                                               {% end %}
+                                       </div>
                                {% end %}
-                       </div>
+                       {% end %}
                </div>
        {% end %}
 
        {% if bugs %}
-               <h4 class="title is-4">{{ _("Open Bugs In This Package") }}</h4>
-
                <div class="block">
+                       <h4 class="title is-4">{{ _("Open Bugs") }}</h4>
+
                        {% module BugsList(bugs) %}
                </div>