packages: Refactor element that shows packages in distributions

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

diff --git a/src/templates/packages/name.html b/src/templates/packages/name.html
index 825d2d8bf6d80a4bd4c3716dc2afa2349c6e61ab..3c1c221d2429ac026c3b281b7cf65de0356e8feb 100644 (file)
--- a/src/templates/packages/name.html
+++ b/src/templates/packages/name.html
@@ -20,27 +20,28 @@
 
        <section class="section">
                {% for distro in backend.distros %}
-                       <div class="block">
-                               <h4 class="title is-4">{{ distro }}</h4>
+                       <div class="panel">
+                               <div class="panel-heading">
+                                       {{ distro }}
+                               </div>
 
                                {% for repo in distro.repositories %}
                                        {% set builds = repo.get_builds_by_name(package.name) %}
 
                                        {% if builds %}
-                                               <h5 class="subtitle is-5">{{ repo }}</h5>
+                                               <div class="panel-block">
+                                                       <h5 class="subtitle is-5">{{ repo }}</h5>
+                                               </div>
 
-                                               <div class="columns">
-                                                       {% for build in builds %}
-                                                               <div class="column is-2">
-                                                                       <a href="/builds/{{ build.uuid }}">
-                                                                               {{ build }}
-                                                                       </a>
+                                               {% for build in builds %}
+                                                       <a class="panel-block" href="/builds/{{ build.uuid }}">
+                                                               <span class="panel-icon">
+                                                                       <i class="fa-solid fa-box" aria-hidden="true"></i>
+                                                               </span>
 
-                                                                       {# XXX We would need to add some more information here #}
-                                                                       {# e.g. is this build finished/obsolete? #}
-                                                               </div>
-                                                       {% end %}
-                                               </div>
+                                                               {{ build }}
+                                                       </a>
+                                               {% end %}
                                        {% end %}
                                {% end %}
                        </div>