packages: Refactor the detail page

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

diff --git a/src/templates/modules/packages-files-table.html b/src/templates/modules/packages-files-table.html
index 7157ad43a526e647c7afbf9131ee4c379552f9c1..76085f823bd4bb8eb0583c0f30b0c2da7b12902b 100644 (file)
--- a/src/templates/modules/packages-files-table.html
+++ b/src/templates/modules/packages-files-table.html
@@ -1,33 +1,43 @@
 {% import stat %}
 
-<table class="hover stacked">
+<table class="table is-striped is-hoverable is-fullwidth">
        <tbody>
                {% for file in filelist %}
+                       {% set mode  = stat.filemode(file.mode) %}
+                       {% set owner = "%6s:%-6s" % (file.uname, file.gname) %}
+                       {% set size  = "%6s" % ("-" if file.size is None else format_size(file.size)) %}
+
                        <tr>
-                               <td>
-                                       {% set mode  = stat.filemode(file.mode) %}
-                                       {% set owner = "%6s:%-6s" % (file.uname, file.gname) %}
-                                       {% set size  = "%6s" % ("-" if file.size is None else format_size(file.size)) %}
+                               <td class="is-family-monospace has-text-right">
+                                       {{ mode }}
+                               </td>
 
-                                       <pre>{{ mode }} {{ owner }} {{ size }} {{ file.path }}</pre>
+                               <td class="is-family-monospace has-text-center">
+                                       {{ owner }}
                                </td>
 
-                               <td>
-                                       <ul class="simple menu align-right">
+                               <td class="is-family-monospace has-text-right">
+                                       {{ size }}
+                               </td>
+
+                               <td class="is-family-monospace">
+                                       {{ file.path }}
+
+                                       <div class="buttons are-small is-pulled-right">
                                                {% if file.is_viewable() %}
-                                                       <li>
-                                                               <a class="btn btn-light" href="/package/{{ pkg.uuid }}/view{{ file.path }}">
+                                                       <a class="button is-primary" href="/packages/{{ pkg.uuid }}/view{{ file.path }}">
+                                                               <span class="icon is-small">
                                                                        <i class="fa-solid fa-magnifying-glass" title="{{ _("View File") }}"></i>
-                                                               </a>
-                                                       </li>
+                                                               </span>
+                                                       </a>
                                                {% end %}
 
                                                {% if file.is_downloadable() %}
-                                                       <li>
-                                                               <a href="/package/{{ pkg.uuid }}/download{{ file.path }}">
+                                                       <a class="button is-dark" href="/packages/{{ pkg.uuid }}/download{{ file.path }}">
+                                                               <span class="icon is-small">
                                                                        <i class="fa-solid fa-download" title="{{ _("Download" ) }}"></i>
-                                                               </a>
-                                                       </li>
+                                                               </span>
+                                                       </a>
                                                {% end %}
                                        </ul>
                                </td>

diff --git a/src/templates/packages/modules/dependencies.html b/src/templates/packages/modules/dependencies.html
index 0bfe347ba5aa60f275771295c2f0eacebb49954a..1ccdaef6a3641ebb79582bb45d8f1dda8f7f94be 100644 (file)
--- a/src/templates/packages/modules/dependencies.html
+++ b/src/templates/packages/modules/dependencies.html
@@ -1,21 +1,19 @@
-<ul class="tabs" data-tabs id="dependencies">
-       {% for i, dep in enumerate((dep for dep in deps if deps[dep])) %}
-               <li class="tabs-title {% if i == 0 %}is-active{% end %}">
-                       <a href="#{{ dep.lower() }}" {% if i == 0 %}aria-selected="true"{% end %}>
-                               {{ dep }}
-                       </a>
-               </li>
-       {% end %}
-</ul>
+<p class="title is-5">{{ _("Dependencies") }}</p>
+
+<div class="columns is-multiline">
+       {% for dep in deps %}
+               {% if deps[dep] %}
+                       <div class="column is-half">
+                               <p class="title is-6">{{ dep }}</p>
 
-<div class="tabs-content" data-tabs-content="dependencies">
-       {% for i, dep in enumerate((dep for dep in deps if deps[dep])) %}
-               <div class="tabs-panel {% if i == 0 %}is-active{% end %}" id="{{ dep.lower() }}">
-                       <ul class="no-bullet">
-                               {% for line in deps[dep] %}
-                                       <li>{{ line }}</li>
-                               {% end %}
-                       </ul>
-               </div>
+                               <ul>
+                                       {% for line in deps[dep] %}
+                                               <li>
+                                                       <span class="is-family-monospace">{{ line }}</span>
+                                               </li>
+                                       {% end %}
+                               </ul>
+                       </div>
+               {% end %}
        {% end %}
 </div>

diff --git a/src/templates/packages/show.html b/src/templates/packages/show.html
index c937907c855f524cc407d1342bd1babfcfd5bfbb..03286e8aceda37688e819ef65d25281341069157 100644 (file)
--- a/src/templates/packages/show.html
+++ b/src/templates/packages/show.html
@@ -1,51 +1,66 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Package") }} - {{ package }}{% end block %}
+{% block title %}{{ _("Packages") }} - {{ package }}{% 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 }}
+                               <a href="/packages/{{ package.name }}">{{ package.name }}</a>
+                       </li>
+                       <li class="is-active">
+                               <a href="#" aria-current="page">{{ package.evr }}</a>
                        </li>
                </ul>
        </nav>
 
        {% module PackageInfo(package, show_evr=True) %}
 
-       <a class="expanded primary button" href="{{ package.download_url }}">
-               {{ _("Download Package") }} ({{ format_size(package.size) }})
-       </a>
-
-       {% for build in package.builds %}
-               <a class="expanded secondary button" href="/builds/{{ build.uuid }}">
-                       {{ _("Build from %s") % locale.format_date(build.created_at) }}
+       <div class="buttons">
+               {# Download Button #}
+               <a class="button is-primary" href="{{ package.download_url }}">
+                       {{ _("Download Package") }} ({{ format_size(package.size) }})
                </a>
-       {% end %}
+
+               {# Dropdown with all Builds #}
+               {% if package.builds %}
+                       <div class="dropdown">
+                               <div class="dropdown-trigger">
+                                       <button class="button is-light" aria-haspopup="true" aria-controls="dropdown-builds">
+                                               <span>{{ _("Builds") }}</span>
+                                               <span class="icon is-small">
+                                                       <i class="fas fa-angle-down" aria-hidden="true"></i>
+                                               </span>
+                                       </button>
+                               </div>
+                               <div class="dropdown-menu" id="dropdown-builds" role="menu">
+                                       <div class="dropdown-content">
+                                               {% for build in package.builds %}
+                                                       <a href="/builds/{{ build.uuid }}" class="dropdown-item">
+                                                               {{ _("Build from %s") % locale.format_date(build.created_at) }}
+                                                       </a>
+                                               {% end %}
+                                       </div>
+                               </div>
+                       </div>
+               {% end %}
+       </div>
 
        {# XXX add reference to commit for source packages #}
 
-       {% module PackageDependencies(package) %}
+       <div class="block">
+               {% module PackageDependencies(package) %}
+       </div>
 
+       {# Filelist #}
        {% if package.files %}
-               <div class="row">
-                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                               <h3 style="word-wrap: break-word;">
-                                       {{ _("Filelist") }}
-                               </h3>
-                       </div>
-               </div>
+               <div class="block">
+                       <h5 class="title is-5">{{ _("Filelist") }}</h5>
 
-               <div class="row">
-                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                               {% module PackageFilesTable(package, package.files) %}
-                       </div>
+                       {% module PackageFilesTable(package, package.files) %}
                </div>
        {% end %}
 {% end block %}