web: Refactor repository detail page

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

diff --git a/src/templates/repos/show.html b/src/templates/repos/show.html
index f2bf35f14afdaf4d9f4c23ff16c7b5cdec6822ac..7047c81c7c5ef9b57210b0bed64250626940137d 100644 (file)
--- a/src/templates/repos/show.html
+++ b/src/templates/repos/show.html
@@ -3,81 +3,76 @@
 {% block title %}{{ _("Repository") }} - {{ repo }}{% 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>
                        {% if repo.owner %}
                                <li>
-                                       <a href="/users">{{ _("Users") }}</a>
+                                       <a href="/users">{{ _("Users") }}</a>
                                </li>
                                <li>
-                                       <a href="/users/{{ repo.owner.name }}">{{ repo.owner }}</a>
+                                       <a href="/users/{{ repo.owner.name }}">{{ repo.owner }}</a>
                                </li>
                                <li>
-                                       {{ _("Distributions") }}
+                                       <a href="#" disabled>{{ _("Distributions") }}</a>
                                </li>
                                <li>
-                                       {{ distro }}
+                                       <a href="#" disabled>{{ distro }}</a>
                                </li>
                        {% else %}
                                <li>
                                        <a href="/distros">{{ _("Distributions") }}</a>
                                </li>
                                <li>
-                                       <a href="/distros/{{ distro.slug }}">{{ distro }}</a>
+                                       <a href="/distros/{{ distro.slug }}">{{ distro }}</a>
                                </li>
                        {% end %}
                        <li>
-                               {{ _("Repositories") }}
+                               <a href="#" disabled>{{ _("Repositories") }}</a>
                        </li>
-                       <li>
-                               <span class="show-for-sr">{{ _("Current") }}: </span> {{ repo }}
+                       <li class="is-active">
+                               <a href="#" aria-current="page">{{ repo }}</a>
                        </li>
                </ul>
        </nav>
 
-       <h1>
-               {{ distro }} - {{ repo }}
-       </h1>
-
-       {% if repo.description %}
-               <div class="callout">
-                       {% module Text(repo.description) %}
-               </div>
-       {% end %}
+       <h1 class="title is-1">{{ distro }} - {{ repo }}</h1>
 
-       <a class="secondary expanded button" href="{{ repo.url }}.repo">
-               {{ _("Download Configuration") }}
-       </a>
 
-       <a class="warning expanded button" href="{{ repo.url }}/edit">
-               {{ _("Edit") }}
-       </a>
-
-       <div class="callout">
-               <h5>{{ _("Statistics") }}</h5>
+       <div class="block">
+               <div class="box">
+                       {# Description #}
+                       {% if repo.description %}
+                               {% module Text(repo.description) %}
+                       {% end %}
 
-               <div class="grid-x">
-                       <div class="cell">
-                               {{ _("Size") }}
+                       <nav class="level">
+                               <div class="level-left">
+                                       {# Sizes #}
+                                       {% for arch, size in sorted(repo.size.items()) %}
+                                               <div class="level-item has-text-centered">
+                                                       <div>
+                                                               <p class="heading">
+                                                                       {{ _("Size") }} <span class="tag">{{ arch }}</span>
+                                                               </p>
+                                                               <p class="title">
+                                                                       {{ format_size(size) }}
+                                                               </p>
+                                                       </div>
+                                               </div>
+                                       {% end %}
+                               </div>
+                       </nav>
 
-                               <table>
-                                       <tbody>
-                                               {% for arch, size in sorted(repo.size.items()) %}
-                                                       <tr>
-                                                               <th scope="row">
-                                                                       {{ arch }}
-                                                               </th>
+                       <div class="buttons are-small">
+                               <a class="button is-primary" href="{{ repo.url }}.repo">
+                                       {{ _("Download Configuration") }}
+                               </a>
 
-                                                               <td class="text-right">
-                                                                       {{ format_size(size) }}
-                                                               </td>
-                                                       </tr>
-                                               {% end %}
-                                       </tbody>
-                               </table>
+                               {% if repo.has_perm(current_user) %}
+                                       <a class="button is-warning" href="{{ repo.url }}/edit">
+                                               {{ _("Edit") }}
+                                       </a>
+                               {% end %}
                        </div>
                </div>
        </div>