packages: Improve appearance of the header

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 73051cdb420fde85876b18a6edca3df048160078..47bd3b15bb694da39b621655c577ae015e8ffe73 100644 (file)
--- a/src/templates/packages/modules/info.html
+++ b/src/templates/packages/modules/info.html
@@ -8,70 +8,66 @@
        </h1>
 
        {% if package.summary %}
-               <h4 class="subtitle is-4">
+               <h5 class="subtitle is-5">
                        {{ package.summary }}
                </h4>
        {% end %}
 
-       <div class="card">
-               <div class="card-content">
-                       <div class="block">
-                               {% module Text(package.description) %}
-                       </div>
+       <div class="block is-size-5 p-5">
+               {% module Text(package.description) %}
+       </div>
 
-                       <div class="block">
-                               <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 %}
+       <div class="block">
+               <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 %}
 
-                                       {# License #}
-                                       {% if package.license %}
-                                               <div class="level-item has-text-centered">
-                                                       <div>
-                                                               <p class="heading">{{ _("License") }}</p>
-                                                               <p>{{ package.license }}</p>
-                                                       </div>
-                                               </div>
-                                       {% 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 %}
 
-                                       {# 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>
+                       {# 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>
-                                       {% end %}
+                                       </div>
+                               </div>
+                       {% end %}
 
-                                       {# Packager #}
-                                       {% if package.packager %}
-                                               <div class="level-item has-text-centered">
-                                                       <div>
-                                                               <p class="heading">{{ _("Packager") }}</p>
-                                                               <p>
-                                                                       {% module LinkToUser(package.packager) %}
-                                                               </p>
-                                                       </div>
-                                               </div>
-                                       {% end %}
-                               </nav>
-                       </div>
-               </div>
+                       {# Packager #}
+                       {% if package.packager %}
+                               <div class="level-item has-text-centered">
+                                       <div>
+                                               <p class="heading">{{ _("Packager") }}</p>
+                                               <p>
+                                                       {% module LinkToUser(package.packager) %}
+                                               </p>
+                                       </div>
+                               </div>
+                       {% end %}
+               </nav>
        </div>
 </div>

diff --git a/src/templates/packages/name.html b/src/templates/packages/name.html
index 99b91bb019028ef3ce4558784b4f367a55471cba..21b3c0ff39b0dd8674c202dd9871af706de57155 100644 (file)
--- a/src/templates/packages/name.html
+++ b/src/templates/packages/name.html
@@ -3,20 +3,22 @@
 {% block title %}{{ _("Package") }} - {{ package.name }}{% end block %}
 
 {% block body %}
-       <section class="section">
-               <div class="container">
-                       <nav class="breadcrumb" aria-label="breadcrumbs">
-                               <ul>
-                                       <li>
-                                               <a href="/packages">{{ _("Packages") }}</a>
-                                       </li>
-                                       <li class="is-active">
-                                               <a href="#" aria-current="page">{{ package.name }}</a>
-                                       </li>
-                               </ul>
-                       </nav>
+       <section class="hero is-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/packages">{{ _("Packages") }}</a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ package.name }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
 
-                       {% module PackageInfo(package) %}
+                               {% module PackageInfo(package) %}
+                       </div>
                </div>
        </section>
 

diff --git a/src/templates/packages/show.html b/src/templates/packages/show.html
index 72c1267fb7796dc711d3bd358c06641be6c28a59..acdab98d60ac151ba44eec11c3c7d9aec3b914b9 100644 (file)
--- a/src/templates/packages/show.html
+++ b/src/templates/packages/show.html
@@ -3,24 +3,36 @@
 {% block title %}{{ _("Packages") }} - {{ package }}{% end block %}
 
 {% block body %}
-       <section class="section">
-               <div class="container">
-                       <nav class="breadcrumb" aria-label="breadcrumbs">
-                               <ul>
-                                       <li>
-                                               <a href="/packages">{{ _("Packages") }}</a>
-                                       </li>
-                                       <li>
-                                               <a href="/packages/{{ package.name }}">{{ package.name }}</a>
-                                       </li>
-                                       <li class="is-active">
-                                               <a href="#" aria-current="page">{{ package.evr }}</a>
-                                       </li>
-                               </ul>
-                       </nav>
+       <section class="hero is-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/packages">{{ _("Packages") }}</a>
+                                               </li>
+                                               <li>
+                                                       <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) %}
 
-                       {% module PackageInfo(package, show_evr=True) %}
+                               {# XXX add reference to commit for source packages #}
 
+                               <div class="block">
+                                       {% module PackageDependencies(package) %}
+                               </div>
+                       </div>
+               </div>
+       </section>
+
+       <section class="section">
+               <div class="container">
                        <div class="buttons">
                                {# Download Button #}
                                <a class="button is-primary" href="{{ package.download_url }}">
@@ -50,12 +62,6 @@
                                        </div>
                                {% end %}
                        </div>
-
-                       {# XXX add reference to commit for source packages #}
-
-                       <div class="block">
-                               {% module PackageDependencies(package) %}
-                       </div>
                </div>
        </section>