repos: Improve appearance of header

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

diff --git a/src/templates/repos/show.html b/src/templates/repos/show.html
index 60e83a4ddc56ff8ffa285ef853cc432fa63c62c6..b587df0eeeb340e5447f52784b9d72bacaa3531d 100644 (file)
--- a/src/templates/repos/show.html
+++ b/src/templates/repos/show.html
@@ -3,51 +3,51 @@
 {% block title %}{{ _("Repository") }} - {{ repo }}{% end block %}
 
 {% block body %}
-       <section class="section">
-               <div class="container">
-                       <nav class="breadcrumb" aria-label="breadcrumbs">
-                               <ul>
-                                       {% if repo.owner %}
-                                               <li>
-                                                       <a href="/users">{{ _("Users") }}</a>
-                                               </li>
-                                               <li>
-                                                       <a href="/users/{{ repo.owner.name }}">{{ repo.owner }}</a>
-                                               </li>
-                                               <li>
-                                                       <a href="#" disabled>{{ _("Distributions") }}</a>
-                                               </li>
-                                               <li>
-                                                       <a href="#" disabled>{{ distro }}</a>
-                                               </li>
-                                       {% else %}
+       <section class="hero is-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb" aria-label="breadcrumbs">
+                                       <ul>
+                                               {% if repo.owner %}
+                                                       <li>
+                                                               <a href="/users">{{ _("Users") }}</a>
+                                                       </li>
+                                                       <li>
+                                                               <a href="/users/{{ repo.owner.name }}">{{ repo.owner }}</a>
+                                                       </li>
+                                                       <li>
+                                                               <a href="#" disabled>{{ _("Distributions") }}</a>
+                                                       </li>
+                                                       <li>
+                                                               <a href="#" disabled>{{ distro }}</a>
+                                                       </li>
+                                               {% else %}
+                                                       <li>
+                                                               <a href="/distros">{{ _("Distributions") }}</a>
+                                                       </li>
+                                                       <li>
+                                                               <a href="/distros/{{ distro.slug }}">{{ distro }}</a>
+                                                       </li>
+                                               {% end %}
                                                <li>
-                                                       <a href="/distros">{{ _("Distributions") }}</a>
+                                                       <a href="#" disabled>{{ _("Repositories") }}</a>
                                                </li>
-                                               <li>
-                                                       <a href="/distros/{{ distro.slug }}">{{ distro }}</a>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ repo }}</a>
                                                </li>
-                                       {% end %}
-                                       <li>
-                                               <a href="#" disabled>{{ _("Repositories") }}</a>
-                                       </li>
-                                       <li class="is-active">
-                                               <a href="#" aria-current="page">{{ repo }}</a>
-                                       </li>
-                               </ul>
-                       </nav>
+                                       </ul>
+                               </nav>
 
-                       <h1 class="title is-1">{{ distro }} - {{ repo }}</h1>
+                               <h1 class="title is-1">{{ distro }} - {{ repo }}</h1>
 
-                       <div class="block">
-                               <div class="box">
-                                       {# Description #}
-                                       {% if repo.description %}
+                               {# Description #}
+                               {% if repo.description %}
+                                       <div class="block is-size-5 p-5">
                                                {% module Text(repo.description) %}
+                                       </div>
+                               {% end %}
 
-                                               <hr>
-                                       {% end %}
-
+                               <div class="block">
                                        <nav class="level">
                                                <div class="level-item has-text-centered">
                                                        <div>
@@ -72,18 +72,27 @@
                                                </div>
                                        </nav>
                                </div>
+                       </div>
+               </div>
+       </section>
 
-                               <div class="buttons">
-                                       <a class="button is-primary" href="{{ repo.url }}.repo">
-                                               {{ _("Download Configuration") }}
-                                       </a>
+       {# Actions #}
+       <section class="section">
+               <div class="container">
+                       <div class="buttons">
+                               <a class="button is-primary" href="{{ repo.url }}/builds">
+                                       {{ _("Show All Builds") }}
+                               </a>
 
-                                       {% if repo.has_perm(current_user) %}
-                                               <a class="button is-warning" href="{{ repo.url }}/edit">
-                                                       {{ _("Edit") }}
-                                               </a>
-                                       {% end %}
-                               </div>
+                               <a class="button is-light" href="{{ repo.url }}.repo">
+                                       {{ _("Download Configuration") }}
+                               </a>
+
+                               {% if repo.has_perm(current_user) %}
+                                       <a class="button is-warning" href="{{ repo.url }}/edit">
+                                               {{ _("Edit") }}
+                                       </a>
+                               {% end %}
                        </div>
                </div>
        </section>
@@ -97,10 +106,6 @@
                                <h4 class="title is-4">{{ _("Recently Added Builds") }}</h4>
 
                                {% module BuildsList(builds) %}
-
-                               <a class="button is-primary" href="{{ repo.url }}/builds">
-                                       {{ _("Show All Builds") }}
-                               </a>
                        </div>
                </section>
        {% end %}